/* ============================================
   Tokens
   ============================================ */
:root {
  --navy: #0A2540;
  --navy-ink: #12233B;
  --teal: #33CFEA;
  --teal-deep: #22E5FF;
  --teal-tint: rgba(34, 229, 255, 0.12);
  --paper: #08090D;
  --paper-raised: #12141B;
  --line: #223038;
  --ink: #E4F6F8;
  --ink-soft: #7C99A1;
  --heading: #2EE6FF;
  --header-bg: rgba(8, 9, 13, 0.88);
  --accent-magenta: #FF2EC4;
  --accent-purple: #6B5FA8;

  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'VT323', 'IBM Plex Mono', 'Courier New', monospace;

  --wrap: 1120px;
  --radius: 3px;
  --action-btn-size: 5rem; /* 80px — Carbon's largest button size (2XL), used for the header CTA and hero action buttons */

  /* Carbon Design System spacing scale (github.com/carbon-design-system) */
  --cds-spacing-01: 0.125rem; /* 2px */
  --cds-spacing-02: 0.25rem;  /* 4px */
  --cds-spacing-03: 0.5rem;   /* 8px */
  --cds-spacing-04: 0.75rem;  /* 12px */
  --cds-spacing-05: 1rem;     /* 16px */
  --cds-spacing-06: 1.5rem;   /* 24px */
  --cds-spacing-07: 2rem;     /* 32px */
  --cds-spacing-08: 2.5rem;   /* 40px */
  --cds-spacing-09: 3rem;     /* 48px */
  --cds-spacing-10: 4rem;     /* 64px */
  --cds-spacing-11: 5rem;     /* 80px */
  --cds-spacing-12: 6rem;     /* 96px */
  --cds-spacing-13: 10rem;    /* 160px */

  /* Carbon type scale, mapped onto this site's existing font families */
  --cds-caption-01: 1.125rem;
  --cds-body-compact-01: 1.1875rem;
  --cds-body-01: 1.1875rem;
  --cds-body-02: 1.125rem;
  --cds-heading-03: 1.25rem;

  /* Carbon motion */
  --cds-duration-fast-02: 110ms;
  --cds-easing-standard: cubic-bezier(0.2, 0, 0.38, 0.9);

  /* Carbon breakpoints: sm 320 / md 672 / lg 1056 / xlg 1312 / max 1584 */
}

/* This site has one theme only — the dark/terminal palette above (see the
   effects block near the end of this file for glow/scanline/glitch rules).
   There is no light mode and no prefers-color-scheme switch. */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

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

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  color-scheme: dark;
}

h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--heading);
  margin: 0 0 0.4em;
  font-weight: 500;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.2rem, 4.2vw, 3.6rem); line-height: 1.08; font-weight: 400; }
h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
h3 { font-size: var(--cds-heading-03); }

p { margin: 0 0 1em; color: var(--ink-soft); }

a { color: var(--teal-deep); }

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--cds-spacing-06);
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--navy);
  color: #fff;
  padding: 10px 16px;
  z-index: 100;
}
.skip-link:focus {
  left: 16px;
  top: 16px;
}

:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}

/* ============================================
   Header
   ============================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--header-bg);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: stretch;
}

.header-inner {
  display: flex;
  flex: 1;
  min-width: 0;
  position: relative; /* anchors the oversized .brand circle below */
}

.header-content {
  display: flex;
  align-items: center;
  gap: var(--cds-spacing-06);
  flex: 1;
  min-width: 0;
  padding-top: var(--cds-spacing-05);
  padding-bottom: var(--cds-spacing-05);
}

.brand-spacer {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}

/* Sized bigger than the header itself and positioned so exactly half of it
   bleeds down past the header's bottom edge into the section below —
   deliberate, not a layout bug. .brand-spacer above holds its old 44px
   footprint in the flex flow so the nav doesn't shift. */
.brand {
  position: absolute;
  left: 0;
  top: 20px;
  width: 120px;
  height: 120px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 2rem;
  color: #fff;
  text-decoration: none;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  z-index: 25;
  background-image: linear-gradient(rgba(10, 37, 64, 0.4), rgba(10, 37, 64, 0.4)), url('images/favicon.png');
  background-size: cover;
  background-position: center;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
  border: 3px solid var(--teal-deep);
  box-shadow: 0 0 24px rgba(34, 229, 255, 0.4);
}

.site-nav {
  display: flex;
  gap: var(--cds-spacing-06);
  flex: 1;
  justify-content: center;
}

.site-nav a {
  text-decoration: none;
  color: var(--ink);
  font-size: var(--cds-body-compact-01);
  font-weight: 500;
  position: relative;
  padding-bottom: var(--cds-spacing-01);
  transition: color var(--cds-duration-fast-02) var(--cds-easing-standard);
}

.site-nav a:hover {
  color: var(--teal-deep);
}

/* ============================================
   Buttons
   ============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--cds-spacing-04) var(--cds-spacing-06);
  border-radius: var(--radius);
  font-weight: 600;
  font-size: var(--cds-body-compact-01);
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--cds-duration-fast-02) var(--cds-easing-standard),
              color var(--cds-duration-fast-02) var(--cds-easing-standard),
              border-color var(--cds-duration-fast-02) var(--cds-easing-standard);
}

.btn-primary {
  background: linear-gradient(135deg, var(--teal-deep) 0%, var(--accent-magenta) 100%);
  color: #08090D;
  box-shadow: 0 0 24px rgba(34, 229, 255, 0.35);
}
.btn-secondary {
  background: linear-gradient(135deg, var(--teal-deep) 0%, var(--navy) 100%);
  color: #08090D;
  box-shadow: 0 0 20px rgba(34, 229, 255, 0.3);
}
.btn-primary:hover,
.btn-secondary:hover,
.hero-actions .btn:hover,
.contact-links .btn:hover {
  background: var(--accent-purple);
  color: var(--ink);
  box-shadow: 0 0 24px rgba(139, 111, 168, 0.45);
}

/* Touching button pairs share ONE continuous gradient/glow on the parent
   instead of each button rendering its own 0%-100% gradient — two
   independent gradients meeting at the seam created a visible seam line
   right at the boundary. The individual button backgrounds are cleared
   here so the parent's gradient shows through both. */
.hero-actions,
.contact-links {
  background: linear-gradient(135deg, var(--teal-deep) 0%, var(--accent-magenta) 100%);
  box-shadow: 0 0 24px rgba(34, 229, 255, 0.3);
}
.hero-actions .btn,
.contact-links .btn {
  background: none;
  box-shadow: none;
}

/* Large, flat, edge-to-edge action buttons (header CTA + hero actions):
   sized to a shared height so they read as one continuous target,
   favoring a bigger Fitt's-law hit area over a compact pill shape. */
.btn-header,
.btn-large {
  height: var(--action-btn-size);
  padding: 0 var(--cds-spacing-07);
  border-radius: 0;
  flex-shrink: 0;
}

/* ============================================
   Hero
   ============================================ */
.hero {
  padding: var(--cds-spacing-12) 0 var(--cds-spacing-10);
}

.hero-inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--cds-spacing-09);
  align-items: center;
}

.eyebrow {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--cds-caption-01);
  color: var(--teal-deep);
  margin-bottom: var(--cds-spacing-04);
}

.hero-sub {
  font-size: var(--cds-body-02);
  max-width: 46ch;
}

.hero-actions {
  display: flex;
  gap: 0;
  width: fit-content;
  margin: var(--cds-spacing-06) 0 var(--cds-spacing-05);
  flex-wrap: wrap;
}

.hero-meta {
  font-family: var(--font-mono);
  font-size: var(--cds-caption-01);
  color: var(--ink-soft);
}

.hero-signal { display: flex; justify-content: center; }

.hero-photos {
  position: relative;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 1 / 1.05;
}

.hero-photo-main {
  position: absolute;
  top: 0;
  right: 0;
  width: 78%;
  height: 88%;
  object-fit: cover;
  border-radius: var(--radius);
  opacity: 0;
  animation: photo-in 0.5s ease-out 0.1s forwards;
}

.hero-photo-accent {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 52%;
  height: 42%;
  object-fit: cover;
  border-radius: var(--radius);
  z-index: 2;
  opacity: 0;
  animation: photo-in 0.5s ease-out 0.4s forwards;
}

@keyframes photo-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ============================================
   Section rhythm
   ============================================ */
.section {
  padding: var(--cds-spacing-10) 0;
  border-top: 1px solid var(--line);
}

.experience {
  background: var(--paper-raised);
}

.section-sub {
  color: var(--ink-soft);
  margin-top: -6px;
}

/* ============================================
   About
   ============================================ */
.about-inner {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--cds-spacing-09);
  align-items: start;
}

.about-portrait {
  width: 100%;
  aspect-ratio: 4 / 5;
  background: linear-gradient(160deg, var(--navy) 0%, var(--teal-deep) 100%);
  border-radius: var(--radius);
  overflow: hidden;
}

.about-portrait-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius);
  display: block;
}

.credentials {
  list-style: none;
  padding: 0;
  margin: var(--cds-spacing-05) 0 0;
  display: grid;
  gap: var(--cds-spacing-03);
  font-family: var(--font-mono);
  font-size: var(--cds-body-compact-01);
  color: var(--heading);
}

.credentials li {
  padding-left: 18px;
  position: relative;
}
.credentials li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 1.5px;
  background: var(--teal);
}

/* ============================================
   Experience log
   ============================================ */
.log {
  list-style: none;
  margin: var(--cds-spacing-07) 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.log-entry {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--cds-spacing-07);
  padding: var(--cds-spacing-06) var(--cds-spacing-04);
  margin: 0 calc(-1 * var(--cds-spacing-04));
  border-bottom: 1px solid var(--line);
}
.log-entry:nth-child(even) {
  background: rgba(34, 229, 255, 0.035);
}

.log-when {
  display: flex;
  flex-direction: column;
  padding-top: var(--cds-spacing-01);
}
.log-company {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 500;
  font-size: 1.125rem;
  color: var(--teal-deep);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.log-date {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 400;
  font-size: var(--cds-caption-01);
  color: var(--ink-soft);
  letter-spacing: 0.02em;
  margin-top: 3px;
}

.log-logo {
  display: block;
  height: 32px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
  object-position: left center;
  margin-bottom: var(--cds-spacing-03);
}

.log-what h3 { margin-bottom: var(--cds-spacing-03); }
.log-what p { margin-bottom: 0; }

.log-note {
  margin-top: var(--cds-spacing-06);
  font-size: var(--cds-body-compact-01);
}

/* ============================================
   Toolkit
   ============================================ */
.toolkit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--cds-spacing-07);
  margin-top: var(--cds-spacing-06);
}

.tag-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--cds-spacing-03);
}

.tag-list li {
  background: var(--teal-tint);
  color: var(--teal-deep);
  border: 1px solid var(--teal);
  font-family: var(--font-mono);
  font-size: var(--cds-caption-01);
  padding: var(--cds-spacing-03) var(--cds-spacing-04);
  border-radius: 999px;
}

.tool-chip {
  display: flex;
  align-items: center;
  gap: var(--cds-spacing-03);
  padding: var(--cds-spacing-03) var(--cds-spacing-04) var(--cds-spacing-03) var(--cds-spacing-03);
}

.tool-logo {
  width: 20px;
  height: 20px;
  object-fit: contain;
  border-radius: 4px;
  flex-shrink: 0;
}

/* ============================================
   Work
   ============================================ */
.case-card {
  margin-top: 24px;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

a.case-card {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: border-color var(--cds-duration-fast-02) var(--cds-easing-standard);
}
a.case-card:hover { border-color: var(--teal); }

.case-card-body {
  padding: var(--cds-spacing-07);
  border-left: 3px solid var(--teal);
}

.case-card-body p:last-child { margin-bottom: 0; }

/* ============================================
   Contact
   ============================================ */
.contact {
  background: var(--navy);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.contact::before,
.contact::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
  z-index: 0;
}
.contact::before {
  top: -30%;
  right: -15%;
  width: 55%;
  height: 160%;
  background: radial-gradient(circle, rgba(255, 46, 196, 0.2) 0%, transparent 70%);
}
.contact::after {
  bottom: -30%;
  left: -10%;
  width: 45%;
  height: 120%;
  background: radial-gradient(circle, rgba(34, 229, 255, 0.16) 0%, transparent 70%);
}
.contact-inner { position: relative; z-index: 1; }
.contact h2 { color: #fff; }
.contact p { color: #C9D6E3; }

.contact-links {
  display: flex;
  gap: 0;
  width: fit-content;
  margin-top: var(--cds-spacing-05);
  flex-wrap: wrap;
}

.toolkit-grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

.link-cta {
  display: inline-block;
  margin-top: var(--cds-spacing-05);
  font-family: var(--font-mono);
  font-size: var(--cds-caption-01);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--teal-deep);
  text-decoration: none;
  border-bottom: 1px solid var(--teal);
  padding-bottom: var(--cds-spacing-01);
  transition: color var(--cds-duration-fast-02) var(--cds-easing-standard),
              border-color var(--cds-duration-fast-02) var(--cds-easing-standard);
}
.link-cta:hover { color: var(--heading); border-color: var(--heading); }

/* ============================================
   Testimonials
   ============================================ */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--cds-spacing-06);
  margin-top: var(--cds-spacing-06);
}

.testimonial-card {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--cds-spacing-06);
}

.testimonial-card blockquote {
  margin: 0 0 var(--cds-spacing-05);
  font-family: var(--font-display);
  font-size: var(--cds-body-02);
  color: var(--heading);
  line-height: 1.4;
}

.testimonial-author {
  font-family: var(--font-mono);
  font-size: var(--cds-caption-01);
  color: var(--ink-soft);
  line-height: 1.5;
  margin: 0;
}

.section-note {
  margin-top: var(--cds-spacing-05);
  font-size: var(--cds-caption-01);
  color: var(--ink-soft);
  font-style: italic;
}

/* ============================================
   Footer quote
   ============================================ */
.footer-quote-wrap {
  padding-top: var(--cds-spacing-06);
  border-top: 1px solid var(--line);
}

.footer-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--cds-body-02);
  color: var(--heading);
  margin: 0 0 var(--cds-spacing-05);
}

.contact-phone {
  font-family: var(--font-mono);
  font-size: var(--cds-body-compact-01);
  color: #C9D6E3;
  margin-top: var(--cds-spacing-04);
}
.site-footer {
  padding: var(--cds-spacing-06) 0;
  font-family: var(--font-mono);
  font-size: var(--cds-caption-01);
  color: var(--ink-soft);
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--cds-spacing-03);
}

/* ============================================
   Case studies index page
   ============================================ */
.case-index-hero {
  padding-top: var(--cds-spacing-12);
  padding-bottom: var(--cds-spacing-08);
}
.case-index-title {
  max-width: 20ch;
}
.case-index-hero .hero-sub {
  max-width: 60ch;
  margin-bottom: var(--cds-spacing-06);
}

.case-index-grid-section {
  padding-top: 0;
  border-top: none;
}

.case-index-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--cds-spacing-06);
}

.case-card-full {
  margin-top: 0;
}

.case-card-placeholder {
  border-style: dashed;
  background: transparent;
}

.case-status {
  display: inline-block;
  margin-top: var(--cds-spacing-05);
  font-family: var(--font-mono);
  font-size: var(--cds-caption-01);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: var(--cds-spacing-02) var(--cds-spacing-04);
  border-radius: 999px;
}
.case-status-progress {
  background: var(--teal-tint);
  color: var(--teal-deep);
  border: 1px solid var(--teal);
}
.case-status-soon {
  background: transparent;
  color: var(--ink-soft);
  border: 1px solid var(--line);
}

@media (max-width: 672px) {
  .case-index-grid { grid-template-columns: 1fr; }
}

/* ============================================
   Case study detail pages
   ============================================ */
.cs-hero {
  padding-top: var(--cds-spacing-11);
  padding-bottom: var(--cds-spacing-08);
}
.cs-tag {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--cds-caption-01);
  color: var(--teal-deep);
  margin-bottom: var(--cds-spacing-04);
}
.cs-title { max-width: 24ch; }
.cs-subtitle {
  font-size: var(--cds-body-02);
  color: var(--ink-soft);
  max-width: 62ch;
  margin-top: var(--cds-spacing-04);
}
.cs-back { margin-top: var(--cds-spacing-06); }

.cs-section {
  padding: var(--cds-spacing-09) 0;
  border-top: 1px solid var(--line);
}
.cs-section:first-of-type { border-top: none; padding-top: 0; }
.cs-section h2 { margin-bottom: var(--cds-spacing-05); }
.cs-section h3 {
  color: var(--heading);
  margin-top: var(--cds-spacing-06);
  margin-bottom: var(--cds-spacing-03);
}
.cs-section p,
.cs-section li { max-width: 70ch; }

.cs-act-header {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-magenta);
  font-size: var(--cds-body-compact-01);
  margin: 0 0 var(--cds-spacing-02);
}

.cs-process-list {
  margin: var(--cds-spacing-04) 0;
  padding-left: 1.2em;
  display: grid;
  gap: var(--cds-spacing-03);
  max-width: 70ch;
}

.cs-figure { margin: var(--cds-spacing-07) 0; text-align: center; }
.cs-figure-frame {
  position: relative;
  display: inline-block;
  max-width: 100%;
}
.cs-figure-frame img {
  max-height: 650px;
  width: auto;
  max-width: 100%;
  margin: 0;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  display: block;
  filter: blur(3px) saturate(0.6) brightness(0.75);
}
.cs-figure-hero .cs-figure-frame img { max-height: 900px; }
.cs-figure-small .cs-figure-frame img { max-height: 180px; }
.cs-figure-small .cs-figure-frame::before {
  font-size: 0.625rem;
  padding: var(--cds-spacing-02) var(--cds-spacing-03);
  white-space: normal;
  text-align: center;
  line-height: 1.3;
}
.cs-figure figcaption {
  margin-top: var(--cds-spacing-03);
  font-family: var(--font-mono);
  font-size: var(--cds-caption-01);
  color: var(--ink-soft);
  text-align: center;
}
.cs-figure-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--cds-spacing-06);
}

/* Obscured treatment: case study visuals are blurred and labeled, real
   detail is discussed in conversation rather than published at full clarity.
   The badge centers on the image frame only (not the caption below it), so
   it needs its own positioning box distinct from .cs-figure/.cs-carousel-slide. */
.cs-figure-frame::before,
.cs-carousel-frame::before {
  content: 'Full detail shown in conversation';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-mono);
  font-size: var(--cds-caption-01);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink);
  background: rgba(8, 9, 13, 0.75);
  border: 1px solid var(--teal);
  padding: var(--cds-spacing-03) var(--cds-spacing-05);
  border-radius: 999px;
  white-space: normal;
  text-align: center;
  line-height: 1.3;
  width: max-content;
  max-width: 85%;
  pointer-events: none;
  z-index: 2;
}
/* Recreated concept graphics (no real client data) skip the obscured
   treatment entirely — full clarity is the point of these. */
.cs-figure-clean img { filter: none; border: none; }
.cs-figure-clean::before { display: none; }

/* ============================================
   Case study image carousel
   ============================================ */
.cs-carousel {
  position: relative;
  margin: var(--cds-spacing-07) 0;
}
.cs-carousel-viewport {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
}
.cs-carousel-track {
  display: flex;
  transition: transform var(--cds-duration-fast-02) var(--cds-easing-standard);
}
.cs-carousel-slide {
  flex: 0 0 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: var(--cds-spacing-06) 0;
  text-align: center;
}
.cs-carousel-frame {
  position: relative;
  display: inline-block;
  max-width: 100%;
}
.cs-carousel-frame img {
  max-height: 650px;
  width: auto;
  max-width: 100%;
  margin: 0;
  display: block;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  filter: blur(3px) saturate(0.6) brightness(0.75);
}
.cs-carousel-caption {
  margin: var(--cds-spacing-04) 0 0;
  font-family: var(--font-mono);
  font-size: var(--cds-caption-01);
  color: var(--ink-soft);
  text-align: center;
}
.cs-carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--teal);
  background: rgba(8, 9, 13, 0.75);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 1.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--cds-duration-fast-02) var(--cds-easing-standard);
}
.cs-carousel-btn:hover { background: var(--accent-purple); }
.cs-carousel-prev { left: var(--cds-spacing-04); }
.cs-carousel-next { right: var(--cds-spacing-04); }
.cs-carousel-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--cds-spacing-03);
  margin-top: var(--cds-spacing-04);
}
.cs-carousel-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--teal);
  background: transparent;
  cursor: pointer;
}
.cs-carousel-dot.is-active { background: var(--teal-deep); }
.cs-carousel-counter {
  font-family: var(--font-mono);
  font-size: var(--cds-caption-01);
  color: var(--ink-soft);
  text-align: center;
  margin-top: var(--cds-spacing-02);
}

@media (max-width: 672px) {
  .cs-carousel-btn { width: 36px; height: 36px; font-size: 1rem; }
  .cs-figure-frame::before,
  .cs-carousel-frame::before {
    font-size: 0.625rem;
    padding: var(--cds-spacing-02) var(--cds-spacing-03);
    white-space: normal;
    text-align: center;
    line-height: 1.3;
  }
}

.cs-decisions {
  display: grid;
  gap: var(--cds-spacing-05);
  margin-top: var(--cds-spacing-05);
}
.cs-decision {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-left: 3px solid var(--teal);
  border-radius: var(--radius);
  padding: var(--cds-spacing-06);
}
.cs-decision h4 {
  margin: 0 0 var(--cds-spacing-02);
  color: var(--heading);
  font-size: var(--cds-body-02);
}
.cs-decision p { margin: 0; max-width: none; }

.cs-reflection {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--cds-heading-03);
  color: var(--heading);
  border-left: 3px solid var(--accent-magenta);
  padding-left: var(--cds-spacing-06);
  margin-top: var(--cds-spacing-04);
  max-width: 60ch;
}

.cs-nav-footer {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--cds-spacing-04);
}

@media (max-width: 672px) {
  .cs-figure-row { grid-template-columns: 1fr; }
}

/* ============================================
   Responsive (Carbon breakpoints: md 672 / lg 1056)
   ============================================ */
@media (max-width: 1056px) {
  .toolkit-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .testimonials-grid { grid-template-columns: 1fr; }
}

@media (max-width: 672px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-signal { order: -1; width: 100%; max-width: 320px; margin: 0 auto 24px; }
  .about-inner { grid-template-columns: 1fr; }
  .about-portrait { max-width: 160px; }
  .log-entry { grid-template-columns: 1fr; gap: 6px; }
  .toolkit-grid { grid-template-columns: 1fr; }
  .toolkit-grid-4 { grid-template-columns: 1fr; }
  .testimonials-grid { grid-template-columns: 1fr; }
  .site-nav { display: none; }
}

/* ============================================
   Hacker/terminal effects
   (Hackers, 1995 — cyan CRT glow, occasional magenta,
   restrained: no effect runs longer than a hover or loops fast)
   ============================================ */
h1, h2, h3 {
  text-shadow: 0 0 16px rgba(46, 230, 255, 0.3);
}

.hero-photo-main {
  border: 3px solid var(--teal-deep);
  box-shadow: 0 0 24px rgba(46, 230, 255, 0.4);
}
.hero-photo-accent {
  border: 3px solid var(--accent-magenta);
  box-shadow: 0 0 20px rgba(255, 46, 196, 0.4);
}

/* Soft gradient blobs behind the hero, echoing the cyan/magenta reference */
.hero { position: relative; overflow: hidden; }
.hero::before,
.hero::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
  z-index: 0;
}
.hero::before {
  top: -30%;
  right: -15%;
  width: 55%;
  height: 160%;
  background: radial-gradient(circle, rgba(255, 46, 196, 0.2) 0%, transparent 70%);
}
.hero::after {
  bottom: -30%;
  left: -10%;
  width: 45%;
  height: 120%;
  background: radial-gradient(circle, rgba(34, 229, 255, 0.16) 0%, transparent 70%);
}
.hero-inner { position: relative; z-index: 1; }

/* Slow CRT-style scan sweep across the hero photos */
.hero-photos::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 40%;
  background: linear-gradient(to bottom, transparent, rgba(46, 230, 255, 0.1), transparent);
  animation: scan-sweep 6s linear infinite;
  pointer-events: none;
}
@keyframes scan-sweep {
  0% { top: -40%; }
  100% { top: 100%; }
}

/* Fixed, faint scanline texture over the whole page */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.025) 0px,
    rgba(255, 255, 255, 0.025) 1px,
    transparent 1px,
    transparent 3px
  );
}

/* One-shot RGB-split glitch flicker on hover, not a continuous loop */
@keyframes glitch-flicker {
  0%, 100% { text-shadow: 2px 0 var(--accent-magenta), -2px 0 var(--teal-deep); }
  20% { text-shadow: -2px 0 var(--accent-magenta), 2px 0 var(--teal-deep); }
  40% { text-shadow: 1px 0 var(--accent-magenta), -1px 0 var(--teal-deep); }
  60% { text-shadow: -1px 0 var(--accent-magenta), 1px 0 var(--teal-deep); }
  80%, 100% { text-shadow: none; }
}
.site-nav a:hover,
.link-cta:hover {
  animation: glitch-flicker 0.25s steps(2, end) 1;
}

/* ============================================
   Site banner (points to the "how this site was made" write-up)
   ============================================ */
.site-banner {
  position: fixed;
  left: var(--cds-spacing-05);
  bottom: var(--cds-spacing-05);
  z-index: 30;
  display: flex;
  align-items: center;
  gap: var(--cds-spacing-04);
  max-width: 360px;
  background: rgba(18, 20, 27, 0.95);
  backdrop-filter: blur(8px);
  border: 1px solid var(--teal);
  border-radius: var(--radius);
  box-shadow: 0 0 24px rgba(34, 229, 255, 0.2);
  padding: var(--cds-spacing-04) var(--cds-spacing-05);
}
.site-banner-link {
  font-family: var(--font-mono);
  font-size: var(--cds-caption-01);
  color: var(--ink);
  text-decoration: none;
  line-height: 1.4;
}
.site-banner-link:hover { color: var(--teal-deep); }
.site-banner-close {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.site-banner-close:hover { color: var(--ink); border-color: var(--teal); }

@media (max-width: 672px) {
  .site-banner {
    left: var(--cds-spacing-04);
    right: var(--cds-spacing-04);
    max-width: none;
  }
}