@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');
:root
{
  --bg:#080a0d;
  --panel:#101419;
  --panel-2:#161c23;
  --line:#27313b;
  --line-hot:#435566;
  --ink:#f4f4ef;
  --muted:#9aa6b2;
  --dim:#65717d;
  --blue:#78a9ff;
  --cyan:#7de2de;
  --orange:#ff9966;
  --green:#9de5ae;
  --max:1400px;
  --radius:18px;
  --ease:cubic-bezier(.22,.72,.25,1);
  --fast:180ms var(--ease);
  --slow:600ms var(--ease);
}
[data-theme="light"]
{
  --bg:#eef1f2;
  --panel:#ffffff;
  --panel-2:#e4e9ed;
  --line:#cbd3db;
  --line-hot:#95a7b8;
  --ink:#11181f;
  --muted:#4c5b68;
  --dim:#697887;
  --blue:#2c65c7;
  --cyan:#087f86;
  --orange:#c95b30;
}
*
{
  box-sizing:border-box;
}
html
{
  scroll-behavior:smooth;
}
body
{
  margin:0;
  overflow-x:hidden;
  background:var(--bg);
  color:var(--ink);
  font:400 16px/1.6 Manrope,system-ui,sans-serif;
}
body::before
{
  position:fixed;
  inset:0;
  z-index:-2;
  background:radial-gradient(circle at 75% 8%,#20406422,transparent 28%),radial-gradient(circle at 10% 90%,#0d394022,transparent 28%);
  content:"";
  pointer-events:none;
}
body::after
{
  position:fixed;
  inset:0;
  z-index:-1;
  opacity:.18;
  background-image:linear-gradient(#7890a30b 1px,transparent 1px),linear-gradient(90deg,#7890a30b 1px,transparent 1px);
  background-size:48px 48px;
  content:"";
  pointer-events:none;
}
a
{
  color:inherit;
}
h1,h2,h3,p
{
  margin-top:0;
}
h1,h2,h3
{
  letter-spacing:-.06em;
  line-height:.94;
}
h1
{
  font-size:clamp(62px,9vw,150px);
}
h2
{
  font-size:clamp(42px,6vw,88px);
}
h3
{
  font-size:clamp(22px,3vw,36px);
}
em
{
  color:var(--blue);
  font-style:normal;
}
.mono,.kicker
{
  font:500 10px/1.3 "DM Mono",monospace;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.kicker
{
  color:var(--blue);
}
.section-pad
{
  width:min(100%,var(--max));
  margin:auto;
  padding:clamp(76px,10vw,150px) clamp(24px,5vw,72px);
}
.skip-link
{
  position:fixed;
  top:8px;
  left:8px;
  z-index:100;
  padding:10px 14px;
  transform:translateY(-150%);
  background:var(--ink);
  color:var(--bg);
}
.skip-link:focus
{
  transform:none;
}
button,.button
{
  font:inherit;
}
:focus-visible
{
  outline:2px solid var(--cyan);
  outline-offset:4px;
}
/* New navigation: a permanent technical control rail. */

.site-header
{
  position:fixed;
  top:24px;
  bottom:24px;
  left:24px;
  z-index:50;
  display:flex;
  width:245px;
  flex-direction:column;
  align-items:stretch;
  justify-content:space-between;
  padding:24px 20px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:color-mix(in srgb,var(--panel) 88%,transparent);
  box-shadow:18px 24px 70px #0005;
  backdrop-filter:blur(18px);
}
.brand
{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
}
.brand>span
{
  display:grid;
  width:42px;
  height:42px;
  place-items:center;
  border:1px solid var(--blue);
  border-radius:10px;
  color:var(--blue);
  font:500 12px "DM Mono",monospace;
  box-shadow:0 0 22px #78a9ff22;
}
.brand b
{
  max-width:120px;
  font-size:14px;
  line-height:1.15;
}
.nav-links
{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin:50px 0 auto;
}
.nav-links a
{
  position:relative;
  display:flex;
  min-height:45px;
  align-items:center;
  padding:0 12px;
  border-left:1px solid transparent;
  color:var(--muted);
  font-size:13px;
  text-decoration:none;
  transition:color var(--fast),border-color var(--fast),background var(--fast);
}
.nav-links a::before
{
  margin-right:12px;
  color:var(--dim);
  font:500 9px "DM Mono",monospace;
  content:attr(data-nav-index);
}
.nav-links a:hover,.nav-links a[aria-current="page"]
{
  border-left-color:var(--blue);
  background:linear-gradient(90deg,#78a9ff16,transparent);
  color:var(--ink);
}
.header-actions
{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
  border-top:1px solid var(--line);
  padding-top:18px;
}
.lang-switch
{
  color:var(--dim);
  font:500 10px "DM Mono",monospace;
}
.lang
{
  min-width:26px;
  min-height:32px;
  border:0;
  background:none;
  color:var(--dim);
  cursor:pointer;
}
.lang.active
{
  color:var(--blue);
}
.cv-link
{
  flex:1;
  color:var(--muted);
  font:500 10px "DM Mono",monospace;
  text-decoration:none;
  text-transform:uppercase;
}
.cv-link:hover
{
  color:var(--blue);
}
.theme-toggle
{
  width:38px;
  height:38px;
  border:1px solid var(--line);
  border-radius:50%;
  background:transparent;
  color:var(--ink);
  cursor:pointer;
}
body
{
  padding-left:293px;
}
.site-footer
{
  display:flex;
  max-width:var(--max);
  justify-content:space-between;
  gap:24px;
  margin:auto;
  padding:34px 72px 42px;
  border-top:1px solid var(--line);
  color:var(--dim);
  font:500 10px "DM Mono",monospace;
}
.site-footer a
{
  margin-left:22px;
  color:var(--muted);
  text-decoration:none;
}
.site-footer a:hover
{
  color:var(--blue);
}
/* Home: editorial left column + live system right column. */

.home-rebuild main
{
  overflow:hidden;
}
.new-hero
{
  width:min(100%,var(--max));
  padding-top:74px;
}
.new-hero-meta
{
  display:flex;
  align-items:center;
  gap:12px;
  border-bottom:1px solid var(--line);
  padding-bottom:16px;
}
.eyebrow-line
{
  width:46px;
  height:2px;
  background:var(--blue);
  box-shadow:0 0 18px var(--blue);
}
.hero-meta-code
{
  margin-left:auto;
  color:var(--dim);
}
.new-hero-grid
{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  min-height:720px;
  border-bottom:1px solid var(--line);
}
.new-hero-copy
{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:80px 60px 80px 0;
}
.hero-index
{
  margin-bottom:26px;
  color:var(--dim);
}
.new-hero-copy h1
{
  max-width:700px;
  margin:0 0 32px;
  font-weight:700;
  overflow-wrap:normal;
}
.new-hero-role
{
  max-width:550px;
  margin:0;
  padding-left:18px;
  border-left:2px solid var(--orange);
  color:var(--orange);
  font-size:clamp(25px,3vw,48px);
  font-weight:700;
  line-height:1;
}
.new-hero-role b
{
  color:var(--blue);
  font-weight:500;
}
.new-hero-intro
{
  max-width:520px;
  margin:34px 0 0;
  color:var(--muted);
  font-size:17px;
  line-height:1.75;
}
.new-hero-facts
{
  display:flex;
  flex-wrap:wrap;
  gap:36px;
  margin-top:30px;
  color:var(--muted);
  font-size:13px;
}
.new-hero-facts span
{
  display:grid;
  gap:5px;
}
.new-hero-facts b
{
  color:var(--dim);
}
.hero-cta
{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:18px;
  margin-top:36px;
}
.button
{
  display:inline-flex;
  min-height:48px;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:12px 18px;
  border:1px solid transparent;
  border-radius:8px;
  font-size:13px;
  font-weight:800;
  text-decoration:none;
  cursor:pointer;
  transition:transform var(--fast),background var(--fast),border var(--fast);
}
.button:hover
{
  transform:translateY(-3px);
}
.button-primary
{
  background:var(--blue);
  color:#07101b;
  box-shadow:0 10px 34px #78a9ff25;
}
.button-primary:hover
{
  background:var(--cyan);
}
.text-link
{
  color:var(--muted);
  font-size:13px;
  text-decoration:none;
}
.text-link:hover
{
  color:var(--blue);
}
.text-link span
{
  color:var(--blue);
}
.new-hero-object
{
  position:relative;
  display:flex;
  min-height:720px;
  align-items:center;
  border-left:1px solid var(--line);
  background:linear-gradient(135deg,#0c1117,#151f2b);
}
.new-hero-object::before
{
  inset:32px;
  border-color:var(--line-hot);
  background-size:32px 32px;
  opacity:.8;
}
.system-console
{
  width:calc(100% - 64px);
  min-height:600px;
  margin:auto;
  border-color:var(--line-hot);
  background:#070b10e8;
}
.console-header,.console-footer,.console-readout
{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:16px 18px
}
.console-header
{
  border-bottom:1px solid var(--line);
  color:var(--muted)
}
.console-header>span:first-child
{
  color:var(--blue);
  font-size:10px
}
.console-led
{
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:var(--green);
  font-size:9px
}
.console-led i
{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 14px var(--green);
  animation:console-pulse 1.8s ease-in-out infinite
}
.console-stage
{
  position:relative;
  min-height:350px;
  overflow:hidden;
  isolation:isolate
}
.console-grid
{
  position:absolute;
  inset:0;
  opacity:.4;
  background-image:linear-gradient(#78a9ff16 1px,transparent 1px),linear-gradient(90deg,#78a9ff16 1px,transparent 1px);
  background-size:27px 27px;
  transform:perspective(500px) rotateX(28deg) scale(1.25);
  transform-origin:center bottom
}
.console-radar
{
  position:absolute;
  top:50%;
  left:50%;
  border:1px solid #78a9ff88;
  border-radius:50%;
  transform:translate(-50%,-50%)
}
.console-radar-one
{
  width:210px;
  height:210px;
  opacity:.42
}
.console-radar-two
{
  width:320px;
  height:320px;
  opacity:.18
}
.console-radar::after
{
  position:absolute;
  top:50%;
  left:-55px;
  width:110px;
  height:1px;
  background:var(--blue);
  content:"";
  opacity:.6
}
.console-core
{
  position:absolute;
  top:50%;
  left:50%;
  display:grid;
  width:118px;
  height:118px;
  place-items:center;
  border:1px solid var(--cyan);
  border-radius:50%;
  background:radial-gradient(circle,#7de2de32 0%,var(--panel) 68%);
  box-shadow:0 0 0 10px #7de2de0e,0 0 45px #7de2de44;
  transform:translate(-50%,-50%)
}
.console-core::before,.console-core::after
{
  position:absolute;
  inset:-14px;
  border:1px solid var(--cyan);
  border-top-color:transparent;
  border-bottom-color:transparent;
  border-radius:50%;
  content:"";
  animation:console-spin 8s linear infinite;
  opacity:.7
}
.console-core::after
{
  inset:-26px;
  animation-direction:reverse;
  animation-duration:12s;
  opacity:.28
}
.console-core span
{
  color:var(--cyan);
  font-size:30px;
  font-weight:800;
  letter-spacing:-.08em
}
.console-core small
{
  position:absolute;
  right:17px;
  bottom:21px;
  color:var(--cyan);
  font:500 9px "DM Mono",monospace
}
.console-crosshair
{
  position:absolute;
  top:20%;
  left:19%;
  color:var(--blue);
  font:20px "DM Mono",monospace
}
.console-caption
{
  position:absolute;
  right:18px;
  bottom:18px;
  color:var(--dim);
  font-size:9px
}
.console-path
{
  position:absolute;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--blue),transparent);
  transform-origin:left center;
  opacity:.7;
  animation:console-scan 3.4s ease-in-out infinite
}
.console-path-one
{
  top:32%;
  left:12%;
  width:27%;
  transform:rotate(24deg)
}
.console-path-two
{
  top:67%;
  right:8%;
  width:33%;
  transform:rotate(-20deg);
  animation-delay:.9s
}
.console-path-three
{
  top:22%;
  right:17%;
  width:20%;
  transform:rotate(112deg);
  animation-delay:1.5s
}
.console-node
{
  position:absolute;
  width:7px;
  height:7px;
  border:1px solid var(--cyan);
  border-radius:50%;
  background:var(--bg);
  box-shadow:0 0 12px var(--cyan)
}
.console-node-one
{
  top:27%;
  left:12%
}
.console-node-two
{
  right:13%;
  bottom:24%
}
.console-node-three
{
  top:18%;
  right:16%
}
.console-modes
{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)
}
.console-modes button
{
  min-height:46px;
  border:0;
  border-right:1px solid var(--line);
  background:transparent;
  color:var(--dim);
  font:500 10px "DM Mono",monospace;
  cursor:pointer
}
.console-modes button:last-child
{
  border-right:0
}
.console-modes button:hover,.console-modes button.is-active
{
  background:#7de2de12;
  color:var(--cyan)
}
.console-modes button:focus-visible
{
  position:relative;
  z-index:1;
  outline:2px solid var(--cyan);
  outline-offset:-2px
}
.console-readout
{
  display:block;
  min-height:72px
}
.console-readout span,.console-readout strong
{
  display:block
}
.console-readout span
{
  color:var(--dim);
  font-size:9px
}
.console-readout strong
{
  margin-top:8px;
  color:var(--ink);
  font-size:15px
}
.console-footer
{
  color:var(--dim);
  font-size:9px
}
@keyframes console-pulse
{
  0%,100%
  {
    opacity:.35
  }
  50%
  {
    opacity:1
  }
}
@keyframes console-spin
{
  to
  {
    transform:rotate(360deg)
  }
}
@keyframes console-scan
{
  0%,100%
  {
    opacity:.15
  }
  50%
  {
    opacity:.85
  }
}
.console-core
{
  border-color:var(--cyan);
  box-shadow:0 0 0 12px #7de2de09,0 0 60px #7de2de33;
}
.console-core span
{
  color:var(--cyan);
}
.console-led i
{
  background:var(--green);
}
.console-modes button.is-active
{
  background:#7de2de12;
  color:var(--cyan);
}
.new-hero-footer
{
  display:flex;
  align-items:center;
  gap:14px;
  padding-top:16px;
  color:var(--dim);
}
.scroll-line
{
  width:100px;
  height:1px;
  background:var(--line-hot);
}
/* Home sections now use strong editorial breaks. */

.statement-section
{
  display:grid;
  grid-template-columns:.36fr 1.64fr;
  gap:10vw;
  border-bottom:1px solid var(--line);
}
.statement-copy
{
  max-width:1000px;
  margin:0;
  color:var(--ink);
  font-size:clamp(34px,5vw,78px);
  font-weight:600;
  line-height:.98;
}
.audience-section
{
  display:grid;
  grid-template-columns:.66fr 1.34fr;
  gap:8vw;
  border-bottom:1px solid var(--line);
}
.audience-heading h2
{
  max-width:480px;
  margin-top:20px;
}
.audience-grid
{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border:1px solid var(--line);
}
.audience-grid article
{
  display:flex;
  min-height:330px;
  flex-direction:column;
  padding:26px;
  border-right:1px solid var(--line);
}
.audience-grid article:last-child
{
  border:0
}
.audience-grid article>span
{
  color:var(--blue)
}
.audience-grid h3
{
  margin:44px 0 14px;
  font:500 12px "DM Mono",monospace;
  letter-spacing:.1em
}
.audience-grid p
{
  margin:0;
  color:var(--muted);
  font-size:14px
}
.audience-grid .text-link
{
  margin-top:auto;
  padding-top:24px
}
.home-work
{
  border-bottom:1px solid var(--line);
}
.section-heading
{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:48px;
}
.section-heading h2
{
  margin:18px 0 0
}
.feature-project-new,.project-new-card
{
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--panel);
  text-decoration:none;
  transition:transform var(--slow),border-color var(--slow),box-shadow var(--slow);
}
.feature-project-new
{
  display:grid;
  grid-template-columns:40% 60%
}
.feature-project-new:hover,.project-new-card:hover
{
  border-color:var(--blue);
  box-shadow:0 25px 80px #0007;
  transform:translateY(-6px)
}
.feature-project-copy,.project-new-copy
{
  padding:clamp(28px,5vw,72px)
}
.feature-project-copy h3
{
  margin:22px 0
}
.feature-project-copy p,.project-new-copy p
{
  max-width:470px;
  color:var(--muted);
  line-height:1.75
}
.feature-project-image,.project-new-media
{
  position:relative;
  min-height:430px;
  overflow:hidden;
  background:#0a1016
}
.feature-project-image img,.project-new-media img
{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.72;
  filter:saturate(.8) contrast(1.12);
  transition:transform 800ms var(--ease),filter 800ms var(--ease),opacity 800ms var(--ease)
}
.feature-project-new:hover img,.project-new-card:hover img
{
  opacity:1;
  filter:saturate(1.1) contrast(1.05);
  transform:scale(1.06)
}
.feature-project-image::after,.project-new-media::after
{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 50%,#05080dcc);
  content:""
}
.image-index,.media-label
{
  position:absolute;
  right:24px;
  bottom:22px;
  z-index:2;
  color:var(--ink);
  font-size:10px
}
.capabilities-section
{
  display:grid;
  grid-template-columns:.7fr 1.3fr;
  gap:10vw;
  border-bottom:1px solid var(--line);
}
.capabilities-heading h2
{
  margin-top:18px
}
.capability-list
{
  border-top:1px solid var(--line)
}
.capability-list article
{
  display:grid;
  grid-template-columns:70px 1fr;
  gap:20px;
  padding:28px 0;
  border-bottom:1px solid var(--line)
}
.capability-list h3
{
  margin-bottom:10px
}
.capability-list p
{
  max-width:580px;
  margin:0;
  color:var(--muted)
}
.capability-number
{
  color:var(--orange)
}
.home-contact-new
{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:30px
}
.home-contact-new h2
{
  margin:18px 0
}
.home-contact-new p
{
  max-width:450px;
  color:var(--muted)
}
/* Projects become a case-study index, not a stack of generic cards. */

.projects-new
{
  max-width:1500px;
  padding-top:100px;
}
.projects-new-intro
{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:8vw;
  align-items:end;
  padding-bottom:70px;
  border-bottom:1px solid var(--line)
}
.projects-new-intro h1
{
  margin:22px 0 0
}
.projects-new-intro p
{
  max-width:440px;
  margin:0;
  color:var(--muted);
  font-size:18px
}
.projects-new-list
{
  display:grid;
  gap:24px;
  padding-top:24px
}
.project-new-card
{
  display:grid;
  grid-template-columns:42% 58%;
  min-height:470px
}
.project-new-card:nth-child(even)
{
  grid-template-columns:58% 42%
}
.project-new-copy
{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start
}
.project-new-copy h2
{
  margin:22px 0
}
.project-new-copy .button
{
  margin-top:30px
}
.project-meta-grid
{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  width:100%;
  max-width:430px;
  margin-top:22px;
  padding-top:14px;
  border-top:1px solid var(--line);
  color:var(--dim);
  font:500 10px/1.5 "DM Mono",monospace;
  text-transform:uppercase
}
.project-meta-grid b
{
  display:block;
  margin-bottom:4px;
  color:var(--blue);
  font-weight:500
}
.projects-new-cta
{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:30px;
  padding-top:110px
}
.projects-new-cta h2
{
  margin-top:18px
}
/* Inner pages share the new editorial frame. */

.inner-main
{
  min-height:calc(100vh - 80px);
  padding-top:100px
}
.inner-main>h1
{
  max-width:960px;
  margin:22px 0 34px
}
.inner-lede
{
  max-width:650px;
  margin-bottom:80px;
  color:var(--muted);
  font-size:18px
}
.about-narrative
{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:10vw;
  max-width:1100px
}
.large-copy
{
  font-size:28px;
  line-height:1.35
}
.about-narrative p:not(.large-copy)
{
  color:var(--muted)
}
.technology-band,.interest-band
{
  display:grid;
  grid-template-columns:.45fr 1.55fr;
  gap:48px;
  margin-top:110px;
  padding-top:18px;
  border-top:1px solid var(--line)
}
.technology-band>div
{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px
}
.technology-band section
{
  display:flex;
  flex-direction:column;
  gap:8px
}
.technology-band b
{
  color:var(--orange);
  font:500 11px "DM Mono",monospace
}
.technology-band span::before
{
  margin-right:8px;
  color:var(--blue);
  content:"+"
}
.interest-band div
{
  display:flex;
  flex-wrap:wrap;
  gap:10px
}
.interest-band div span
{
  padding:9px 12px;
  border:1px solid var(--line);
  border-radius:7px;
  background:var(--panel);
  color:var(--muted)
}
.editorial-timeline
{
  max-width:1050px;
  margin-left:auto;
  border-top:1px solid var(--line)
}
.editorial-timeline article
{
  display:grid;
  grid-template-columns:180px 1fr;
  gap:32px;
  padding:48px 0;
  border-bottom:1px solid var(--line)
}
.editorial-timeline article:first-child
{
  padding-top:70px
}
.editorial-timeline article:first-child h2
{
  font-size:44px
}
.editorial-timeline h2
{
  margin:14px 0;
  font-size:30px
}
.editorial-timeline p
{
  max-width:680px;
  margin:0;
  color:var(--muted)
}
.credentials
{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10vw;
  margin-top:110px;
  padding-top:18px;
  border-top:1px solid var(--line)
}
.credentials h2
{
  margin:24px 0 8px;
  font-size:22px
}
.credentials p
{
  color:var(--muted)
}
.contact-inner h1
{
  margin-bottom:16px
}
.contact-layout
{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:10vw;
  margin-top:70px
}
.contact-form
{
  max-width:720px
}
.form-row
{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px
}
.contact-field
{
  display:grid;
  gap:8px;
  margin-bottom:24px
}
.contact-field>span
{
  color:var(--muted);
  font:500 11px "DM Mono",monospace;
  letter-spacing:.1em;
  text-transform:uppercase
}
.contact-field input,.contact-field textarea
{
  width:100%;
  min-height:50px;
  padding:10px 0;
  border:0;
  border-bottom:1px solid var(--line);
  outline:0;
  background:transparent;
  color:var(--ink);
  font:inherit
}
.contact-field textarea
{
  min-height:160px;
  resize:vertical
}
.contact-field input:focus,.contact-field textarea:focus
{
  border-color:var(--blue)
}
.contact-alternatives
{
  border-top:1px solid var(--line)
}
.contact-alternatives>.kicker
{
  display:block;
  padding-top:18px;
  margin-bottom:20px
}
.contact-alternatives a
{
  display:flex;
  flex-direction:column;
  gap:5px;
  padding:16px 0;
  border-bottom:1px solid var(--line);
  text-decoration:none
}
.contact-alternatives a:hover
{
  color:var(--blue)
}
.form-status
{
  min-height:26px;
  color:var(--muted);
  font-size:13px
}
.form-status.is-error
{
  color:var(--orange)
}
.form-status.is-success
{
  color:var(--green)
}
@media(max-width:1050px)
{
  body
  {
    padding-left:0
  }
  .site-header
  {
    position:sticky;
    top:12px;
    right:12px;
    bottom:auto;
    left:12px;
    width:auto;
    min-height:64px;
    flex-direction:row;
    align-items:center;
    padding:10px 14px
  }
  .nav-links
  {
    flex-direction:row;
    gap:4px;
    margin:0 0 0 auto
  }
  .nav-links a
  {
    min-height:40px;
    padding:0 9px;
    border-left:0
  }
  .nav-links a::before
  {
    display:none
  }
  .nav-links a[aria-current="page"]::after
  {
    right:9px;
    bottom:0;
    left:9px
  }
  .header-actions
  {
    border:0;
    padding:0
  }
  .new-hero-grid
  {
    grid-template-columns:1fr 1fr
  }
  .new-hero-copy
  {
    padding-right:34px
  }
  .system-console
  {
    width:calc(100% - 40px)
  }
  .site-footer
  {
    padding-right:32px;
    padding-left:32px
  }
}
@media(max-width:1300px) and (min-width:761px)
{
  .new-hero-grid
  {
    grid-template-columns:1fr
  }
  .new-hero-copy
  {
    padding-right:0;
    padding-bottom:70px
  }
  .new-hero-object
  {
    min-height:650px;
    border-top:1px solid var(--line);
    border-left:0
  }
  .system-console
  {
    width:calc(100% - 64px)
  }
}
@media(max-width:760px)
{
  .section-pad
  {
    padding:72px 22px
  }
  .site-header
  {
    position:relative;
    top:0;
    right:auto;
    left:auto;
    margin:12px;
    border-radius:12px;
    flex-wrap:wrap
  }
  .brand b,.cv-link
  {
    display:none
  }
  .nav-links
  {
    order:3;
    width:100%;
    overflow:auto;
    padding-top:8px
  }
  .nav-links a
  {
    flex:0 0 auto
  }
  .new-hero
  {
    padding-top:46px
  }
  .hero-meta-code
  {
    display:none
  }
  .new-hero-grid,.statement-section,.audience-section,.capabilities-section,.projects-new-intro,.feature-project-new,.project-new-card,.project-new-card:nth-child(even),.about-narrative,.credentials,.contact-layout
  {
    display:block
  }
  .new-hero-copy
  {
    padding:70px 0 50px
  }
  .new-hero-copy h1
  {
    font-size:clamp(58px,17vw,92px)
  }
  .new-hero-object
  {
    min-height:570px;
    border-top:1px solid var(--line);
    border-left:0
  }
  .system-console
  {
    width:100%;
    min-height:520px
  }
  .console-stage
  {
    min-height:280px
  }
  .console-core
  {
    width:96px;
    height:96px
  }
  .statement-copy
  {
    margin-top:26px;
    font-size:clamp(34px,10vw,54px)
  }
  .audience-heading
  {
    margin-bottom:42px
  }
  .audience-grid
  {
    grid-template-columns:1fr
  }
  .audience-grid article
  {
    min-height:230px;
    border-right:0;
    border-bottom:1px solid var(--line)
  }
  .audience-grid article:last-child
  {
    border-bottom:0
  }
  .section-heading
  {
    display:block
  }
  .section-heading .text-link
  {
    display:inline-block;
    margin-top:22px
  }
  .feature-project-image,.project-new-media
  {
    min-height:280px;
    border-top:1px solid var(--line)
  }
  .project-new-copy
  {
    padding:42px 26px 52px
  }
  .projects-new
  {
    padding-top:60px
  }
  .projects-new-intro p
  {
    margin-top:30px
  }
  .projects-new-cta,.home-contact-new
  {
    display:block
  }
  .projects-new-cta .button,.home-contact-new .button
  {
    margin-top:26px
  }
  .inner-main
  {
    padding-top:60px
  }
  .inner-main>h1
  {
    font-size:clamp(48px,14vw,80px)
  }
  .large-copy
  {
    font-size:24px
  }
  .technology-band,.interest-band
  {
    display:block;
    margin-top:74px
  }
  .technology-band>div
  {
    grid-template-columns:1fr 1fr;
    margin-top:24px
  }
  .editorial-timeline article
  {
    grid-template-columns:90px 1fr;
    gap:18px;
    padding:34px 0
  }
  .editorial-timeline article:first-child h2
  {
    font-size:30px
  }
  .credentials
  {
    margin-top:72px
  }
  .credentials>div+div
  {
    margin-top:50px
  }
  .form-row
  {
    grid-template-columns:1fr;
    gap:0
  }
  .contact-layout
  {
    margin-top:50px
  }
  .contact-alternatives
  {
    margin-top:64px
  }
  .site-footer
  {
    display:block;
    padding:30px 22px
  }
  .site-footer>span
  {
    display:block;
    margin-top:8px
  }
  .site-footer a
  {
    display:inline-block;
    margin:8px 18px 0 0
  }
}
@media(max-width:420px)
{
  .new-hero-facts
  {
    display:grid;
    gap:18px
  }
  .console-header,.console-footer,.console-readout
  {
    padding-right:12px;
    padding-left:12px
  }
  .console-header>span:first-child,.console-footer
  {
    font-size:8px
  }
  .technology-band>div
  {
    grid-template-columns:1fr
  }
}
@media(prefers-reduced-motion:reduce)
{
  *,*::before,*::after
  {
    scroll-behavior:auto!important;
    animation-duration:.01ms!important;
    transition-duration:.01ms!important
  }
}

/* Hero identity panel: a quieter profile card with restrained technical detail. */
.new-hero-object
{
  padding:44px;
  background:linear-gradient(135deg,#0b1016,#111a24);
}
.system-console
{
  width:min(100%,560px);
  min-height:0;
  border:1px solid var(--line-hot);
  background:#070b10f2;
  box-shadow:0 20px 60px #00000024;
}
.console-header
{
  padding:14px 18px;
}
.console-header>span:first-child
{
  letter-spacing:.12em;
}
.console-led
{
  color:var(--dim);
  font-size:8px;
  letter-spacing:.08em;
}
.console-stage
{
  min-height:390px;
  background:linear-gradient(180deg,#0a101700,#0a101699);
}
.console-grid
{
  opacity:.22;
  background-size:32px 32px;
  transform:perspective(560px) rotateX(24deg) scale(1.18);
}
.console-radar-one
{
  width:290px;
  height:290px;
  border-color:#78a9ff42;
  opacity:.38;
}
.console-radar-one::after
{
  width:150px;
  left:-75px;
  background:var(--blue);
  opacity:.42;
}
.console-path-one
{
  top:28%;
  left:13%;
  width:25%;
  opacity:.42;
}
.console-node-one
{
  top:23%;
  left:13%;
  opacity:.7;
}
.console-profile
{
  position:absolute;
  top:50%;
  left:50%;
  display:flex;
  align-items:center;
  gap:22px;
  width:min(82%,340px);
  padding:18px;
  border:1px solid #7de2de52;
  background:#0b1219;
  box-shadow:0 0 0 8px #7de2de08,0 18px 40px #00000038;
  overflow:hidden;
  transform:translate(-50%,-50%);
}
.console-profile-photo
{
  position:relative;
  flex:0 0 108px;
  height:138px;
  overflow:hidden;
  border:1px solid var(--cyan);
  background:var(--panel);
}
.console-profile-photo img
{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
  filter:saturate(.78) contrast(1.04);
  animation:portrait-glitch 8s steps(1,end) infinite;
}
.console-profile-photo::before
{
  position:absolute;
  top:-8%;
  left:0;
  width:100%;
  height:2px;
  z-index:2;
  background:var(--blue);
  box-shadow:0 0 14px var(--blue);
  content:"";
  opacity:.7;
  animation:portrait-scan 3.8s ease-in-out infinite;
  pointer-events:none;
}
.console-profile-photo::after
{
  position:absolute;
  inset:0;
  z-index:3;
  background:linear-gradient(180deg,transparent 0 18%,#78a9ffcc 19% 22%,transparent 23% 42%,#7de2deaa 43% 46%,transparent 47% 70%,#78a9ff99 71% 74%,transparent 75%);
  content:"";
  opacity:0;
  animation:portrait-blue-glitch 8s steps(1,end) infinite;
  pointer-events:none;
}
.console-profile-copy
{
  display:grid;
  gap:10px;
}
.console-profile-copy span:first-child
{
  color:var(--blue);
  font-size:9px;
  letter-spacing:.14em;
}
.console-profile-copy strong
{
  color:var(--ink);
  font-size:clamp(24px,3vw,34px);
  line-height:.98;
  letter-spacing:-.05em;
}
.console-profile-copy span:last-child
{
  color:var(--dim);
  font-size:9px;
  letter-spacing:.12em;
}
.console-caption
{
  right:18px;
  bottom:16px;
  color:var(--dim);
  font-size:8px;
  letter-spacing:.1em;
}
.console-modes button:hover,.console-modes button.is-active
{
  background:#78a9ff12;
  color:var(--blue);
}
.console-readout
{
  min-height:68px;
}
.console-readout strong
{
  color:var(--ink);
  font-size:14px;
}
.console-footer
{
  padding-top:12px;
  padding-bottom:12px;
}
@media(max-width:760px)
{
  .new-hero-object
  {
    min-height:0;
    padding:22px 0;
  }
  .system-console
  {
    min-height:0;
  }
  .console-stage
  {
    min-height:330px;
  }
  .console-profile
  {
    width:min(86%,320px);
    gap:16px;
    padding:14px;
  }
  .console-profile-photo
  {
    flex-basis:88px;
    height:116px;
  }
}
@media(max-width:420px)
{
  .console-profile
  {
    width:88%;
  }
  .console-profile-copy strong
  {
    font-size:25px;
  }
}
/* Final visual corrections: keep identity visible and show complete project previews. */

.new-hero-copy h1
{
  font-size:clamp(56px,6vw,94px);
  overflow-wrap:normal;
}
.console-portrait
{
  position:absolute;
  left:24px;
  bottom:24px;
  z-index:2;
  display:flex;
  align-items:flex-end;
  gap:10px
}
.console-portrait img
{
  display:block;
  width:72px;
  height:86px;
  object-fit:cover;
  border:1px solid var(--cyan);
  border-radius:7px;
  filter:saturate(.75) contrast(1.08);
  box-shadow:0 0 24px #7de2de22
}
.console-portrait span
{
  padding-bottom:4px;
  color:var(--cyan);
  font-size:8px;
  writing-mode:vertical-rl
}
.feature-project-image img,.project-new-media img
{
  padding:24px;
  object-fit:contain;
  background:#070a0e
}
.project-new-copy h2
{
  max-width:100%;
  font-size:clamp(34px,4vw,64px);
  overflow-wrap:anywhere
}
@media(max-width:760px)
{
  .console-portrait
  {
    left:14px;
    bottom:14px
  }
  .console-portrait img
  {
    width:58px;
    height:70px
  }
  .feature-project-image img,.project-new-media img
  {
    padding:14px
  }
}
/* Identity portrait replaces the console monogram. */

.console-core img
{
  display:block;
  width:100%;
  height:100%;
  border-radius:50%;
  object-fit:cover;
  filter:saturate(.82) contrast(1.06);
  opacity:.92
}
.console-core small
{
  z-index:2
}
/* Portfolio dashboard: status first, project cards second. */

.project-dashboard-intro
{
  grid-template-columns:1.1fr .9fr;
  align-items:end
}
.project-dashboard-intro h1
{
  font-size:clamp(58px,7vw,112px);
  line-height:.9
}
.project-dashboard-intro p
{
  font-size:17px;
  line-height:1.65
}
.project-dashboard-intro p strong
{
  color:var(--ink)
}
.portfolio-status
{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  border-bottom:1px solid var(--line)
}
.portfolio-status-card
{
  min-height:156px;
  padding:22px 18px;
  border-right:1px solid var(--line);
  border-top:2px solid var(--line);
  display:flex;
  flex-direction:column;
  gap:6px
}
.portfolio-status-card:last-child
{
  border-right:0
}
.portfolio-status-card strong
{
  font-size:38px;
  line-height:1;
  letter-spacing:-.08em
}
.portfolio-status-card .mono
{
  color:var(--muted);
  font-size:9px
}
.portfolio-status-card small
{
  color:var(--dim);
  font-size:11px;
  line-height:1.35
}
.status-total
{
  border-top-color:var(--ink)
}
.status-online
{
  border-top-color:var(--green)
}
.status-ready
{
  border-top-color:var(--blue)
}
.status-building
{
  border-top-color:var(--orange)
}
.status-paused
{
  border-top-color:#e56b7d
}
.portfolio-overview
{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:72px;
  padding:58px 0 34px;
  border-bottom:1px solid var(--line)
}
.portfolio-progress-panel h2
{
  margin:20px 0 34px;
  font-size:clamp(38px,4vw,64px)
}
.portfolio-bar
{
  display:flex;
  width:100%;
  height:14px;
  margin-top:12px;
  background:var(--line);
  overflow:hidden
}
.portfolio-bar span
{
  width:66.66%;
  background:var(--green)
}
.portfolio-bar i
{
  width:33.34%;
  background:var(--orange)
}
.portfolio-legend
{
  display:flex;
  gap:24px;
  margin-top:16px;
  color:var(--muted);
  font:500 10px "DM Mono",monospace;
  text-transform:uppercase
}
.portfolio-legend span
{
  display:flex;
  align-items:center;
  gap:7px
}
.portfolio-legend strong
{
  color:var(--ink)
}
.dot
{
  width:7px;
  height:7px;
  border-radius:50%;
  display:inline-block
}
.dot-online
{
  background:var(--green)
}
.dot-build
{
  background:var(--orange)
}
.portfolio-metrics
{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin-top:48px;
  padding-top:18px;
  border-top:1px solid var(--line)
}
.portfolio-metrics span
{
  display:grid;
  gap:7px
}
.portfolio-metrics small
{
  color:var(--dim);
  font:500 9px "DM Mono",monospace
}
.portfolio-metrics strong
{
  font-size:28px
}
.portfolio-list-panel
{
  border-top:1px solid var(--line)
}
.portfolio-list-row
{
  display:grid;
  grid-template-columns:1.35fr 1fr .7fr;
  gap:14px;
  align-items:center;
  min-height:54px;
  border-bottom:1px solid var(--line);
  font-size:12px
}
.portfolio-list-row strong
{
  font-weight:600
}
.portfolio-list-row>span
{
  color:var(--muted)
}
.portfolio-list-row>b
{
  font:500 9px "DM Mono",monospace;
  text-align:right
}
.portfolio-list-head
{
  min-height:34px;
  color:var(--dim);
  font:500 9px "DM Mono",monospace
}
.portfolio-list-head span:last-child
{
  text-align:right
}
@media(max-width:900px)
{
  .portfolio-status
  {
    grid-template-columns:repeat(3,1fr)
  }
  .portfolio-status-card:nth-child(3)
  {
    border-right:0
  }
  .portfolio-overview
  {
    grid-template-columns:1fr;
    gap:48px
  }
  .project-dashboard-intro h1
  {
    font-size:clamp(54px,10vw,90px)
  }
}
@media(max-width:760px)
{
  .portfolio-status
  {
    grid-template-columns:repeat(2,1fr)
  }
  .portfolio-status-card:nth-child(2),.portfolio-status-card:nth-child(4)
  {
    border-right:0
  }
  .portfolio-status-card:last-child
  {
    grid-column:1/-1
  }
  .portfolio-list-row
  {
    grid-template-columns:1fr .7fr;
    gap:8px;
    padding:10px 0
  }
  .portfolio-list-row>b
  {
    grid-column:2;
    text-align:left
  }
  .portfolio-list-head
  {
    display:none
  }
  .portfolio-metrics
  {
    gap:12px
  }
  .portfolio-metrics strong
  {
    font-size:24px
  }
}
/* About page: a factual technical profile instead of a generic bio. */

.about-main
{
  max-width:1500px;
  padding-top:100px
}
.about-profile-head
{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:8vw;
  align-items:end;
  padding-bottom:70px;
  border-bottom:1px solid var(--line)
}
.about-profile-head h1
{
  margin:22px 0 0;
  font-size:clamp(58px,7vw,112px);
  line-height:.9
}
.about-profile-aside
{
  max-width:470px
}
.about-profile-aside>.mono
{
  color:var(--dim)
}
.about-profile-aside p
{
  margin:22px 0 26px;
  color:var(--muted);
  font-size:17px;
  line-height:1.65
}
.about-intro-grid
{
  display:grid;
  grid-template-columns:1.25fr .75fr;
  gap:10vw;
  padding:70px 0;
  border-bottom:1px solid var(--line)
}
.about-lead
{
  max-width:850px;
  margin:0;
  font-size:clamp(28px,3.4vw,52px);
  font-weight:600;
  line-height:1.05;
  letter-spacing:-.06em
}
.about-facts
{
  display:grid;
  gap:20px;
  align-content:start
}
.about-facts div
{
  display:grid;
  gap:5px;
  padding-bottom:16px;
  border-bottom:1px solid var(--line)
}
.about-facts span
{
  color:var(--blue)
}
.about-facts strong
{
  font-size:14px
}
.about-section-block
{
  display:grid;
  grid-template-columns:.28fr 1.72fr;
  gap:7vw;
  padding:86px 0;
  border-bottom:1px solid var(--line)
}
.about-section-label
{
  display:flex;
  flex-direction:column;
  gap:14px
}
.about-section-label>.mono
{
  color:var(--dim)
}
.about-experience-list
{
  border-top:1px solid var(--line)
}
.about-experience-item
{
  display:grid;
  grid-template-columns:150px 1fr;
  gap:34px;
  padding:36px 0;
  border-bottom:1px solid var(--line)
}
.about-experience-item>span
{
  color:var(--blue);
  padding-top:8px
}
.about-experience-item h2
{
  margin:0 0 7px;
  font-size:clamp(28px,3vw,46px)
}
.about-experience-item h3
{
  margin:0 0 18px;
  color:var(--orange);
  font:500 12px "DM Mono",monospace;
  letter-spacing:.08em;
  text-transform:uppercase
}
.about-experience-item p
{
  max-width:760px;
  margin:0 0 20px;
  color:var(--muted);
  line-height:1.7
}
.about-experience-item .tags,.about-practice-matrix .tags
{
  display:flex;
  flex-wrap:wrap;
  gap:8px
}
.about-experience-item .tags span,.about-practice-matrix .tags span
{
  padding:7px 10px;
  border:1px solid var(--line-hot);
  border-radius:999px;
  background:#0b1016;
  color:var(--muted);
  font:500 10px/1.2 "DM Mono",monospace;
  letter-spacing:.02em;
  transition:color var(--fast),border-color var(--fast),background-color var(--fast),box-shadow var(--fast)
}
.about-experience-item .tags span:hover,.about-practice-matrix .tags span:hover
{
  border-color:var(--blue);
  background:#0f1824;
  color:var(--ink);
  box-shadow:0 0 18px #78a9ff14
}
.about-practice-matrix
{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;
  margin-top:1px;
  border:1px solid var(--line);
  background:var(--line)
}
.about-practice-cluster
{
  min-width:0;
  min-height:132px;
  padding:22px;
  background:var(--bg)
}
.about-practice-cluster>.mono
{
  display:block;
  margin-bottom:18px;
  color:var(--blue);
  font-size:10px
}
.about-skill-grid
{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line)
}
.about-skill-grid article
{
  min-height:220px;
  padding:28px;
  background:var(--bg)
}
.about-skill-grid article>span
{
  color:var(--orange)
}
.about-skill-grid h2
{
  margin:38px 0 12px;
  font-size:clamp(25px,2.4vw,38px)
}
.about-skill-grid p
{
  margin:0;
  color:var(--muted);
  line-height:1.6
}
.about-split-section
{
  display:grid;
  grid-template-columns:1fr;
  gap:1px;
  background:var(--line);
  border-bottom:1px solid var(--line)
}
.about-info-panel
{
  padding:72px 0 48px;
  background:var(--bg)
}
.about-info-panel+ .about-info-panel
{
  padding-left:5vw;
  padding-right:0
}
.about-info-panel h2
{
  margin:22px 0 36px;
  font-size:clamp(34px,4vw,60px)
}
.about-info-row
{
  display:grid;
  grid-template-columns:120px 1fr;
  gap:18px;
  padding:22px 0;
  border-top:1px solid var(--line)
}
.about-info-row>span
{
  color:var(--blue)
}
.about-info-row strong
{
  font-size:15px
}
.about-info-row p
{
  margin:5px 0 0;
  color:var(--muted);
  font-size:13px
}
.about-education-path
{
  display:flex;
  min-height:100%;
  flex-direction:column;
  justify-content:space-between;
  padding:72px 0 72px 5vw;
  background:var(--bg)
}
.education-path-content
{
  display:grid;
  grid-template-columns:minmax(150px,.7fr) minmax(0,1.3fr);
  align-items:center;
  gap:clamp(28px,4vw,62px);
  min-height:250px
}
.education-path-steps
{
  position:relative;
  display:grid;
  gap:40px
}
.education-path-steps::before
{
  position:absolute;
  top:15px;
  bottom:15px;
  left:6px;
  width:1px;
  background:var(--line);
  content:""
}
.education-path-stage
{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:14px minmax(0,1fr);
  align-items:center;
  gap:12px;
  width:100%;
  padding:0;
  border:0;
  background:transparent;
  color:var(--muted);
  font:inherit;
  text-align:left;
  cursor:pointer;
  transition:color .18s ease
}
.education-path-stage:focus-visible
{
  outline:1px solid var(--blue);
  outline-offset:6px
}
.education-path-node
{
  width:13px;
  height:13px;
  border:1px solid var(--line-hot);
  border-radius:50%;
  background:var(--bg);
  transition:border-color .18s ease,background-color .18s ease
}
.education-path-stage-copy
{
  display:grid;
  gap:5px
}
.education-path-stage-copy .mono
{
  color:var(--dim);
  font-size:10px
}
.education-path-stage-copy>span:last-child
{
  font-size:13px;
  line-height:1.35
}
.education-path-stage.is-active
{
  color:var(--ink)
}
.education-path-stage.is-active .education-path-node
{
  border-color:var(--blue);
  background:var(--blue)
}
.education-path-stage.is-active .education-path-stage-copy .mono
{
  color:var(--blue)
}
.education-path-detail
{
  min-width:0;
  padding:20px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  transition:opacity .16s ease,transform .16s ease
}
.education-path-detail.is-updating
{
  opacity:.45;
  transform:translateY(4px)
}
.education-path-detail>.mono
{
  color:var(--blue);
  font-size:10px
}
.education-path-detail h3
{
  margin:17px 0 10px;
  font-size:clamp(22px,2vw,32px);
  line-height:1.03;
  letter-spacing:-.045em
}
.education-path-detail>p
{
  margin:13px 0 0;
  color:var(--muted);
  font-size:12px;
  line-height:1.5
}
.education-path-summary
{
  margin:42px 0 0;
  padding-top:14px;
  border-top:1px solid var(--line);
  color:var(--dim);
  font-size:10px;
  letter-spacing:.08em
}
.digital-lab
{
  display:flex;
  min-height:100%;
  flex-direction:column;
  padding:72px 0 72px 5vw;
  background:var(--bg)
}
.digital-lab-header
{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding-bottom:18px;
  border-bottom:1px solid var(--line)
}
.digital-lab-header .kicker
{
  color:var(--blue)
}
.digital-lab-header>.mono
{
  color:var(--dim);
  font-size:9px
}
.digital-lab-tabs
{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  border-bottom:1px solid var(--line)
}
.digital-lab-tab
{
  display:grid;
  min-height:92px;
  align-content:center;
  gap:11px;
  padding:18px 20px;
  border:0;
  border-right:1px solid var(--line);
  background:transparent;
  color:var(--muted);
  font:inherit;
  text-align:left;
  cursor:pointer;
  transition:background-color .2s ease,color .2s ease
}
.digital-lab-tab:last-child
{
  border-right:0
}
.digital-lab-tab:hover,.digital-lab-tab:focus-visible
{
  background:#0d141d;
  color:var(--ink)
}
.digital-lab-tab:focus-visible
{
  outline:1px solid var(--blue);
  outline-offset:-1px
}
.digital-lab-tab .mono
{
  color:var(--dim);
  font-size:9px
}
.digital-lab-tab strong
{
  font-size:12px;
  font-weight:500;
  line-height:1.35
}
.digital-lab-tab.is-active
{
  background:#0d141d;
  color:var(--ink)
}
.digital-lab-tab.is-active .mono
{
  color:var(--blue)
}
.digital-lab-panel
{
  position:relative;
  min-height:205px;
  margin-top:46px;
  padding:26px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  transition:opacity .18s ease,transform .18s ease
}
.digital-lab-panel.is-updating
{
  opacity:.45;
  transform:translateY(4px)
}
.digital-lab-panel>.mono
{
  color:var(--blue);
  font-size:10px
}
.digital-lab-panel h3
{
  max-width:430px;
  margin:24px 0 14px;
  font-size:clamp(25px,2.5vw,42px);
  line-height:1.02;
  letter-spacing:-.045em
}
.digital-lab-panel p
{
  max-width:430px;
  margin:0;
  color:var(--muted);
  font-size:13px;
  line-height:1.6
}
.digital-lab-signal
{
  position:absolute;
  right:0;
  bottom:27px;
  display:flex;
  align-items:flex-end;
  gap:5px;
  height:54px
}
.digital-lab-signal i
{
  display:block;
  width:5px;
  height:12px;
  border:1px solid var(--line-hot);
  background:transparent;
  transition:height .2s ease,background-color .2s ease,border-color .2s ease
}
.digital-lab[data-lab-active="build"] .digital-lab-signal i:nth-child(-n+1),
.digital-lab[data-lab-active="stack"] .digital-lab-signal i:nth-child(-n+2),
.digital-lab[data-lab-active="process"] .digital-lab-signal i:nth-child(-n+3)
{
  height:44px;
  border-color:var(--blue);
  background:var(--blue)
}
.digital-lab[data-lab-active="process"] .digital-lab-signal i:nth-child(4)
{
  height:54px;
  border-color:var(--blue);
  background:var(--blue)
}
.credential-list
{
  border-top:1px solid var(--line)
}
.credential-list>span
{
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:16px 0;
  border-bottom:1px solid var(--line);
  font-size:13px
}
.credential-list small
{
  color:var(--muted);
  text-align:right
}
.about-footer-grid
{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10vw;
  padding:70px 0
}
.about-footer-grid p
{
  max-width:560px;
  margin:22px 0 0;
  color:var(--muted);
  font-size:18px;
  line-height:1.65
}
.about-pills
{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:22px
}
.about-pills span
{
  padding:10px 13px;
  border:1px solid var(--line);
  border-radius:7px;
  color:var(--muted);
  font-size:13px
}
@media(max-width:900px)
{
  .about-profile-head,.about-intro-grid,.about-section-block,.about-split-section,.about-footer-grid
  {
    grid-template-columns:1fr;
    gap:42px
  }
  .about-info-panel,.about-info-panel+.about-info-panel
  {
    padding:58px 0 40px
  }
  .about-education-path
  {
    padding:58px 0
  }
  .digital-lab
  {
    padding:58px 0
  }
  .about-profile-head h1
  {
    font-size:clamp(56px,10vw,90px)
  }
  .about-section-block
  {
    padding:64px 0
  }
  .about-section-label
  {
    flex-direction:row;
    justify-content:space-between
  }
  .about-footer-grid
  {
    gap:30px
  }
}
@media(max-width:600px)
{
  .about-main
  {
    padding-top:60px
  }
  .about-profile-head
  {
    padding-bottom:52px
  }
  .about-intro-grid
  {
    padding:52px 0
  }
  .about-experience-item
  {
    grid-template-columns:1fr;
    gap:10px
  }
  .about-skill-grid
  {
    grid-template-columns:1fr
  }
  .about-info-row
  {
    grid-template-columns:1fr;
    gap:7px
  }
  .education-path-content
  {
    grid-template-columns:1fr;
    gap:34px
  }
  .digital-lab-tabs
  {
    grid-template-columns:1fr
  }
  .digital-lab-tab
  {
    min-height:72px;
    border-right:0;
    border-bottom:1px solid var(--line)
  }
  .digital-lab-tab:last-child
  {
    border-bottom:0
  }
  .digital-lab-panel
  {
    min-height:230px
  }
  .digital-lab-signal
  {
    right:4px;
    bottom:24px
  }
  .credential-list>span
  {
    display:grid;
    gap:5px
  }
  .credential-list small
  {
    text-align:left
  }
}
/* Project catalogue: compact, scannable and filterable. */

.button-secondary
{
  border-color:var(--line-hot);
  background:transparent;
  color:var(--ink)
}
.button-secondary:hover
{
  border-color:var(--blue);
  background:#78a9ff12
}
.project-control-panel
{
  display:grid;
  grid-template-columns:.7fr 1.3fr;
  gap:48px;
  align-items:end;
  padding:26px 0;
  border-bottom:1px solid var(--line)
}
.project-status-summary
{
  display:flex;
  align-items:baseline;
  gap:14px;
  flex-wrap:wrap
}
.project-status-summary strong
{
  font-size:20px
}
.project-status-summary>.mono
{
  color:var(--dim);
  font-size:9px
}
.project-filters
{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap
}
.project-filter
{
  padding:10px 13px;
  border:1px solid var(--line);
  border-radius:6px;
  background:transparent;
  color:var(--muted);
  font:500 10px "DM Mono",monospace;
  text-transform:uppercase;
  cursor:pointer;
  transition:color var(--fast),background var(--fast),border-color var(--fast)
}
.project-filter:hover,.project-filter.is-active
{
  border-color:var(--blue);
  background:#78a9ff14;
  color:var(--ink)
}
.project-filter:focus-visible
{
  outline:2px solid var(--cyan);
  outline-offset:3px
}
.projects-new-list
{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px
}
.project-new-card
{
  display:flex;
  min-height:0;
  flex-direction:column
}
.project-new-card:nth-child(even)
{
  grid-template-columns:unset
}
.project-new-featured
{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:40% 60%
}
.project-new-featured .project-new-copy
{
  order:1
}
.project-new-featured .project-new-media
{
  order:2
}
.project-new-copy
{
  padding:32px
}
.project-new-copy h2
{
  font-size:clamp(32px,3.3vw,54px);
  line-height:.98
}
.project-new-copy p
{
  font-size:14px;
  line-height:1.6
}
.project-new-copy .button
{
  margin-top:24px
}
.project-new-media
{
  min-height:300px
}
.project-new-media img
{
  padding:18px
}
.project-build-grid
{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  padding-top:18px
}
.project-placeholder
{
  position:relative;
  min-height:310px;
  background:linear-gradient(135deg,var(--panel),#0b1118)
}
.project-placeholder-mark
{
  position:absolute;
  top:24px;
  right:26px;
  color:var(--dim)
}
.project-placeholder .project-new-copy
{
  margin-top:auto
}
.project-placeholder .project-new-copy h2
{
  max-width:430px
}
.project-placeholder .project-meta-grid
{
  margin-top:10px
}
.project-new-card[hidden]
{
  display:none
}
.status-live
{
  color:var(--green)!important
}
.status-build
{
  color:var(--orange)!important
}
.projects-new-cta
{
  padding-top:76px
}
.projects-new-cta h2
{
  font-size:clamp(32px,4vw,60px)
}
.home-contact-new
{
  padding-top:84px;
  padding-bottom:84px
}
.home-contact-new h2
{
  font-size:clamp(48px,6vw,82px)
}
@media(max-width:900px)
{
  .project-control-panel
  {
    grid-template-columns:1fr;
    gap:20px
  }
  .project-filters
  {
    justify-content:flex-start
  }
  .projects-new-list,.project-build-grid
  {
    grid-template-columns:1fr
  }
  .project-new-featured
  {
    grid-column:auto;
    display:flex
  }
  .project-new-featured .project-new-copy,.project-new-featured .project-new-media
  {
    order:initial
  }
}
@media(max-width:760px)
{
  .project-control-panel
  {
    padding:22px 0
  }
  .project-filter
  {
    font-size:9px
  }
  .project-new-copy
  {
    padding:28px
  }
  .home-contact-new
  {
    padding-top:64px;
    padding-bottom:64px
  }
}

/* Profile telemetry: motion stays around the portrait instead of under it. */
.console-stage::before
{
  position:absolute;
  inset:12% 18%;
  z-index:1;
  border:1px solid #78a9ff24;
  border-radius:50%;
  box-shadow:0 0 0 18px #78a9ff06,0 0 0 42px #7de2de05;
  content:"";
  animation:hero-orbit 18s linear infinite;
  pointer-events:none;
}
.console-stage::after
{
  display:none;
}
.console-profile
{
  z-index:4;
}
.console-profile::before
{
  position:absolute;
  inset:-11px;
  border:1px solid #7de2de3d;
  border-left-color:transparent;
  border-right-color:transparent;
  content:"";
  animation:hero-orbit 9s linear infinite reverse;
  pointer-events:none;
}
.console-profile::after
{
  position:absolute;
  inset:0;
  z-index:0;
  background-image:linear-gradient(112deg,transparent 0 48.7%,#7de2de30 49.4%,#7de2de30 49.8%,transparent 50.5%),linear-gradient(68deg,transparent 0 49.3%,#78a9ff20 49.7%,#78a9ff20 50.1%,transparent 50.5%);
  background-position:0 0,100% 100%;
  background-size:160% 160%;
  content:"";
  opacity:.72;
  animation:card-lines-drift 14s linear infinite;
  pointer-events:none;
}
.console-profile-photo,.console-profile-copy
{
  position:relative;
  z-index:1;
}
.console-node-one
{
  animation:hero-node-pulse 2.8s ease-in-out infinite;
}
.console-node-one::before,.console-node-one::after
{
  position:absolute;
  inset:-7px;
  border:1px solid #7de2de36;
  border-radius:50%;
  content:"";
  animation:hero-node-ring 2.8s ease-out infinite;
}
.console-node-one::after
{
  animation-delay:1.4s;
}
@keyframes hero-orbit
{
  from
  {
    transform:rotate(0deg)
  }
  to
  {
    transform:rotate(360deg)
  }
}
@keyframes hero-scan
{
  0%,100%
  {
    top:18%;
    opacity:.08
  }
  50%
  {
    top:82%;
    opacity:.5
  }
}
@keyframes hero-card-scan
{
  0%,100%
  {
    transform:translateY(0);
    opacity:.18
  }
  50%
  {
    transform:translateY(136px);
    opacity:.65
  }
}
@keyframes hero-node-pulse
{
  0%,100%
  {
    box-shadow:0 0 8px #7de2de44
  }
  50%
  {
    box-shadow:0 0 22px #7de2decc
  }
}
@keyframes hero-node-ring
{
  0%
  {
    transform:scale(.5);
    opacity:.8
  }
  100%
  {
    transform:scale(2.8);
    opacity:0
  }
}
@keyframes portrait-glitch
{
  0%,80%,100%
  {
    transform:translateX(0);
    filter:saturate(.78) contrast(1.04);
    clip-path:inset(0);
  }
  83%
  {
    transform:translateX(-4px) skewX(-2deg);
    filter:saturate(2.1) contrast(1.3) hue-rotate(150deg);
    clip-path:inset(18% 0 57% 0);
  }
  86%
  {
    transform:translateX(4px) skewX(2deg);
    filter:saturate(1.8) contrast(1.4) hue-rotate(175deg);
    clip-path:inset(62% 0 15% 0);
  }
  89%
  {
    transform:translateX(-2px);
    filter:saturate(.78) contrast(1.04);
    clip-path:inset(0);
  }
}
@keyframes portrait-blue-glitch
{
  0%,80%,100%
  {
    opacity:0;
    transform:translateX(0);
  }
  83%
  {
    opacity:.86;
    transform:translateX(-5px);
  }
  86%
  {
    opacity:.72;
    transform:translateX(4px);
  }
  89%
  {
    opacity:0;
    transform:translateX(0);
  }
}
@keyframes portrait-scan
{
  0%
  {
    transform:translateY(0);
    opacity:.1;
  }
  48%
  {
    transform:translateY(136px);
    opacity:.8;
  }
  52%,100%
  {
    transform:translateY(136px);
    opacity:.1;
  }
}
@keyframes card-lines-drift
{
  0%
  {
    background-position:0 0,100% 100%;
  }
  50%
  {
    background-position:24% 18%,76% 82%;
  }
  100%
  {
    background-position:0 0,100% 100%;
  }
}
@media(max-width:760px)
{
  .console-stage::before
  {
    inset:14% 10%;
  }
  .console-profile-photo::before
  {
    animation-name:portrait-scan-mobile;
  }
}
@keyframes portrait-scan-mobile
{
  0%
  {
    transform:translateY(0);
    opacity:.1
  }
  48%
  {
    transform:translateY(114px);
    opacity:.8
  }
  52%,100%
  {
    transform:translateY(114px);
    opacity:.1
  }
}

/* Project catalogue refinements: readable cards, full-bleed previews and tactile tags. */
.projects-rebuild .projects-new-intro h1
{
  max-width:760px;
  font-size:clamp(58px,6.3vw,108px);
  line-height:.98;
  letter-spacing:-.075em;
  overflow-wrap:normal;
  text-wrap:balance;
}
.projects-rebuild .projects-new-intro p
{
  align-self:end;
  padding-bottom:8px;
  line-height:1.7;
}
.projects-rebuild .project-control-panel
{
  margin-top:24px;
  padding:22px 0;
}
.projects-rebuild .project-status-summary strong
{
  color:var(--ink);
}
.projects-rebuild .project-status-summary strong span
{
  color:var(--blue);
}
.projects-rebuild .project-filter
{
  position:relative;
  overflow:hidden;
  border-color:var(--line-hot);
  transition:color var(--fast),background var(--fast),border-color var(--fast),box-shadow var(--fast),transform var(--fast);
}
.projects-rebuild .project-filter::before
{
  position:absolute;
  top:0;
  left:-120%;
  width:80%;
  height:100%;
  background:linear-gradient(90deg,transparent,#78a9ff36,transparent);
  content:"";
  transform:skewX(-18deg);
  transition:left 500ms var(--ease);
}
.projects-rebuild .project-filter:hover::before,.projects-rebuild .project-filter.is-active::before
{
  left:130%;
}
.projects-rebuild .project-filter:hover,.projects-rebuild .project-filter.is-active
{
  box-shadow:0 0 22px #78a9ff18;
  transform:translateY(-2px);
}
.projects-rebuild .projects-new-list
{
  gap:26px;
  padding-top:26px;
}
.projects-rebuild .project-new-card
{
  position:relative;
  isolation:isolate;
  min-width:0;
  border-color:#263444;
  box-shadow:0 12px 34px #0000001c;
}
.projects-rebuild .project-new-card::before
{
  position:absolute;
  top:0;
  left:12%;
  width:76%;
  height:1px;
  z-index:3;
  background:linear-gradient(90deg,transparent,var(--blue),transparent);
  content:"";
  opacity:.42;
  transition:opacity var(--fast),transform var(--fast);
  pointer-events:none;
}
.projects-rebuild .project-new-card:hover
{
  border-color:#78a9ff8c;
  box-shadow:0 22px 62px #00000042,0 0 34px #78a9ff14;
}
.projects-rebuild .project-new-card:hover::before
{
  opacity:1;
  transform:scaleX(1.08);
}
.projects-rebuild .project-new-copy
{
  min-width:0;
  padding:clamp(28px,3.4vw,54px);
}
.projects-rebuild .project-new-copy h2
{
  max-width:100%;
  font-size:clamp(30px,3.2vw,54px);
  line-height:.98;
  overflow-wrap:anywhere;
  text-wrap:balance;
}
.projects-rebuild .project-new-copy p
{
  max-width:480px;
  line-height:1.72;
}
.projects-rebuild .tags
{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:22px;
}
.projects-rebuild .tags span
{
  position:relative;
  padding:7px 10px 7px 18px;
  border:1px solid #314052;
  border-radius:4px;
  background:#0c131b;
  color:var(--muted);
  font:500 10px "DM Mono",monospace;
  transition:color var(--fast),border-color var(--fast),background var(--fast),box-shadow var(--fast);
}
.projects-rebuild .tags span::before
{
  position:absolute;
  top:50%;
  left:8px;
  width:4px;
  height:4px;
  border:1px solid var(--blue);
  content:"";
  transform:translateY(-50%) rotate(45deg);
}
.projects-rebuild .project-new-card:hover .tags span
{
  border-color:#405979;
  background:#101c28;
  color:var(--ink);
  box-shadow:0 0 14px #78a9ff0d;
}
.projects-rebuild .project-new-media
{
  min-height:0;
  height:100%;
  background:#080e15;
}
.projects-rebuild .project-new-media img
{
  display:block;
  width:100%;
  height:100%;
  min-height:100%;
  padding:0 !important;
  object-fit:contain;
  object-position:center;
  opacity:.84;
  background:#080e15;
}
.projects-rebuild .project-new-media::after
{
  background:linear-gradient(180deg,transparent 55%,#05080db8),linear-gradient(90deg,#78a9ff0a,transparent 28%,transparent 72%,#7de2de08);
}
.projects-rebuild .project-new-media:hover img
{
  transform:scale(1.045);
}
.projects-rebuild .media-label
{
  padding:6px 8px;
  border:1px solid #ffffff1c;
  background:#05080dcc;
  font-size:9px;
  letter-spacing:.08em;
}
.projects-rebuild .project-placeholder
{
  min-height:330px;
  border-style:dashed;
}
.projects-rebuild .project-placeholder::after
{
  position:absolute;
  inset:18px;
  z-index:-1;
  border:1px solid #78a9ff12;
  content:"";
  pointer-events:none;
}
@media(max-width:900px)
{
  .projects-rebuild .project-new-card,.projects-rebuild .project-new-card:nth-child(even),.projects-rebuild .project-new-featured
  {
    display:flex;
    flex-direction:column;
  }
  .projects-rebuild .project-new-media
  {
    min-height:0;
    height:auto;
    aspect-ratio:16/9;
    order:initial;
  }
  .projects-rebuild .project-new-copy
  {
    order:initial;
  }
}
@media(max-width:760px)
{
  .projects-rebuild
  {
    padding-top:72px;
  }
  .projects-rebuild .projects-new-intro
  {
    gap:34px;
    padding-bottom:48px;
  }
  .projects-rebuild .projects-new-intro h1
  {
    font-size:clamp(54px,14vw,88px);
  }
  .projects-rebuild .project-control-panel
  {
    gap:22px;
  }
  .projects-rebuild .project-filters
  {
    justify-content:flex-start;
  }
  .projects-rebuild .project-new-media
  {
    min-height:0;
    height:auto;
    aspect-ratio:16/9;
  }
  .projects-rebuild .project-new-copy
  {
    padding:28px 24px;
  }
}
/* Skills scale: five clear levels, keeping the technical language of the about page. */
.about-skills-footer
{
  display:block;
  padding:clamp(56px,8vw,120px) 0 clamp(72px,10vw,156px);
  border-top:1px solid var(--line);
}
.about-skills-heading
{
  display:grid;
  grid-template-columns:auto auto;
  align-items:start;
  justify-content:space-between;
  gap:14px;
}
.about-skills-heading h2
{
  grid-column:1 / -1;
  width:100%;
  max-width:none;
  margin:clamp(28px,4vw,52px) 0 clamp(38px,5vw,68px);
  font-size:clamp(42px,5vw,76px);
  line-height:.98;
  letter-spacing:-.065em;
}
.about-skills-heading h2 em
{
  display:block;
  color:var(--blue);
  font-style:normal;
}
.about-skill-bars
{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  column-gap:clamp(16px,2vw,30px);
  align-content:start;
  border-top:1px solid var(--line);
}
.about-skill-bar
{
  padding:12px 0 14px;
  border-bottom:1px solid var(--line);
}
.about-skill-bar-meta
{
  position:relative;
  display:block;
  padding-right:44px;
  color:var(--ink);
  font-size:clamp(11px,.82vw,14px);
  line-height:1.3;
}
.about-skill-bar-meta .mono
{
  display:none;
}
.about-skill-bar-meta
{
  padding-right:0;
}
.about-skill-bar-meta
{
  padding-right:48px;
}
.about-skill-bar-meta .mono
{
  display:block;
  position:absolute;
  top:0;
  right:0;
  color:var(--blue);
  font-size:clamp(10px,.7vw,12px);
  line-height:1.3;
  letter-spacing:.08em;
  white-space:nowrap;
}
.about-skills-scale
{
  margin:-clamp(24px,3vw,44px) 0 clamp(22px,3vw,40px);
  color:var(--muted);
  font-size:clamp(10px,.72vw,12px);
  line-height:1.45;
  letter-spacing:.08em;
  text-transform:uppercase;
  overflow-wrap:anywhere;
}
.about-skill-meter
{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:4px;
  margin-top:8px;
}
.about-skill-meter span
{
  display:block;
  height:4px;
  border:1px solid var(--line-hot);
  background:transparent;
  transition:background-color .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.about-skill-meter span.is-filled
{
  border-color:var(--blue);
  background:var(--blue);
  box-shadow:0 0 16px rgb(105 155 255 / .2);
}
.about-skill-meter span.is-partial
{
  border-color:var(--blue);
  background:linear-gradient(90deg,var(--blue) 50%,transparent 50%);
}
@media (max-width:900px)
{
  .about-skill-bars
  {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .about-skills-heading h2
  {
    margin-top:28px;
  }
}
@media (max-width:520px)
{
  .about-skills-heading
  {
    grid-template-columns:1fr;
  }
  .about-skill-bars
  {
    grid-template-columns:1fr;
  }
  .about-skill-bar-meta
  {
    font-size:13px;
  }
}

/* Subtle, one-time reveal for the existing skills section. */
.about-skills-footer.has-skill-animation .about-skills-heading h2
{
  opacity:0;
  transform:translateY(8px);
  transition:opacity .55s ease-out,transform .55s ease-out;
}
.about-skills-footer.has-skill-animation .about-skills-heading h2 em
{
  opacity:0;
  transform:translateY(6px);
  transition:opacity .55s ease-out .1s,transform .55s ease-out .1s;
}
.about-skills-footer.has-skill-animation:not(.is-visible) .about-skill-meter span.is-filled
{
  border-color:var(--line-hot);
  background:transparent;
  box-shadow:none;
}
.about-skills-footer.has-skill-animation.is-visible .about-skills-heading h2,
.about-skills-footer.has-skill-animation.is-visible .about-skills-heading h2 em
{
  opacity:1;
  transform:translateY(0);
}
.about-skills-footer.has-skill-animation .about-skill-bar-meta,
.about-skills-footer.has-skill-animation .about-skill-meter span
{
  transition:color .2s ease,filter .2s ease,background-color .7s ease-out,border-color .7s ease-out,box-shadow .7s ease-out;
}
.about-skills-footer.has-skill-animation.is-visible .about-skill-meter span.is-filled
{
  transition-delay:var(--skill-delay,0ms);
}
@media(prefers-reduced-motion:reduce)
{
  .about-skills-footer.has-skill-animation .about-skills-heading h2,
  .about-skills-footer.has-skill-animation .about-skills-heading h2 em
  {
    opacity:1;
    transform:none;
  }
  .about-skills-footer.has-skill-animation:not(.is-visible) .about-skill-meter span.is-filled
  {
    border-color:var(--blue);
    background:var(--blue);
    box-shadow:0 0 16px rgb(105 155 255 / .2);
  }
}