:root {
  --portfolio-font: Inter, Arial, sans-serif;
  --portfolio-heading-font: "Inter Tight", Inter, Arial, sans-serif;
  --portfolio-label-font: "JetBrains Mono", Consolas, monospace;
  --body-font-size: clamp(17px, 1.25vw, 18px);
  --label-font-size: clamp(12px, 1vw, 13px);
  --quote-font-size: 30px;
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
  --cyber-bg: #0b0b0e;
  --cyber-panel: #161619;
  --cyber-text: #f4f4f5;
  --cyber-muted: #a1a1aa;
  --cyber-accent: #62f5b5;
  --cyber-cyan: #38cddd;
  --cyber-line: #2c2c32;
  --opening-background: var(--cyber-bg);
  --opening-foreground: var(--cyber-accent);
  --quote-active: var(--cyber-text);
  --quote-inactive: #71717a;
}

html {
  scroll-behavior: smooth;
  color-scheme: dark;
  scrollbar-width: thin;
  scrollbar-color: #52525b var(--cyber-bg);
}
html::-webkit-scrollbar { width: 10px; height: 10px; }
html::-webkit-scrollbar-track { background: var(--cyber-bg); }
html::-webkit-scrollbar-thumb { background: #52525b; border: 2px solid var(--cyber-bg); border-radius: 10px; }
html::-webkit-scrollbar-thumb:hover { background: #71717a; }
body { margin: 0; background: var(--cyber-bg); font: 400 var(--body-font-size)/1.6 var(--portfolio-font); }

/* Shared type roles override the imported templates and their inline presets. */
body .framer-text { font-family: inherit !important; }
body :is(p, li, blockquote) {
  font-family: var(--portfolio-font) !important;
  font-size: var(--body-font-size) !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  letter-spacing: -.01em !important;
}
body :is(h1, h2, h3, h4, h5, h6), body :is(h1, h2, h3, h4, h5, h6).framer-text {
  font-family: var(--portfolio-heading-font) !important;
  font-weight: 700 !important;
  line-height: 1.08 !important;
  letter-spacing: 0 !important;
}
body [data-framer-name="Hero Section"] h1 {
  font-weight: 800 !important;
  line-height: .98 !important;
  letter-spacing: .005em !important;
  text-transform: uppercase;
}
body :is(.about-year, .hero-copyright, .portfolio-nav-link),
body [data-framer-name="Title & Date"] p,
body [data-framer-name="Title & Description"] p.framer-styles-preset-18hoqs7,
body [data-framer-name="Project Details"] p.framer-styles-preset-18hoqs7,
body [data-framer-name="Date & Read Time"] p,
body [data-framer-name="Hero Section"] [data-framer-name="Text"] p,
body [data-framer-name="Categories"] p,
body [data-framer-name="Quick Links"] p,
body [data-framer-name="Button Wrap"] p,
body [data-framer-name="White"] p,
body footer :is(h5, h6).framer-text,
body form label, body form label :is(p, span),
body form button[type="submit"], body form button[type="submit"] :is(p, span) {
  font-family: var(--portfolio-label-font) !important;
  font-size: var(--label-font-size) !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase;
}
body footer [data-brand-wordmark] p {
  font-family: var(--portfolio-heading-font) !important;
  font-size: var(--framer-font-size) !important;
  font-weight: 800 !important;
  line-height: .9 !important;
  letter-spacing: .015em !important;
}
.opening-dots { position: fixed; inset: 0; z-index: 2000; background: var(--opening-background); overflow: hidden; }
.opening-dots[hidden] { display: none; }
.opening-dots[data-renderer="canvas"] { background: transparent; }
.opening-dots-canvas { display: block; width: 100%; height: 100%; }
html.opening-dots-active { overflow: hidden; scrollbar-gutter: stable; }
html.opening-dots-active body { touch-action: none; }
.security-network {
  --network-color: #7297c4; --network-intensity: .82;
  position: absolute; top: 0; left: 0; right: 0; z-index: 0;
  width: 100%; height: 100vh; height: 100svh;
  pointer-events: none; overflow: hidden; contain: strict;
  background: radial-gradient(ellipse at 12% 24%, rgb(70 100 150 / 8%), transparent 45%),
    radial-gradient(ellipse at 90% 48%, rgb(83 126 155 / 6%), transparent 42%);
  mask-image: linear-gradient(to bottom, #000 65%, transparent 100%);
}
.security-network[hidden] { display: none; }
.security-network::before {
  content: ''; position: absolute; inset: 0;
  background-image: linear-gradient(rgb(140 158 183 / 5%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(140 158 183 / 5%) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at 50% 30%, #000, transparent 75%);
}
.security-network-canvas, .security-network-fallback {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%;
  mask-image: radial-gradient(ellipse 38% 20% at 50% 52%, rgb(0 0 0 / 60%) 20%, #000 100%);
}
.security-network-fallback { color: var(--network-color); opacity: calc(var(--network-intensity) * .42); }
.security-network[data-renderer="canvas"] .security-network-fallback { display: none; }
* { box-sizing: border-box; }
a:focus-visible, button:focus-visible, [role="button"]:focus-visible { outline: 2px solid var(--cyber-accent); outline-offset: 5px; }
.draggable-decoration:focus-visible { outline: 2px solid var(--cyber-accent); outline-offset: 5px; border-radius: 12px; }
.draggable-decoration { cursor: grab !important; touch-action: none; user-select: none; }
.draggable-decoration.is-dragging { cursor: grabbing !important; }
.draggable-decoration :is(img, svg) { pointer-events: none; }
.hero-security-glyph {
  width: clamp(64px, 8vw, 112px) !important;
  height: clamp(64px, 8vw, 112px) !important;
}
.hero-security-glyph svg { display: block; width: 100%; height: 100%; overflow: visible; }
section[id] { scroll-margin-top: 110px; }

/* Floating glass header; navigation stays visible at every screen size. */
.portfolio-nav {
  position: fixed; z-index: 1000; top: 24px; left: 50%;
  transform: translateX(-50%); width: min(680px, calc(100% - 40px));
  border: 0; border-radius: 20px;
  background: rgb(12 14 18 / 58%);
  box-shadow: 0 12px 40px rgb(0 0 0 / 28%),
    inset 0 1px 0 rgb(255 255 255 / 6%),
    inset 0 -1px 0 rgb(255 255 255 / 2%);
  -webkit-backdrop-filter: blur(48px) saturate(110%);
  backdrop-filter: blur(48px) saturate(110%);
  animation: nav-enter .65s var(--motion-ease) both;
}
.portfolio-nav-bar {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 56px; padding: 6px 14px; gap: 20px;
}
.portfolio-nav-links { display: flex; align-items: center; gap: 2px; }
.portfolio-nav-link {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 8px 12px; border: 1px solid transparent;
  border-radius: 10px; color: #c4c4cc; text-decoration: none;
  font: 400 12px/1.5 var(--portfolio-label-font); letter-spacing: .1em;
  text-transform: uppercase;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.portfolio-nav-link:hover, .portfolio-nav-link[aria-current] {
  color: var(--cyber-text); background: rgb(255 255 255 / 8%);
}
.portfolio-nav-contact, .portfolio-nav-contact[aria-current] {
  color: var(--cyber-bg); background: linear-gradient(135deg, #fff, #e4e4e7);
  box-shadow: 0 2px 8px rgb(0 0 0 / 12%), inset 0 1px 0 rgb(255 255 255 / 80%);
}
.portfolio-nav-contact:hover { color: var(--cyber-bg); background: #fff; }
.portfolio-logo {
  display: inline-flex; align-items: center; flex-shrink: 0;
  padding-right: 18px; border-right: 1px solid rgb(255 255 255 / 10%);
  font: 700 20px/1.2 var(--portfolio-heading-font); letter-spacing: -.7px;
  color: var(--cyber-text); text-decoration: none;
  transition: color .2s ease;
}
.portfolio-logo:hover { color: #fff; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .portfolio-nav { background: #161619f5; }
}
.rolling-label { display: inline-flex; overflow: hidden; line-height: 1.2; vertical-align: middle; }
.rolling-label > span { display: inline-block; white-space: pre; text-shadow: 0 1.2em currentColor; transition: transform .4s var(--motion-ease); transition-delay: calc(var(--letter-index) * 12ms); }
a:hover .rolling-label > span, a:focus-visible .rolling-label > span { transform: translateY(-100%); }
@keyframes nav-enter { from { opacity: 0; transform: translate(-50%, -12px); } to { opacity: 1; transform: translate(-50%, 0); } }
[class$="-container"]:has(> .portfolio-nav) { position: static !important; will-change: auto !important; transform: none !important; }

/* Keep sticky positioning; animate the two portrait faces. */
[data-framer-name="Avatar Wrap"] { transform: none !important; }
[data-framer-name="Avatar - Front"], [data-framer-name="Avatar - Back"] { backface-visibility: hidden; transform-origin: center; will-change: transform; }
[data-framer-name="Avatar - Front"] { filter: grayscale(1); }
[data-framer-name="Hero Section"] [data-framer-name="Text"] { justify-content: flex-end !important; }
.hero-copyright { position: absolute; bottom: 20px; left: max(30px, calc((100% - 1180px)/2)); }

/* Quote, body, metadata, and headings keep separate type sizes. */
[data-framer-name="Quote Section"] [data-code-component-plugin-id] > .ssr-variant > div {
  font-family: var(--portfolio-font) !important; font-size: var(--quote-font-size) !important;
  font-weight: 400 !important; line-height: 1.6 !important; z-index: auto !important;
}
[data-framer-name="Quote Section"] span { transition: color .2s linear !important; }
input, textarea, button { font-family: var(--portfolio-font); }
form input:not([type="hidden"]), form textarea {
  font-family: var(--portfolio-font) !important; font-size: var(--body-font-size) !important;
  font-weight: 400 !important; line-height: 1.6 !important;
}
form button[type="submit"] { min-height: 44px; }
.form-feedback { font: 400 var(--body-font-size)/1.6 var(--portfolio-font); margin: 12px 0; color: var(--cyber-text); }
.portfolio-form-busy { opacity: .6; pointer-events: none; }

/* Service titles and descriptions share a row on wider screens. */
@media (min-width: 810px) {
  [data-framer-name="Services Cards"] .framer-4gO8g {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
    align-items: center !important;
    gap: 32px !important;
    min-height: 136px;
    padding: 24px 0 !important;
  }
  [data-framer-name="Services Cards"] .framer-4gO8g > [data-framer-component-type="RichTextContainer"] {
    width: 100% !important; white-space: normal !important;
  }
  [data-framer-name="Services Cards"] [data-framer-name="Categories"] {
    width: 100% !important; justify-content: flex-end !important;
    flex-wrap: wrap !important; align-items: center;
  }
}

/* Restore centering offsets and the reference's sliding social icons. */
[data-framer-name="Social Media Icons"] a { position: relative; overflow: hidden; }
[data-framer-name="Social Media Icons"] a svg {
  position: absolute !important; width: 20px !important; height: 20px !important;
  left: 50% !important; top: 50% !important; bottom: auto !important;
  transform: translate(-50%, -50%) !important; transition: top .4s var(--motion-ease) !important;
}
[data-framer-name="Social Media Icons"] a svg:nth-of-type(2) { top: 150% !important; }
[data-framer-name="Social Media Icons"] a:hover svg:first-of-type,
[data-framer-name="Social Media Icons"] a:focus-visible svg:first-of-type { top: -50% !important; }
[data-framer-name="Social Media Icons"] a:hover svg:nth-of-type(2),
[data-framer-name="Social Media Icons"] a:focus-visible svg:nth-of-type(2) { top: 50% !important; }

/* Every arrow button uses the diagonal slide and growing circular fill. */
[data-framer-name="Arrow Button"] { position: relative; overflow: hidden; }
[data-framer-name="Arrow Button"] svg {
  position: absolute !important; width: 20px !important; height: 20px !important;
  left: 50% !important; top: 50% !important; bottom: auto !important; right: auto !important;
  transform: translate(-50%, -50%) rotate(-45deg) !important;
  transition: left .5s var(--motion-ease), top .5s var(--motion-ease) !important;
}
[data-framer-name="Arrow Button"] svg:nth-of-type(2) {
  left: calc(50% - 21px) !important; top: calc(50% + 21px) !important;
}
[data-framer-name="Arrow Button"] > [data-framer-name="BG"] {
  width: 1px !important; height: 1px !important;
  left: -4px !important; bottom: -4px !important;
  transition: width .5s var(--motion-ease), height .5s var(--motion-ease) !important;
}
a:is(:hover, :focus-visible) [data-framer-name="Arrow Button"] svg:first-of-type {
  left: calc(50% + 21px) !important; top: calc(50% - 21px) !important;
}
a:is(:hover, :focus-visible) [data-framer-name="Arrow Button"] svg:nth-of-type(2) {
  left: 50% !important; top: 50% !important;
}
a:is(:hover, :focus-visible) [data-framer-name="Arrow Button"] > [data-framer-name="BG"] {
  width: calc(100% + 8px) !important; height: calc(100% + 8px) !important;
}
[data-framer-name="Logo"] img { object-fit: contain !important; object-position: center !important; }
[data-framer-name="Image Wrap"] img { transition: transform .45s ease; }
[data-framer-name="Project Card"]:hover img { transform: scale(1.025); }
footer a { color: inherit; text-decoration: none; }
footer { isolation: isolate; overflow: hidden; }
footer > [data-framer-name="Container"] { z-index: 2; }
.footer-hands {
  --hands-color: #62f5b5; --hands-opacity: .65; --hands-offset: 105%; --hand-cell: 7px;
  position: absolute; top: 0; left: 0; width: 100%; height: 360px;
  z-index: 0; pointer-events: none; user-select: none; overflow: hidden;
  opacity: var(--hands-enter-opacity, 0);
  mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 86%, transparent);
}
.footer-hands[hidden] { display: none; }
.footer-hand { position: absolute; top: 0; width: 50%; height: 100%; }
.footer-hand-left { left: 0; transform: translateX(calc(-1 * var(--hands-offset))); }
.footer-hand-right { right: 0; transform: translateX(var(--hands-offset)); }
.footer-hand pre {
  position: absolute; margin: 0; padding: 0; top: 8%;
  font-family: "Courier New", monospace;
  font-size: calc(var(--hand-cell) * .92); line-height: var(--hand-cell);
  letter-spacing: calc(var(--hand-cell) * .448); white-space: pre;
  color: var(--hands-color); opacity: var(--hands-opacity);
}
.footer-hand-left pre { left: 0; }
.footer-hand-right pre { right: 0; top: 22%; }
footer svg[data-framer-component-type="RichTextContainer"] { transform: translateX(-50%) !important; }
footer svg[data-brand-wordmark] {
  bottom: 0 !important;
  transform: translate(-50%, 18%) !important;
}
footer [data-brand-wordmark] foreignObject { white-space: normal; }
footer [data-brand-wordmark] p { white-space: nowrap; }

/* Neutral typography and surfaces; reserve color for artwork and primary actions. */
body {
  --token-2fcd1089-c4fe-44ec-8e47-1defe3c9bd50: var(--cyber-bg);
  --token-e44374f3-0aa3-4326-a0ec-25df52a31057: var(--cyber-text);
  --token-fd5eaaad-cf25-4e7f-b54f-37a28b7e1282: var(--cyber-muted);
  --token-050a7e9f-40b2-4d5e-8e58-10c5e629e538: var(--cyber-line);
  --token-0a96c60c-bbe1-4670-802b-91a65926c56a: #f4f4f5e6;
  --token-57f08e2a-01d8-4ce0-89a5-f6d5488003ee: #f4f4f51a;
  --token-04b522f2-919f-4662-ae43-fea5b29501b9: var(--cyber-muted);
  --token-b5ff5227-81f4-4c80-8c80-3dd60a8e9a45: var(--cyber-line);
  --token-f6bceadb-c212-4389-b1bb-e11537885a02: var(--cyber-accent);
  color: var(--cyber-text);
}
html body { background: var(--cyber-bg); }
::selection { background: #d4d4d8; color: var(--cyber-bg); }

/* Disable the shared grain overlay on every page. */
.framer-zpn31 .framer-bcxrl8-container {
  display: none;
}
.hero-copyright { color: var(--cyber-muted); }
[data-framer-name="Hero Section"] h1 {
  --framer-font-size: clamp(24px, 7.2vw, 100px) !important;
  word-break: normal;
  overflow-wrap: normal;
  text-wrap: balance;
  text-shadow: none;
}
[data-framer-name="Dot"] {
  background: var(--cyber-accent) !important;
  box-shadow: 0 0 12px #62f5b54d;
}

/* Original inverse panels keep light text on charcoal surfaces. */
footer, form, .framer-1dt4txd, .framer-1q32mfl, .framer-6Ku2B {
  --token-2fcd1089-c4fe-44ec-8e47-1defe3c9bd50: var(--cyber-text);
}
footer {
  background: #101013 !important;
  border-top: 1px solid var(--cyber-line);
}
.framer-C6ykL .framer-1dt4txd, .framer-YRpro .framer-1q32mfl,
.framer-C6ykL .framer-1rwmlp9 {
  background: var(--cyber-panel);
  box-shadow: inset 0 0 0 1px var(--cyber-line);
}
.framer-1dt4txd { background: var(--cyber-panel) !important; }
.about-page { color: var(--cyber-text); }
.about-year, .about-organization { color: var(--cyber-muted); }
.about-entry, .about-entry:last-child { border-color: var(--cyber-line); }

/* Action accents remain legible through the existing slide/fill animation. */
[data-framer-name="Arrow Button"] {
  background: var(--cyber-accent) !important;
  --border-color: var(--cyber-accent) !important;
  --token-e44374f3-0aa3-4326-a0ec-25df52a31057: var(--cyber-bg);
  --token-2fcd1089-c4fe-44ec-8e47-1defe3c9bd50: var(--cyber-bg);
}
[data-framer-name="Arrow Button"] > [data-framer-name="BG"] {
  background: var(--cyber-cyan) !important;
}
[data-framer-name="Social Media Icons"] a {
  background: var(--cyber-panel) !important;
  box-shadow: inset 0 0 0 1px var(--cyber-line);
  --token-e44374f3-0aa3-4326-a0ec-25df52a31057: var(--cyber-text);
}
[data-framer-name="Social Media Icons"] a:hover { background: #27272d !important; }
form .framer-form-input-wrapper {
  --framer-input-background: #111114;
  --framer-input-font-color: var(--cyber-text);
  --framer-input-placeholder-color: var(--cyber-muted);
  --framer-input-border-color: var(--cyber-line);
  --framer-input-focused-border-color: var(--cyber-accent);
}
form button[type="submit"] {
  background: var(--cyber-accent) !important;
  color: var(--cyber-bg);
}
form button[type="submit"] :is(p, span) { color: var(--cyber-bg) !important; }
form button[type="submit"]:hover { background: #a4ffd5 !important; }
footer a:hover { color: #fff; }
footer [data-framer-name="Quick Links"] a {
  background: #1c1c21 !important;
  box-shadow: inset 0 0 0 1px var(--cyber-line);
}
footer [data-framer-name="Quick Links"] a:hover {
  background: #27272d !important;
}

@media (max-width: 1279px) {
  .framer-C6ykL .hero-security-glyph[data-security-glyph="terminal"] { right: 0; }
  .framer-C6ykL .hero-security-glyph[data-security-glyph="network"] { left: 0; top: -76px; }
}
@media (max-width: 809px) {
  .footer-hand-left pre { top: auto; bottom: 8%; }
  .footer-hand-right pre { top: auto; bottom: 0; }
  .portfolio-nav-bar { gap: 12px; padding: 6px 12px; }
  .portfolio-nav-links { gap: 2px; }
  .portfolio-nav-link { padding: 10px 12px; }
  .portfolio-logo { padding-right: 14px; }
  [data-framer-name="Hero Section"] [data-framer-name="Text"] { justify-content: center !important; }
  .hero-copyright { display: none; }
}
@media (max-width: 639px) {
  .portfolio-nav { top: 16px; }
  .portfolio-nav-bar { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 10px 10px 6px; }
  .portfolio-logo { grid-row: 1; justify-self: start; padding: 0 4px; border: 0; }
  .portfolio-nav-links {
    grid-row: 2; justify-content: space-between; gap: 0;
    padding-top: 6px; border-top: 1px solid rgb(255 255 255 / 8%);
  }
  .portfolio-nav-link { padding: 10px 8px; }
  section[id] { scroll-margin-top: 144px; }
}
@media (max-width: 379px) {
  .portfolio-nav { width: calc(100% - 24px); }
  .portfolio-nav-link { padding-inline: 1px; }
  body .portfolio-nav-link { letter-spacing: .08em !important; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  [data-framer-name="Arrow Button"] svg,
  [data-framer-name="Arrow Button"] > [data-framer-name="BG"],
  [data-framer-name="Social Media Icons"] a svg { transition: none !important; }
  .rolling-label > span { transform: none !important; text-shadow: none; }
}