/* ================================================================
   REGNABTEC — styles.css
   Premium Tech Portfolio Stylesheet
   Color Palette: Deep Navy / Sky Blue / Electric Blue / Soft Gray
   Typography: Playfair Display (Serif) + DM Sans (Sans-Serif)
   ================================================================ */

/* ----------------------------------------------------------------
   1. CSS CUSTOM PROPERTIES (Design Tokens)
---------------------------------------------------------------- */
:root {
  /* Color Palette */
  --navy:        #0A192F;
  --navy-mid:    #0D2137;
  --navy-light:  #112240;
  --navy-border: #1E3A5F;
  --gray:        #C9D1D9;
  --gray-muted:  #8B949E;
  --gray-dark:   #6E7681;
  --white:       #FFFFFF;
  --sky:         #58A6FF;
  --sky-glow:    rgba(88, 166, 255, 0.18);
  --electric:    #1F6FEB;
  --electric-dim: rgba(31, 111, 235, 0.15);

  /* Typography */
  --font-serif:  'Playfair Display', Georgia, serif;
  --font-sans:   'DM Sans', -apple-system, sans-serif;
  --font-mono:   'DM Mono', 'Courier New', monospace;

  /* Spacing */
  --section-py:  clamp(64px, 10vw, 120px);
  --inner-max:   1200px;
  --gutter:      clamp(20px, 5vw, 64px);

  /* Transitions */
  --ease:        cubic-bezier(0.22, 1, 0.36, 1);
  --ease-fast:   cubic-bezier(0.4, 0, 0.2, 1);
  --dur:         0.35s;
  --dur-slow:    0.65s;

  /* Borders */
  --border:      1px solid var(--navy-border);
  --border-sky:  1px solid rgba(88, 166, 255, 0.3);
}

/* ----------------------------------------------------------------
   2. RESET & BASE
---------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  background-color: var(--navy);
  color: var(--gray);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a {
  color: var(--sky);
  text-decoration: none;
  transition: color var(--dur) var(--ease-fast);
}
a:hover, a:focus-visible { color: var(--white); }

ul { list-style: none; }

address { font-style: normal; }

/* Accessibility: skip link */
.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  background: var(--sky);
  color: var(--navy);
  padding: 8px 16px;
  z-index: 9999;
  font-weight: 600;
}
.skip-link:focus { top: 0; }

/* ----------------------------------------------------------------
   3. TYPOGRAPHY SCALE
---------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-serif);
  line-height: 1.15;
  color: var(--white);
}

h1 { font-size: clamp(2.4rem, 6vw, 5rem); font-weight: 700; }
h2 { font-size: clamp(2rem, 4.5vw, 3.6rem); font-weight: 700; }
h3 { font-size: clamp(1.3rem, 2.5vw, 1.75rem); font-weight: 600; }
h4 { font-size: 1.1rem; font-weight: 600; }

em { font-style: italic; color: var(--sky); }

p { max-width: 65ch; }

/* ----------------------------------------------------------------
   4. SHARED LAYOUT UTILITIES
---------------------------------------------------------------- */
.section-inner {
  max-width: var(--inner-max);
  margin: 0 auto;
  padding: var(--section-py) var(--gutter);
}

.section-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sky);
  margin-bottom: 1rem;
  border-left: 2px solid var(--sky);
  padding-left: 10px;
}

.section-title {
  margin-bottom: 2rem;
}

/* Reveal animation (triggered via JS) */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ----------------------------------------------------------------
   5. BUTTONS
---------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 4px;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  border: none;
  transition: background var(--dur) var(--ease-fast),
              color var(--dur) var(--ease-fast),
              box-shadow var(--dur) var(--ease-fast),
              transform 0.15s var(--ease-fast);
  text-decoration: none;
  white-space: nowrap;
}

.btn:active { transform: scale(0.97); }

/* Primary: Electric Blue → Sky hover */
.btn-primary {
  background: var(--electric);
  color: var(--white);
  box-shadow: 0 4px 20px rgba(31, 111, 235, 0.35);
}
.btn-primary:hover, .btn-primary:focus-visible {
  background: var(--sky);
  color: var(--navy);
  box-shadow: 0 6px 28px rgba(88, 166, 255, 0.45);
}

/* Secondary: Outlined Gray */
.btn-secondary {
  background: transparent;
  color: var(--gray);
  border: 1px solid var(--navy-border);
}
.btn-secondary:hover, .btn-secondary:focus-visible {
  border-color: var(--sky);
  color: var(--sky);
  background: var(--sky-glow);
}

/* ----------------------------------------------------------------
   6. STICKY HEADER
---------------------------------------------------------------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(10, 25, 47, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease-fast),
              box-shadow var(--dur) var(--ease-fast);
}

.site-header.scrolled {
  border-bottom-color: var(--navy-border);
  box-shadow: 0 4px 40px rgba(0, 0, 0, 0.4);
}

.header-inner {
  max-width: var(--inner-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Logo */
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--white);
  flex-shrink: 0;
}

.logo-mark {
  width: 36px;
  height: 36px;
  background: var(--electric);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--white);
  flex-shrink: 0;
}

.logo-text {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--white);
}

.logo:hover .logo-mark {
  background: var(--sky);
  color: var(--navy);
}

/* Nav */
.site-nav ul {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
}

.nav-link {
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gray-muted);
  transition: color var(--dur) var(--ease-fast);
  position: relative;
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--sky);
  transition: width var(--dur) var(--ease);
}
.nav-link:hover,
.nav-link:focus-visible {
  color: var(--sky);
}
.nav-link:hover::after { width: 100%; }

.nav-link--active {
  color: var(--white);
}
.nav-link--active::after {
  width: 100%;
}

.cta-nav {
  background: var(--electric);
  color: var(--white) !important;
  padding: 8px 18px;
  border-radius: 4px;
}
.cta-nav::after { display: none; }
.cta-nav:hover, .cta-nav:focus-visible {
  background: var(--sky);
  color: var(--navy) !important;
}

/* Hamburger */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  z-index: 110;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--gray);
  border-radius: 2px;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.nav-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.active span:nth-child(2) { opacity: 0; }
.nav-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ----------------------------------------------------------------
   7. HERO SECTION
---------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* --- Animated background --- */
.hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Subtle grid overlay */
.grid-overlay {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(88, 166, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(88, 166, 255, 0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 40%, transparent 100%);
}

/* Connection nodes */
.node-field {
  position: absolute;
  inset: 0;
}

.node {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sky);
  box-shadow: 0 0 12px var(--sky), 0 0 4px var(--sky);
  animation: nodePulse 4s ease-in-out infinite;
}

.n1 { top: 20%; left: 12%; animation-delay: 0s; }
.n2 { top: 40%; left: 43%; animation-delay: 0.6s; width:12px; height:12px; }
.n3 { top: 25%; left: 76%; animation-delay: 1.2s; }
.n4 { top: 72%; left: 63%; animation-delay: 0.3s; }
.n5 { top: 70%; left: 22%; animation-delay: 0.9s; }
.n6 { top: 88%; left: 91%; animation-delay: 1.5s; }
.n7 { top: 7%; left: 65%; animation-delay: 1.8s; }
.n8 { top: 55%; left: 7%; animation-delay: 0.4s; }

@keyframes nodePulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%       { opacity: 1; transform: scale(1.5); }
}

/* SVG connection lines */
.connections {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.conn-line {
  stroke: rgba(88, 166, 255, 0.15);
  stroke-width: 1;
  stroke-dasharray: 6 4;
  animation: dashFlow 8s linear infinite;
}
.conn-line.l2 { animation-delay: -2s; stroke: rgba(31, 111, 235, 0.2); }
.conn-line.l3 { animation-delay: -4s; }
.conn-line.l4 { animation-delay: -1s; }
.conn-line.l5 { animation-delay: -3s; }
.conn-line.l6 { animation-delay: -5s; }
.conn-line.l7 { animation-delay: -6s; }
.conn-line.l8 { animation-delay: -7s; }

@keyframes dashFlow {
  from { stroke-dashoffset: 100; }
  to   { stroke-dashoffset: 0; }
}

/* Radial glow */
.hero-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 700px;
  height: 700px;
  background: radial-gradient(ellipse at center,
    rgba(31, 111, 235, 0.12) 0%,
    rgba(88, 166, 255, 0.06) 40%,
    transparent 70%);
  pointer-events: none;
}

/* --- Hero Content --- */
.hero-content {
  position: relative;
  z-index: 2;
  max-width: var(--inner-max);
  width: 100%;
  margin: 0 auto;
  padding: 120px var(--gutter) 80px;
}

.hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sky);
  margin-bottom: 1.5rem;
  animation: fadeInUp 0.8s var(--ease) 0.1s both;
}

.eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sky);
  animation: nodePulse 2s ease-in-out infinite;
}

.hero-headline {
  margin-bottom: 1.5rem;
  animation: fadeInUp 0.9s var(--ease) 0.2s both;
  font-size: clamp(2.6rem, 6.5vw, 5.2rem);
  font-weight: 900;
  line-height: 1.1;
}

.hero-sub {
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  color: var(--gray-muted);
  margin-bottom: 2.5rem;
  max-width: 60ch;
  animation: fadeInUp 1s var(--ease) 0.35s both;
  line-height: 1.8;
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 3.5rem;
  animation: fadeInUp 1s var(--ease) 0.5s both;
}

/* Stats bar */
.hero-stats {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  border-top: var(--border);
  padding-top: 2rem;
  width: fit-content;
  animation: fadeInUp 1s var(--ease) 0.65s both;
}

.stat {
  display: flex;
  flex-direction: column;
  padding: 0 2rem 0 0;
}

.stat-num {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--white);
  line-height: 1;
}

.stat-label {
  font-size: 0.75rem;
  color: var(--gray-dark);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 4px;
}

.stat-divider {
  width: 1px;
  height: 40px;
  background: var(--navy-border);
  margin: 0 2rem 0 0;
}

/* Scroll hint */
.hero-scroll-hint {
  position: absolute;
  bottom: 32px;
  right: var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 2;
  animation: fadeInUp 1s var(--ease) 1s both;
}

.hero-scroll-hint span {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gray-dark);
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

.scroll-line {
  width: 1px;
  height: 60px;
  background: linear-gradient(to bottom, var(--sky), transparent);
  animation: scrollPulse 2s ease-in-out infinite;
}

@keyframes scrollPulse {
  0%, 100% { opacity: 0.4; }
  50%       { opacity: 1; }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

.br-desktop { display: block; }

/* ----------------------------------------------------------------
   8. ABOUT SECTION
---------------------------------------------------------------- */
.about {
  background: var(--navy-mid);
  border-top: var(--border);
  border-bottom: var(--border);
}

.about-header {
  margin-bottom: 3rem;
}

.about-grid {
  display: grid;
  grid-template-columns: 240px 1fr 220px;
  gap: 48px;
  align-items: start;
}

/* Photo column */
.about-photo-col { display: flex; flex-direction: column; gap: 24px; }

.photo-frame {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.photo-placeholder {
  aspect-ratio: 3/4;
  background: var(--navy-light);
  border: var(--border);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  overflow: hidden;
}
.hp-profile-img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Keeps the proportions perfect */
  position: relative;
  z-index: 2; /* Brings the image to the front */
}
.photo-placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--electric-dim) 0%, transparent 60%);
}

.photo-initials {
  font-family: var(--font-serif);
  font-size: 4rem;
  font-weight: 700;
  color: var(--sky);
  position: relative;
  z-index: 1;
}

.photo-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gray-dark);
  position: relative;
  z-index: 1;
}

.photo-caption {
  display: flex;
  flex-direction: column;
}

.caption-line {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--white);
}

.caption-sub {
  font-size: 0.78rem;
  color: var(--gray-dark);
  letter-spacing: 0.05em;
}

/* AWS Badge */
.badge-block {
  border: var(--border-sky);
  border-radius: 6px;
  background: rgba(88, 166, 255, 0.05);
  padding: 16px;
  backdrop-filter: blur(8px);
}

.badge-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.badge-icon { width: 40px; flex-shrink: 0; }

.badge-text {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.badge-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--white);
}

.badge-sub {
  font-size: 0.72rem;
  color: var(--gray-muted);
}

.badge-verified {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: #3FB950;
  letter-spacing: 0.1em;
  white-space: nowrap;
}

/* Bio column */
.about-bio-col { min-width: 0; }

.bio-lede {
  font-family: var(--font-serif);
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  color: var(--white);
  line-height: 1.65;
  margin-bottom: 2.5rem;
  padding-bottom: 2rem;
  border-bottom: var(--border);
  max-width: 100%;
}

.bio-blocks {
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
}

.bio-block { }

.bio-block-title {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sky);
  margin-bottom: 0.5rem;
  font-weight: 500;
}

.bio-block p {
  font-size: 1rem;
  color: var(--gray);
  max-width: 55ch;
}

/* Stack tags */
.stack-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 0.5rem;
}

.tag {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  padding: 4px 10px;
  border-radius: 3px;
  border: var(--border-sky);
  color: var(--sky);
  letter-spacing: 0.08em;
  background: rgba(88, 166, 255, 0.06);
  transition: background var(--dur) var(--ease-fast), color var(--dur) var(--ease-fast);
}

.tag:hover {
  background: var(--sky);
  color: var(--navy);
}

/* Aside column */
.about-aside-col {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: var(--border);
  border-radius: 4px;
  overflow: hidden;
}

.aside-card {
  padding: 20px 20px;
  border-bottom: var(--border);
  position: relative;
  transition: background var(--dur) var(--ease-fast);
}

.aside-card:last-child { border-bottom: none; }

.aside-card:hover {
  background: var(--electric-dim);
}

.aside-num {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--sky);
  letter-spacing: 0.15em;
  margin-bottom: 8px;
}

.aside-title {
  font-family: var(--font-serif);
  font-size: 1rem;
  color: var(--white);
  margin-bottom: 6px;
}

.aside-text {
  font-size: 0.92rem;
  color: var(--gray-muted);
  line-height: 1.6;
  max-width: 100%;
}

/* ----------------------------------------------------------------
   9. SERVICES SECTION
---------------------------------------------------------------- */
.services {
  background: var(--navy);
}

.services-header {
  margin-bottom: 3rem;
  max-width: 700px;
}

.services-intro {
  font-size: 1rem;
  color: var(--gray-muted);
  margin-top: -0.5rem;
}

/* Catalog grid — inspired by multi-column editorial catalog */
.services-catalog {
  display: flex;
  flex-direction: column;
  border: var(--border);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 3rem;
}

.service-item {
  display: grid;
  grid-template-columns: 60px 60px 1fr 36px;
  gap: 0;
  align-items: start;
  padding: 36px 36px 36px 0;
  border-bottom: var(--border);
  transition: background var(--dur) var(--ease-fast);
  cursor: default;
  position: relative;
}

.service-item:last-child { border-bottom: none; }

.service-item:hover {
  background: rgba(31, 111, 235, 0.05);
}

.service-item:hover .service-arrow {
  color: var(--sky);
  transform: translateX(4px);
}

.service-num {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--gray-dark);
  letter-spacing: 0.12em;
  padding: 4px 0 0 36px;
  width: 60px;
  flex-shrink: 0;
}

.service-icon {
  width: 40px;
  padding-top: 2px;
  flex-shrink: 0;
}

.service-icon svg { width: 40px; height: 40px; }

.service-body {
  padding: 0 24px;
  min-width: 0;
}

.service-title {
  font-family: var(--font-serif);
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  color: var(--white);
  margin-bottom: 12px;
  line-height: 1.25;
}

.service-desc {
  font-size: 0.975rem;
  color: var(--gray-muted);
  line-height: 1.75;
  margin-bottom: 14px;
  max-width: 55ch;
}

.service-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.service-tags span {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--electric);
  border: 1px solid rgba(31, 111, 235, 0.4);
  padding: 2px 8px;
  border-radius: 2px;
  background: rgba(31, 111, 235, 0.08);
  letter-spacing: 0.06em;
}

.service-arrow {
  font-size: 1.2rem;
  color: var(--navy-border);
  transition: color var(--dur) var(--ease-fast), transform var(--dur) var(--ease);
  align-self: center;
  padding-top: 0;
}

/* Services CTA */
.services-cta-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: 28px 36px;
  background: var(--navy-light);
  border: var(--border);
  border-radius: 4px;
}

.services-cta-bar p {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  color: var(--white);
  max-width: 100%;
  margin: 0;
}

/* ----------------------------------------------------------------
   10. CLOUD ARCHITECTURE SHOWCASE
---------------------------------------------------------------- */
.cloud {
  background: var(--navy-mid);
  border-top: var(--border);
  border-bottom: var(--border);
}

.cloud-header { margin-bottom: 3rem; max-width: 700px; }

.cloud-intro {
  font-size: 1rem;
  color: var(--gray-muted);
  margin-top: -0.5rem;
}

/* Diagram container */
.arch-diagram {
  position: relative;
  background: var(--navy-light);
  border: var(--border);
  border-radius: 8px;
  padding: 40px 32px 32px;
  margin-bottom: 3rem;
  overflow: hidden;
}

.arch-diagram::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(88, 166, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(88, 166, 255, 0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}

.arch-outer-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--sky);
  margin-bottom: 20px;
}

.arch-vpc {
  border: 1px dashed rgba(88, 166, 255, 0.3);
  border-radius: 6px;
  padding: 24px;
  position: relative;
  margin-bottom: 20px;
}

.arch-vpc-label {
  position: absolute;
  top: -10px;
  left: 16px;
  background: var(--navy-light);
  padding: 0 8px;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--gray-dark);
  letter-spacing: 0.12em;
}

.arch-lanes {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.arch-subnet {
  border: var(--border);
  border-radius: 4px;
  padding: 16px 20px;
  position: relative;
}

.public-subnet { background: rgba(88, 166, 255, 0.04); }
.private-subnet { background: rgba(31, 111, 235, 0.04); }

.arch-subnet-label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gray-dark);
  margin-bottom: 14px;
}

.arch-nodes-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
}

.arch-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: var(--navy);
  border: var(--border);
  border-radius: 6px;
  padding: 12px 14px;
  min-width: 80px;
  cursor: default;
  transition: border-color var(--dur) var(--ease-fast),
              box-shadow var(--dur) var(--ease-fast),
              transform 0.2s var(--ease);
}

.arch-node:hover {
  border-color: var(--sky);
  box-shadow: 0 0 16px rgba(88, 166, 255, 0.2);
  transform: translateY(-2px);
}

.arch-node.highlighted {
  border-color: var(--sky);
  box-shadow: 0 0 12px rgba(88, 166, 255, 0.25);
}

.arch-node-icon { width: 28px; height: 28px; }
.arch-node-icon svg { width: 28px; height: 28px; }

.arch-node span {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--gray-muted);
  letter-spacing: 0.1em;
}

.arch-connector {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--navy-border), rgba(88, 166, 255, 0.3), var(--navy-border));
  position: relative;
  min-width: 20px;
  max-width: 60px;
}

.arch-connector::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid rgba(88, 166, 255, 0.4);
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
}

/* IAM bar */
.arch-iam {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding: 10px 16px;
  background: rgba(63, 185, 80, 0.07);
  border: 1px solid rgba(63, 185, 80, 0.25);
  border-radius: 4px;
  font-size: 0.8rem;
  color: #3FB950;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}

.iam-icon { font-size: 1rem; }

/* Internet label */
.arch-internet {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: rgba(88, 166, 255, 0.05);
  border: var(--border-sky);
  border-radius: 4px;
  max-width: fit-content;
}

.internet-icon { width: 60px; }
.internet-icon svg { width: 60px; height: 36px; }

.arch-internet span {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--sky);
  letter-spacing: 0.1em;
}

/* Migration story */
.migration-story {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 0;
  border: var(--border);
  border-radius: 4px;
  overflow: hidden;
}

.story-col {
  padding: 32px;
}

.story-divider {
  width: 1px;
  background: var(--navy-border);
}

.story-heading {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sky);
  margin-bottom: 12px;
  font-weight: 500;
}

.story-col p {
  font-size: 0.88rem;
  color: var(--gray-muted);
  line-height: 1.75;
  max-width: 100%;
}

/* ----------------------------------------------------------------
   11. CONTACT FOOTER
---------------------------------------------------------------- */
.contact-footer {
  background: var(--navy-light);
  border-top: var(--border);
}

.footer-inner {
  max-width: var(--inner-max);
  margin: 0 auto;
  padding: var(--section-py) var(--gutter) 0;
}

.footer-top {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: clamp(40px, 8vw, 100px);
  align-items: start;
  padding-bottom: 4rem;
  border-bottom: var(--border);
  margin-bottom: 0;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.logo-footer { margin-bottom: 0; }

.footer-tagline {
  font-size: 0.88rem;
  color: var(--gray-muted);
  line-height: 1.7;
  max-width: 100%;
}

.contact-block {}

.contact-heading {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  margin-bottom: 1rem;
  line-height: 1.2;
}

.contact-sub {
  font-size: 0.9rem;
  color: var(--gray-muted);
  margin-bottom: 2rem;
  max-width: 50ch;
}

.contact-details {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 2rem;
}

.contact-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.contact-icon {
  width: 20px;
  height: 20px;
  color: var(--sky);
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.contact-icon svg { width: 20px; height: 20px; }

.contact-link {
  font-size: 0.95rem;
  color: var(--gray);
  transition: color var(--dur) var(--ease-fast);
}

.contact-link:hover, .contact-link:focus-visible {
  color: var(--sky);
}

.footer-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Footer bottom bar */
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: 24px 0;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(12px, 3vw, 32px);
}

.footer-nav a {
  font-size: 0.8rem;
  color: var(--gray-dark);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: color var(--dur) var(--ease-fast);
}

.footer-nav a:hover { color: var(--sky); }

.footer-copy {
  font-size: 0.78rem;
  color: var(--gray-dark);
  max-width: 100%;
}

.footer-social {
  display: flex;
  gap: 14px;
  align-items: center;
}

.footer-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid var(--navy-border);
  color: var(--gray-dark);
  transition: color var(--dur) var(--ease-fast), border-color var(--dur) var(--ease-fast), background var(--dur) var(--ease-fast);
}

.footer-social-link:hover {
  color: var(--sky);
  border-color: rgba(88,166,255,0.4);
  background: rgba(88,166,255,0.07);
}

.footer-social-link svg { display: block; }

.hero-available {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #3fb950;
  background: rgba(63,185,80,0.1);
  border: 1px solid rgba(63,185,80,0.3);
  padding: 4px 12px 4px 8px;
  border-radius: 20px;
  margin-left: 12px;
  vertical-align: middle;
}

.hero-available-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3fb950;
  animation: availPulse 2s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes availPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

/* ----------------------------------------------------------------
   12. RESPONSIVE — TABLET (max 900px)
---------------------------------------------------------------- */
@media (max-width: 900px) {
  .about-grid {
    grid-template-columns: 200px 1fr;
    grid-template-rows: auto auto;
    gap: 32px;
  }

  .about-aside-col {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-radius: 4px;
  }

  .aside-card { border-bottom: none; border-right: var(--border); }
  .aside-card:last-child { border-right: none; }

  .migration-story {
    grid-template-columns: 1fr;
  }

  .story-divider { width: 100%; height: 1px; }

  .footer-top {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .service-item {
    grid-template-columns: 48px 48px 1fr 28px;
  }

  .service-num { padding-left: 20px; }

  /* Header / Nav */
  .nav-toggle { display: flex; }

  .site-nav {
    position: fixed;
    inset: 0;
    background: rgba(10, 25, 47, 0.98);
    backdrop-filter: blur(16px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur) var(--ease-fast);
    z-index: 105;
  }

  .site-nav.open {
    opacity: 1;
    pointer-events: all;
  }

  .site-nav ul {
    flex-direction: column;
    gap: 32px;
    text-align: center;
  }

  .nav-link {
    font-size: 1.2rem;
    letter-spacing: 0.12em;
  }

  .cta-nav { padding: 14px 28px; }
}

/* ----------------------------------------------------------------
   13. RESPONSIVE — MOBILE (max 600px)
---------------------------------------------------------------- */
@media (max-width: 600px) {
  /* Hero */
  .hero-scroll-hint { display: none; }
  .br-desktop { display: none; }

  .hero-stats {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px;
  }

  .stat-divider { display: none; }
  .stat { padding: 0; }

  /* About */
  .about-grid {
    grid-template-columns: 1fr;
  }

  .about-photo-col {
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
  }

  .photo-frame {
    flex: 0 0 120px;
  }

  .badge-block { flex: 1; }

  .about-aside-col {
    grid-template-columns: 1fr;
  }

  .aside-card {
    border-right: none;
    border-bottom: var(--border);
  }

  .aside-card:last-child { border-bottom: none; }

  /* Services */
  .service-item {
    grid-template-columns: 1fr;
    padding: 28px 20px;
    gap: 12px;
  }

  .service-num { padding: 0; }

  .service-icon { padding: 0; }

  .service-body { padding: 0; }

  .service-arrow { display: none; }

  .services-cta-bar {
    flex-direction: column;
    text-align: center;
    padding: 24px 20px;
  }

  /* Cloud */
  .arch-nodes-row {
    gap: 8px;
    flex-wrap: wrap;
  }

  .arch-connector { display: none; }

  .arch-node {
    min-width: 64px;
    padding: 10px;
  }

  .migration-story { gap: 0; }

  /* Footer */
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

/* ----------------------------------------------------------------
   14. FOCUS STYLES (accessibility)
---------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--sky);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ----------------------------------------------------------------
   15. SCROLLBAR STYLING (Webkit)
---------------------------------------------------------------- */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--navy); }
::-webkit-scrollbar-thumb {
  background: var(--navy-border);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: var(--sky); }

/* ----------------------------------------------------------------
   16. SELECTION COLOR
---------------------------------------------------------------- */
::selection {
  background: rgba(88, 166, 255, 0.25);
  color: var(--white);
}

/* ================================================================
   FEATURED PROJECTS SECTION — CSS ADDITIONS
   Append this block to the END of styles.css

   Uses ONLY existing CSS variables:
     --navy, --navy-mid, --navy-light, --navy-border,
     --gray, --gray-muted, --gray-dark,
     --sky, --sky-glow, --electric, --electric-dim,
     --white, --font-serif, --font-sans, --font-mono,
     --border, --border-sky, --ease, --dur, --dur-slow,
     --section-py, --inner-max, --gutter
   ================================================================ */


/* ----------------------------------------------------------------
   PROJECTS: Section wrapper
---------------------------------------------------------------- */
.projects {
  background: var(--navy);
  border-top: var(--border);
}

.projects-header {
  margin-bottom: clamp(48px, 8vw, 88px);
  max-width: 680px;
}

.projects-intro {
  font-size: 1rem;
  color: var(--gray-muted);
  margin-top: -0.25rem;
  max-width: 55ch;
}


/* ----------------------------------------------------------------
   PROJECTS: proj-block — the asymmetric two-column layout
---------------------------------------------------------------- */
.proj-block {
  display: grid;
  gap: clamp(32px, 6vw, 72px);
  align-items: center;
  margin-bottom: clamp(64px, 12vw, 120px);
}

/* Project 01: image LEFT, info RIGHT */
.proj-block--left {
  grid-template-columns: 1.1fr 0.9fr;
}

/* Project 02: info LEFT, image RIGHT */
.proj-block--right {
  grid-template-columns: 0.9fr 1.1fr;
}

/* On --right, swap visual to column 2 */
.proj-block--right .proj-visual { order: 2; }
.proj-block--right .proj-info   { order: 1; }


/* ----------------------------------------------------------------
   PROJECTS: Visual column — the floating card & decorative layer
---------------------------------------------------------------- */
.proj-visual {
  position: relative;
  /* Extra space for the overflowing decorative block */
  padding-bottom: 32px;
  padding-right: 24px;
}

/* On right-side variant, mirror the padding offsets */
.proj-block--right .proj-visual {
  padding-right: 0;
  padding-left: 24px;
}

/* Main image card */
.proj-img {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  border: var(--border);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.5),
    0 4px 16px rgba(0, 0, 0, 0.3);
  aspect-ratio: 16 / 10;
  transition: transform var(--dur-slow) var(--ease),
              box-shadow var(--dur-slow) var(--ease);
}

.proj-img:hover {
  transform: translateY(-6px) rotate(-0.4deg);
  box-shadow:
    0 36px 80px rgba(0, 0, 0, 0.55),
    0 0 40px rgba(88, 166, 255, 0.12);
}

/* Project 1: blue-green gradient (brand colors of LPD&M) */
.proj-img--lpdm {
  background: linear-gradient(
    135deg,
    #0D2137 0%,
    #0E2E52 35%,
    #0D3A6B 65%,
    #0A2D55 100%
  );
}

/* Project 2: deeper navy with electric blue tint */
.proj-img--ecom {
  background: linear-gradient(
    135deg,
    #060F1E 0%,
    #0A192F 30%,
    #0D2137 60%,
    #091525 100%
  );
}

/* Placeholder content inside image card */
.proj-img-placeholder {
  width: 100%;
  height: 100%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}


/* ─ Skeleton UI (Project 1 — website mockup) ─ */
.proj-img-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
}

/* Skeleton nav bar */
.skel-nav {
  height: 10px;
  border-radius: 3px;
  background: rgba(88, 166, 255, 0.18);
  width: 100%;
}

/* Skeleton hero block */
.skel-hero {
  flex: 1.2;
  border-radius: 4px;
  background: linear-gradient(
    90deg,
    rgba(88, 166, 255, 0.08) 0%,
    rgba(31, 111, 235, 0.15) 50%,
    rgba(88, 166, 255, 0.08) 100%
  );
  background-size: 200% 100%;
  animation: skelShimmer 2.4s ease-in-out infinite;
}

/* Skeleton card row */
.skel-row {
  display: flex;
  gap: 8px;
  flex: 1;
}

.skel-card {
  flex: 1;
  border-radius: 4px;
  border: 1px solid rgba(88, 166, 255, 0.1);
  background: rgba(88, 166, 255, 0.05);
  animation: skelShimmer 2.4s ease-in-out infinite;
  animation-delay: 0.4s;
}

.skel-bar {
  border-radius: 3px;
}

@keyframes skelShimmer {
  0%, 100% { opacity: 0.5; }
  50%       { opacity: 1; }
}


/* ─ Terminal skeleton (Project 2 — backend/cloud) ─ */
.proj-img-grid--dark {
  gap: 14px;
}

.skel-terminal {
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(88, 166, 255, 0.15);
  border-radius: 6px;
  padding: 12px 14px;
  flex: 1.5;
}

.skel-terminal-dots {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}

.skel-terminal-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(88, 166, 255, 0.25);
}

.skel-terminal-dots span:first-child  { background: rgba(255, 95, 86, 0.4); }
.skel-terminal-dots span:nth-child(2) { background: rgba(255, 189, 46, 0.4); }
.skel-terminal-dots span:last-child   { background: rgba(39, 201, 63, 0.4); }

.skel-terminal-lines {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.skel-tline {
  height: 7px;
  border-radius: 3px;
  width: 90%;
}

.skel-tline--cmd {
  background: rgba(88, 166, 255, 0.35);
  width: 75%;
  animation: skelShimmer 2s ease-in-out infinite;
}

.skel-tline--out {
  background: rgba(88, 166, 255, 0.12);
  width: 85%;
}

.skel-tline--short { width: 45%; }

.skel-dash-row {
  display: flex;
  gap: 8px;
  flex: 1;
}

.skel-stat-box {
  flex: 1;
  border-radius: 4px;
  border: 1px solid rgba(31, 111, 235, 0.2);
  background: rgba(31, 111, 235, 0.07);
  animation: skelShimmer 2.4s ease-in-out infinite;
}

.skel-stat-box:nth-child(2) { animation-delay: 0.3s; }
.skel-stat-box:nth-child(3) { animation-delay: 0.6s; }


/* ─ Floating badge (sits outside the card, overlapping) ─ */
.proj-float-badge {
  position: absolute;
  bottom: -18px;
  right: -18px;
  background: var(--navy-light);
  border: var(--border-sky);
  border-radius: 6px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(88, 166, 255, 0.1);
  z-index: 3;
  animation: badgeFloat 4s ease-in-out infinite;
}

.proj-block--right .proj-float-badge {
  right: auto;
  left: -18px;
}

@keyframes badgeFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-5px); }
}

.pfb-icon {
  color: var(--sky);
  font-size: 1rem;
  line-height: 1;
}

.pfb-text {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: var(--sky);
  text-transform: uppercase;
  white-space: nowrap;
}

.proj-float-badge--aws {
  bottom: -18px;
  right: auto;
  left: -18px;
}

.proj-block--right .proj-float-badge--aws {
  left: auto;
  right: -18px;
}


/* ─ Decorative offset block (sits behind the image card) ─ */
.proj-deco-block {
  position: absolute;
  border-radius: 8px;
  z-index: -1;
  pointer-events: none;
}

.proj-deco-block--1 {
  width: 80%;
  height: 70%;
  bottom: 0;
  right: 0;
  background: linear-gradient(135deg, var(--electric-dim), transparent);
  border: 1px solid rgba(31, 111, 235, 0.2);
}

.proj-deco-block--2 {
  width: 75%;
  height: 65%;
  bottom: 0;
  left: 0;
  background: linear-gradient(135deg, rgba(88, 166, 255, 0.06), transparent);
  border: 1px solid rgba(88, 166, 255, 0.15);
}


/* ----------------------------------------------------------------
   PROJECTS: Info column
---------------------------------------------------------------- */
.proj-info {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Project number + category */
.proj-meta {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 16px;
}

.proj-index {
  font-family: var(--font-serif);
  font-size: 3rem;
  font-weight: 900;
  line-height: 1;
  /* Outlined/ghosted number — editorial feel */
  -webkit-text-stroke: 1px rgba(88, 166, 255, 0.3);
  color: transparent;
  user-select: none;
}

.proj-category {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sky);
  border-left: 2px solid var(--sky);
  padding-left: 10px;
}

/* Project title */
.proj-title {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  color: var(--white);
  line-height: 1.2;
  margin-bottom: 18px;
}

/* Description */
.proj-desc {
  font-size: 0.92rem;
  color: var(--gray-muted);
  line-height: 1.8;
  margin-bottom: 22px;
  max-width: 52ch;
}

/* Highlight key stats (two-col mini grid) */
.proj-highlights {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 22px;
  padding: 16px 20px;
  background: var(--navy-light);
  border: var(--border);
  border-radius: 4px;
  border-left: 2px solid var(--electric);
}

.proj-highlight {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ph-label {
  font-family: var(--font-mono);
  font-size: 0.63rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gray-dark);
}

.ph-value {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--white);
}

/* Tech stack tags */
.proj-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 28px;
}

.proj-tag {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  border-radius: 3px;
  border: 1px solid rgba(88, 166, 255, 0.22);
  color: var(--sky);
  background: rgba(88, 166, 255, 0.06);
  transition: background var(--dur) var(--ease),
              color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}

.proj-tag:hover {
  background: var(--sky);
  color: var(--navy);
  border-color: var(--sky);
}

/* Action buttons row */
.proj-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.cs-coming-soon {
  cursor: default;
  opacity: 0.7;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.cs-badge {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(88, 166, 255, 0.12);
  border: 1px solid rgba(88, 166, 255, 0.3);
  color: var(--sky);
  padding: 2px 7px;
  border-radius: 20px;
}


/* ----------------------------------------------------------------
   PROJECTS: Responsive — Tablet (max 900px)
---------------------------------------------------------------- */
@media (max-width: 900px) {
  .proj-block--left,
  .proj-block--right {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  /* Always show image on top at tablet/mobile */
  .proj-block--left  .proj-visual { order: 1; }
  .proj-block--left  .proj-info   { order: 2; }
  .proj-block--right .proj-visual { order: 1; }
  .proj-block--right .proj-info   { order: 2; }

  .proj-visual {
    padding-right: 0;
    padding-left: 0;
    padding-bottom: 40px; /* space for deco block */
  }

  /* Re-anchor floating badges for single-column */
  .proj-float-badge,
  .proj-block--right .proj-float-badge,
  .proj-float-badge--aws,
  .proj-block--right .proj-float-badge--aws {
    bottom: 4px;
    right: 12px;
    left: auto;
  }

  .proj-highlights {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}


/* ----------------------------------------------------------------
   PROJECTS: Responsive — Mobile (max 600px)
---------------------------------------------------------------- */
@media (max-width: 600px) {
  .proj-block {
    margin-bottom: 56px;
  }

  .proj-index {
    font-size: 2.2rem;
  }

  .proj-title {
    font-size: 1.5rem;
  }

  .proj-desc {
    font-size: 0.88rem;
  }

  .proj-img {
    aspect-ratio: 4 / 3;
  }

  /* Hide decorative blocks on very small screens to reduce clutter */
  .proj-deco-block { display: none; }

  .proj-float-badge {
    bottom: 8px;
    right: 8px;
    left: auto;
  }

  .proj-actions .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ================================================================
   ABOUT PAGE — CSS ADDITIONS  (about.html)
   Append this entire block to the END of your existing styles.css.

   Naming convention: all new classes are prefixed with "ap-"
   to guarantee zero collision with existing homepage styles.

   Relies entirely on existing CSS variables:
     --navy, --navy-mid, --navy-light, --navy-border,
     --gray, --gray-muted, --gray-dark,
     --sky, --sky-glow, --electric, --electric-dim,
     --white, --font-serif, --font-sans, --font-mono,
     --border, --border-sky, --ease, --ease-fast,
     --dur, --dur-slow, --section-py, --inner-max, --gutter
================================================================ */


/* ----------------------------------------------------------------
   AP: Active nav link state (highlights "About" in the header)
---------------------------------------------------------------- */
.nav-link--active {
  color: var(--sky) !important;
}
.nav-link--active::after {
  width: 100% !important;
}


/* ----------------------------------------------------------------
   AP: BREADCRUMB
---------------------------------------------------------------- */
.ap-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray-dark);
  margin-bottom: 2.5rem;
}

.ap-breadcrumb a {
  color: var(--gray-dark);
  transition: color var(--dur) var(--ease-fast);
}

.ap-breadcrumb a:hover { color: var(--sky); }

.ap-breadcrumb span[aria-current="page"] {
  color: var(--sky);
}


/* ----------------------------------------------------------------
   AP: HERO
---------------------------------------------------------------- */
.ap-hero {
  position: relative;
  padding-top: 110px; /* clear sticky header */
  padding-bottom: clamp(48px, 8vw, 96px);
  overflow: hidden;
  border-bottom: var(--border);
}

.ap-hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* Reuse the homepage grid-overlay & hero-glow look */
.ap-hero-glow {
  position: absolute;
  top: 0;
  left: -10%;
  width: 60%;
  height: 100%;
  background: radial-gradient(ellipse at top left,
    rgba(31, 111, 235, 0.1) 0%,
    rgba(88, 166, 255, 0.05) 40%,
    transparent 70%);
}

.ap-hero-inner {
  position: relative;
  z-index: 1;
  max-width: var(--inner-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Two-column hero grid: text | identity card */
.ap-hero-grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
}

.ap-hero-title {
  font-size: clamp(2.2rem, 5vw, 4rem);
  font-weight: 900;
  line-height: 1.1;
  margin: 1rem 0 1.25rem;
  animation: fadeInUp 0.8s var(--ease) 0.1s both;
}

.ap-hero-sub {
  font-size: clamp(0.95rem, 1.5vw, 1.1rem);
  color: var(--gray-muted);
  line-height: 1.8;
  margin-bottom: 2rem;
  max-width: 50ch;
  animation: fadeInUp 0.9s var(--ease) 0.2s both;
}

.ap-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  animation: fadeInUp 1s var(--ease) 0.3s both;
}


/* ----------------------------------------------------------------
   AP: IDENTITY CARD (floating right in hero)
---------------------------------------------------------------- */
.ap-identity-card {
  background: var(--navy-light);
  border: var(--border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(88, 166, 255, 0.08);
  animation: fadeInUp 1s var(--ease) 0.35s both;
  transition: box-shadow var(--dur-slow) var(--ease),
              transform var(--dur-slow) var(--ease);
}

.ap-identity-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 36px 80px rgba(0, 0, 0, 0.5),
    0 0 30px rgba(88, 166, 255, 0.1);
}

/* Photo area */
.ap-id-photo {
  position: relative;
  background: linear-gradient(135deg, #0D2137 0%, #0E3060 50%, #0A192F 100%);
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: var(--border);
  overflow: hidden;
}

.ap-id-photo::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(88, 166, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(88, 166, 255, 0.04) 1px, transparent 1px);
  background-size: 24px 24px;
}

.ap-id-initials {
  font-family: var(--font-serif);
  font-size: 5rem;
  font-weight: 900;
  color: var(--sky);
  position: relative;
  z-index: 1;
  text-shadow: 0 0 40px rgba(88, 166, 255, 0.4);
}

/* Decorative sparkle elements */
.ap-id-sparkle {
  position: absolute;
  color: var(--sky);
  font-size: 1rem;
  animation: sparkleFloat 3s ease-in-out infinite;
  z-index: 1;
}

.ap-id-sparkle--1 { top: 28px; right: 40px; animation-delay: 0s; }
.ap-id-sparkle--2 { bottom: 32px; left: 36px; animation-delay: 1.5s; font-size: 0.7rem; opacity: 0.6; }

@keyframes sparkleFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.7; }
  50%       { transform: translateY(-6px) rotate(20deg); opacity: 1; }
}

/* Card body */
.ap-id-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ap-id-name {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--white);
  line-height: 1;
}

.ap-id-role {
  font-size: 0.9rem;
  color: var(--gray-muted);
  line-height: 1.4;
}

.ap-id-location {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--sky);
  letter-spacing: 0.08em;
}

/* Training progress */
.ap-id-training {
  background: rgba(88, 166, 255, 0.05);
  border: var(--border-sky);
  border-radius: 6px;
  padding: 12px;
}

.ap-training-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.ap-training-label span:first-child {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--white);
}

.ap-training-pct {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: #3FB950;
  letter-spacing: 0.1em;
  animation: pulseLive 2s ease-in-out infinite;
}

@keyframes pulseLive {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}

.ap-training-track {
  height: 4px;
  background: rgba(88, 166, 255, 0.15);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 6px;
}

.ap-training-fill {
  height: 100%;
  width: 60%; /* ~60% through 18 weeks */
  background: linear-gradient(to right, var(--electric), var(--sky));
  border-radius: 2px;
  animation: fillGrow 1.5s var(--ease) 0.8s both;
  transform-origin: left;
}

@keyframes fillGrow {
  from { width: 0; }
  to   { width: 60%; }
}

.ap-training-sub {
  font-family: var(--font-mono);
  font-size: 0.63rem;
  color: var(--gray-dark);
  letter-spacing: 0.1em;
}

/* Credential chips */
.ap-id-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ap-chip {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  padding: 3px 9px;
  border-radius: 3px;
  border: var(--border-sky);
  color: var(--sky);
  background: rgba(88, 166, 255, 0.07);
  display: flex;
  align-items: center;
  gap: 5px;
}

.ap-chip--verified {
  border-color: rgba(63, 185, 80, 0.4);
  color: #3FB950;
  background: rgba(63, 185, 80, 0.07);
}

.ap-profile-img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* This is the magic rule! It ensures your photo fills the box without stretching or squishing your face */
  position: relative;
  z-index: 2; /* This ensures your photo sits above the background grid */
}

/* ----------------------------------------------------------------
   AP: BIOGRAPHY SECTION
---------------------------------------------------------------- */
.ap-bio {
  background: var(--navy-mid);
  border-top: var(--border);
  border-bottom: var(--border);
}

/* Two-column layout: sidebar number + main content */
.ap-bio-layout {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 0 clamp(24px, 5vw, 64px);
  align-items: start;
}

/* Sticky sidebar with section number */
.ap-bio-sidebar {
  position: sticky;
  top: calc(72px + 24px); /* header height + offset */
  padding-top: 6px;
}

.ap-bio-sidebar-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.ap-sidebar-tag {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sky);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
}

.ap-sidebar-line {
  width: 1px;
  height: 60px;
  background: linear-gradient(to bottom, var(--sky), transparent);
}

.ap-sidebar-num {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  font-weight: 900;
  -webkit-text-stroke: 1px rgba(88, 166, 255, 0.35);
  color: transparent;
  user-select: none;
}

/* Bio heading */
.ap-bio-heading {
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 2.5rem;
}

/* Bio content column */
.ap-bio-content { min-width: 0; }

/* Chapter blocks */
.ap-chapter {
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(30, 58, 95, 0.6);
}

.ap-chapter:last-of-type { border-bottom: none; }

.ap-chapter-marker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.ap-chapter-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sky);
  box-shadow: 0 0 10px rgba(88, 166, 255, 0.5);
  flex-shrink: 0;
}

.ap-chapter-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sky);
}

.ap-chapter p {
  font-size: 0.97rem;
  color: var(--gray);
  line-height: 1.85;
  max-width: 68ch;
}

/* Bio stat cards (horizontal scrolling row) */
.ap-bio-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 2.5rem;
}

.ap-bio-stat-card {
  background: var(--navy-light);
  border: var(--border);
  border-left: 2px solid var(--electric);
  border-radius: 4px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color var(--dur) var(--ease-fast),
              box-shadow var(--dur) var(--ease-fast);
}

.ap-bio-stat-card:hover {
  border-left-color: var(--sky);
  box-shadow: 0 4px 20px rgba(88, 166, 255, 0.1);
}

.ap-bsc-num {
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 700;
  color: var(--white);
  line-height: 1;
}

.ap-bsc-label {
  font-size: 0.78rem;
  color: var(--gray-muted);
  line-height: 1.4;
}


/* ----------------------------------------------------------------
   AP: SKILLS SECTION
---------------------------------------------------------------- */
.ap-skills {
  background: var(--navy);
}

/* Header row reuses the sidebar pattern */
.ap-skills-header {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 0 clamp(24px, 5vw, 64px);
  margin-bottom: clamp(40px, 6vw, 72px);
  align-items: start;
}

.ap-skills-heading-block { min-width: 0; }

.ap-skills-title {
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 0.75rem;
}

.ap-skills-intro {
  font-size: 0.95rem;
  color: var(--gray-muted);
  max-width: 55ch;
}

/* Three-column skills grid — asymmetric widths */
.ap-skills-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr 0.85fr;
  gap: 0;
  border: var(--border);
  border-radius: 8px;
  overflow: hidden;
}

/* Each cluster */
.ap-skill-cluster {
  padding: clamp(24px, 4vw, 36px);
  border-right: var(--border);
  display: flex;
  flex-direction: column;
  gap: 0;
}

.ap-skill-cluster:last-child { border-right: none; }

/* Subtle top accent colour per cluster */
.ap-skill-cluster--cloud  { border-top: 2px solid var(--sky); }
.ap-skill-cluster--dev    { border-top: 2px solid var(--electric); }
.ap-skill-cluster--design { border-top: 2px solid rgba(88, 166, 255, 0.4); }

/* Cluster header */
.ap-cluster-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: var(--border);
}

.ap-cluster-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  margin-top: 4px;
}

.ap-cluster-icon svg { width: 32px; height: 32px; }

.ap-cluster-num {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--sky);
  letter-spacing: 0.15em;
  margin-bottom: 4px;
}

.ap-cluster-title {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--white);
  line-height: 1.25;
}

/* Individual skill items */
.ap-skill-items {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1;
}

.ap-skill-item {
  padding: 14px 0;
  border-bottom: 1px solid rgba(30, 58, 95, 0.5);
  transition: background var(--dur) var(--ease-fast);
}

.ap-skill-item:last-of-type { border-bottom: none; }

.ap-skill-item--featured {
  /* Slightly elevated first item */
}

.ap-skill-item-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}

.ap-skill-name {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--white);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Skill proficiency bar */
.ap-skill-bar-wrap {
  flex: 1;
  height: 3px;
  background: rgba(88, 166, 255, 0.12);
  border-radius: 2px;
  overflow: hidden;
  max-width: 100px;
}

.ap-skill-bar {
  height: 100%;
  width: 0; /* starts at 0; JS animates to --skill-w on scroll */
  background: linear-gradient(to right, var(--electric), var(--sky));
  border-radius: 2px;
  transition: width 1.1s var(--ease);
}

.ap-skill-bar--animated {
  width: var(--skill-w);
}

.ap-skill-desc {
  font-size: 0.76rem;
  color: var(--gray-dark);
  line-height: 1.5;
  display: block;
}

/* "Currently Studying" badge inside cloud cluster */
.ap-cluster-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  padding: 12px 14px;
  background: rgba(88, 166, 255, 0.05);
  border: var(--border-sky);
  border-radius: 6px;
  position: relative;
  overflow: hidden;
}

.ap-cluster-badge::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(88, 166, 255, 0.04), transparent);
  animation: badgeSheen 3s ease-in-out infinite;
}

@keyframes badgeSheen {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.ap-cluster-badge-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
}

.ap-cluster-badge-text span {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--gray-dark);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ap-cluster-badge-text strong {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--sky);
  font-weight: 500;
  letter-spacing: 0.06em;
}

/* Live blinking dot */
.ap-badge-live {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3FB950;
  box-shadow: 0 0 8px rgba(63, 185, 80, 0.6);
  flex-shrink: 0;
  animation: livePulse 1.5s ease-in-out infinite;
}

@keyframes livePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(0.85); }
}

/* Language card inside dev cluster */
.ap-lang-card {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  padding: 12px 14px;
  background: rgba(31, 111, 235, 0.07);
  border: 1px solid rgba(31, 111, 235, 0.25);
  border-radius: 6px;
}

.ap-lang-flag { font-size: 1.4rem; flex-shrink: 0; }

.ap-lang-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ap-lang-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--white);
}

.ap-lang-sub {
  font-size: 0.72rem;
  color: var(--gray-muted);
  line-height: 1.4;
}

/* Additional tools chip list */
.ap-tools-list {
  margin-top: 20px;
  padding-top: 16px;
  border-top: var(--border);
}

.ap-tools-label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gray-dark);
  margin-bottom: 10px;
}

.ap-tools-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ap-tool-chip {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  padding: 3px 8px;
  border-radius: 3px;
  border: var(--border);
  color: var(--gray-muted);
  background: rgba(255, 255, 255, 0.02);
  letter-spacing: 0.05em;
  transition: border-color var(--dur) var(--ease-fast),
              color var(--dur) var(--ease-fast);
}

.ap-tool-chip:hover {
  border-color: var(--sky);
  color: var(--sky);
}


/* ----------------------------------------------------------------
   AP: CTA STRIP
---------------------------------------------------------------- */
.ap-cta-strip {
  background: var(--navy-light);
  border-top: var(--border);
}

.ap-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
}

.ap-cta-title {
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  line-height: 1.2;
  margin-top: 0.5rem;
}

.ap-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  flex-shrink: 0;
}


/* ----------------------------------------------------------------
   AP: RESPONSIVE — Tablet (max 900px)
---------------------------------------------------------------- */
@media (max-width: 900px) {

  .ap-hero-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .ap-identity-card { max-width: 420px; }

  .ap-bio-layout,
  .ap-skills-header {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .ap-bio-sidebar {
    position: static;
    flex-direction: row;
    display: flex;
  }

  .ap-bio-sidebar-inner {
    flex-direction: row;
    align-items: center;
    gap: 10px;
  }

  .ap-sidebar-tag {
    writing-mode: horizontal-tb;
    transform: none;
  }

  .ap-sidebar-line {
    width: 40px;
    height: 1px;
    background: linear-gradient(to right, var(--sky), transparent);
  }

  .ap-bio-stats {
    grid-template-columns: repeat(3, 1fr);
  }

  .ap-skills-grid {
    grid-template-columns: 1fr;
    border-radius: 4px;
  }

  .ap-skill-cluster {
    border-right: none;
    border-bottom: var(--border);
  }

  .ap-skill-cluster:last-child { border-bottom: none; }
}


/* ----------------------------------------------------------------
   AP: RESPONSIVE — Mobile (max 600px)
---------------------------------------------------------------- */
@media (max-width: 600px) {

  .ap-hero { padding-top: 90px; }

  .ap-hero-title { font-size: 2rem; }

  .ap-identity-card { max-width: 100%; }

  .ap-id-photo { height: 160px; }

  .ap-bio-stats {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .ap-bsc-num { font-size: 1.6rem; }

  .ap-cluster-header { flex-direction: column; gap: 8px; }

  .ap-skill-item-top { flex-direction: column; align-items: flex-start; gap: 6px; }

  .ap-skill-bar-wrap { width: 100%; max-width: 100%; }

  .ap-cta-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .ap-cta-actions .btn {
    width: 100%;
    justify-content: center;
  }
}

.portfolio-project-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  border-radius: inherit;
}

/* ================================================================
   END — ABOUT PAGE ADDITIONS
================================================================ */

/* ================================================================
   IMAGE INTEGRATION — CSS ADDITIONS
   Append this block to the END of your existing styles.css.

   Covers:
     1. .hp-profile-img       — profile photo in the About section
     2. .hp-bio-cta           — "Read Full Biography" button spacing
     3. .portfolio-project-img — LPD&M screenshot inside the project card
   ================================================================ */


/* ----------------------------------------------------------------
   1. Homepage Profile Photo
   Target: <img class="hp-profile-img"> inside .photo-placeholder

   The parent .photo-placeholder already has:
     aspect-ratio: 3/4
     overflow: hidden
     border-radius: 4px
     position: relative   ← ensures the img is clipped correctly

   We set position to relative on the placeholder so overflow:hidden
   clips the img cleanly, then fill it completely with object-fit.
---------------------------------------------------------------- */
.photo-placeholder {
  /* Override the flex-centering from the original placeholder styles
     now that a real image fills the space */
  display: block;
  padding: 0;
}

.hp-profile-img {
  object-fit: cover;        /* fills the box, cropping edges rather than squishing */
  object-position: top;     /* anchor to face/top of the photo */
  width: 100%;
  height: 100%;
  display: block;
  border-radius: inherit;   /* inherits the 4px from .photo-placeholder */
  z-index: 2;               /* sits above any pseudo-element backgrounds */
  position: relative;       /* needed for z-index to take effect */
}


/* ----------------------------------------------------------------
   2. Biography CTA button spacing
   Target: <a class="btn btn-secondary hp-bio-cta"> inside .stack-tags

   The button lives inside the stack-tags flex container.
   We pull it out of the flex flow and give it top breathing room.
---------------------------------------------------------------- */
.hp-bio-cta {
  margin-top: 1.5rem;
  /* Make it a block-level element so it breaks onto its own line
     below the tag chips, regardless of the flex parent */
  display: inline-flex;
  align-self: flex-start;
}


/* ----------------------------------------------------------------
   3. Portfolio Project Screenshot
   Target: <img class="portfolio-project-img"> inside .proj-img

   .proj-img already has:
     position: relative
     border-radius: 8px
     overflow: hidden
     aspect-ratio: 16/10

   The image must fill that container absolutely so the aspect-ratio
   is honoured and the screenshot is not distorted.
---------------------------------------------------------------- */
.portfolio-project-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;        /* fill the 16:10 frame, crop if needed */
  object-position: top;     /* show the top of the screenshot (nav + hero) */
  border-radius: inherit;   /* matches the 8px of .proj-img */
  display: block;
  /* Subtle hover zoom — paired with .proj-img:hover transform */
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Slight Ken-Burns zoom on card hover for a premium feel */
.proj-img:hover .portfolio-project-img {
  transform: scale(1.04);
}

/* ================================================================
   END — IMAGE INTEGRATION ADDITIONS
================================================================ */



/* ================================================================
   SERVICES PAGE — CSS ADDITIONS  (services.html)
   Append this entire block to the END of your existing styles.css.

   All classes prefixed with "sp-" — zero conflict with existing code.

   Relies entirely on existing CSS variables:
     --navy, --navy-mid, --navy-light, --navy-border,
     --gray, --gray-muted, --gray-dark,
     --sky, --sky-glow, --electric, --electric-dim,
     --white, --font-serif, --font-sans, --font-mono,
     --border, --border-sky, --ease, --ease-fast,
     --dur, --dur-slow, --section-py, --inner-max, --gutter
================================================================ */


/* ----------------------------------------------------------------
   SP: Active nav state
---------------------------------------------------------------- */
.nav-link--active {
  color: var(--sky) !important;
}
.nav-link--active::after {
  width: 100% !important;
}


/* ----------------------------------------------------------------
   SP: HERO SECTION
---------------------------------------------------------------- */
.sp-hero {
  position: relative;
  padding-top: 110px;
  padding-bottom: clamp(48px, 8vw, 80px);
  border-bottom: var(--border);
  overflow: hidden;
}

.sp-hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* Dual radial glows — one left, one right for depth */
.sp-hero-glow {
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  pointer-events: none;
}

.sp-hero-glow--left {
  top: -100px;
  left: -120px;
  background: radial-gradient(circle,
    rgba(31, 111, 235, 0.12) 0%,
    transparent 65%);
}

.sp-hero-glow--right {
  bottom: -80px;
  right: -100px;
  background: radial-gradient(circle,
    rgba(88, 166, 255, 0.08) 0%,
    transparent 65%);
}

.sp-hero-inner {
  position: relative;
  z-index: 1;
  max-width: var(--inner-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Breadcrumb */
.sp-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray-dark);
  margin-bottom: 2.5rem;
}
.sp-breadcrumb a {
  color: var(--gray-dark);
  transition: color var(--dur) var(--ease-fast);
}
.sp-breadcrumb a:hover { color: var(--sky); }
.sp-breadcrumb span[aria-current="page"] { color: var(--sky); }

/* Two-column hero grid */
.sp-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(40px, 7vw, 100px);
  align-items: start;
  margin-bottom: clamp(40px, 6vw, 64px);
}

/* Left: huge editorial title */
.sp-hero-title {
  font-family: var(--font-serif);
  font-size: clamp(3rem, 7vw, 6rem);
  font-weight: 900;
  line-height: 1.05;
  color: var(--white);
  margin-top: 1rem;
  animation: fadeInUp 0.8s var(--ease) 0.1s both;
}

/* Right column */
.sp-hero-right {
  padding-top: 0.5rem;
  animation: fadeInUp 0.9s var(--ease) 0.2s both;
}

.sp-hero-sub {
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  color: var(--gray-muted);
  line-height: 1.8;
  margin-bottom: 2rem;
  max-width: 52ch;
}

/* Quick-jump pills */
.sp-quickjump {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 2.5rem;
}

.sp-qj-pill {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sky);
  border: var(--border-sky);
  border-radius: 20px;
  padding: 6px 16px;
  background: rgba(88, 166, 255, 0.06);
  transition:
    background var(--dur) var(--ease-fast),
    color var(--dur) var(--ease-fast),
    border-color var(--dur) var(--ease-fast);
  text-decoration: none;
}
.sp-qj-pill:hover {
  background: var(--sky);
  color: var(--navy);
  border-color: var(--sky);
}

/* Key metrics row */
.sp-hero-metrics {
  display: flex;
  align-items: center;
  gap: 0;
  padding-top: 1.5rem;
  border-top: var(--border);
}

.sp-metric {
  display: flex;
  flex-direction: column;
  padding-right: 2rem;
}

.sp-metric-num {
  font-family: var(--font-serif);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--white);
  line-height: 1;
}

.sp-metric-unit {
  font-size: 1rem;
  color: var(--sky);
}

.sp-metric-label {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gray-dark);
  margin-top: 4px;
}

.sp-metric-div {
  width: 1px;
  height: 40px;
  background: var(--navy-border);
  margin-right: 2rem;
}

/* Service index strip */
.sp-hero-strip {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray-dark);
  padding-top: 1.5rem;
  border-top: var(--border);
}

.sp-strip-sep {
  display: inline-block;
  width: 32px;
  height: 1px;
  background: var(--navy-border);
  flex-shrink: 0;
}


/* ----------------------------------------------------------------
   SP: SERVICES SECTION — wrapper
---------------------------------------------------------------- */
.sp-services {
  background: var(--navy-mid);
  border-top: var(--border);
}

.sp-services-label {
  margin-bottom: 3rem;
}


/* ----------------------------------------------------------------
   SP: SERVICE CARD — base
   Each .sp-card is a full-width asymmetric panel.
---------------------------------------------------------------- */
.sp-card {
  position: relative;
  border: var(--border);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: clamp(24px, 4vw, 40px);
  background: var(--navy);
  transition:
    box-shadow var(--dur-slow) var(--ease),
    border-color var(--dur-slow) var(--ease);
}

.sp-card:hover {
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

/* Coloured top-border accent per service */
.sp-card--cloud  { border-top: 2px solid var(--sky); }
.sp-card--stack  { border-top: 2px solid var(--electric); }
.sp-card--python { border-top: 2px solid rgba(88, 166, 255, 0.5); }

/* Ghost index number — editorial offset */
.sp-card-index {
  position: absolute;
  top: -20px;
  right: 32px;
  font-family: var(--font-serif);
  font-size: clamp(5rem, 12vw, 9rem);
  font-weight: 900;
  line-height: 1;
  -webkit-text-stroke: 1px rgba(88, 166, 255, 0.12);
  color: transparent;
  user-select: none;
  pointer-events: none;
  z-index: 0;
}

/* Card body: two columns */
.sp-card-body {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 0;
  position: relative;
  z-index: 1;
}

/* Left: lead column */
.sp-card-lead {
  padding: clamp(28px, 4vw, 48px);
  border-right: var(--border);
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Service icon */
.sp-card-icon {
  width: 56px;
  height: 56px;
  margin-bottom: 20px;
}
.sp-card-icon svg { width: 56px; height: 56px; }

/* Category tag */
.sp-card-category {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sky);
  margin-bottom: 12px;
  display: block;
}

/* Service title */
.sp-card-title {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 2.5vw, 2.1rem);
  font-weight: 700;
  color: var(--white);
  line-height: 1.2;
  margin-bottom: 16px;
}

/* Description */
.sp-card-desc {
  font-size: 0.93rem;
  color: var(--gray-muted);
  line-height: 1.82;
  flex: 1;
  margin-bottom: 28px;
  max-width: 55ch;
}

.sp-card-cta-row {
  margin-top: auto;
}

/* Right: detail column */
.sp-card-detail {
  padding: clamp(28px, 4vw, 48px);
  background: rgba(255, 255, 255, 0.015);
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* Deliverables list */
.sp-del-heading {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gray-dark);
  margin-bottom: 14px;
}

.sp-del-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sp-del-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.875rem;
  color: var(--gray);
  line-height: 1.55;
}

.sp-del-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 1px;
}
.sp-del-icon svg { width: 16px; height: 16px; }

/* Capability / tech chips */
.sp-cap-heading {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gray-dark);
  margin-bottom: 10px;
}

.sp-caps {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.sp-cap {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  border-radius: 3px;
  border: var(--border);
  color: var(--gray-muted);
  background: rgba(255, 255, 255, 0.02);
  transition:
    border-color var(--dur) var(--ease-fast),
    color var(--dur) var(--ease-fast),
    background var(--dur) var(--ease-fast);
}

.sp-cap:hover {
  border-color: var(--sky);
  color: var(--sky);
  background: rgba(88, 166, 255, 0.06);
}

.sp-cap--highlight {
  border-color: rgba(88, 166, 255, 0.35);
  color: var(--sky);
  background: rgba(88, 166, 255, 0.08);
}

/* Capability grid: split two columns (full-stack card) */
.sp-stack-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* SLA badge */
.sp-sla-badge {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: rgba(88, 166, 255, 0.05);
  border: var(--border-sky);
  border-radius: 6px;
}

.sp-sla-num {
  font-family: var(--font-serif);
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--white);
  line-height: 1;
  white-space: nowrap;
}
.sp-sla-num span {
  font-size: 1.2rem;
  color: var(--sky);
}

.sp-sla-label {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.sp-sla-label strong {
  font-size: 0.88rem;
  color: var(--white);
  font-weight: 600;
}
.sp-sla-label span {
  font-size: 0.75rem;
  color: var(--gray-muted);
}

/* Capability grid (automation) */
.sp-capability-grid {}

.sp-usecase-grid {}

.sp-usecases {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.sp-usecase {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: var(--border);
  border-radius: 4px;
  font-size: 0.9rem;
  color: var(--gray);
  background: var(--navy-light);
  transition: border-color var(--dur) var(--ease-fast);
}
.sp-usecase:hover { border-color: var(--sky); }

.sp-usecase-icon {
  font-size: 1rem;
  flex-shrink: 0;
}


/* ----------------------------------------------------------------
   SP: PROCESS SECTION
---------------------------------------------------------------- */
.sp-process {
  background: var(--navy);
  border-top: var(--border);
}

.sp-process-header {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(32px, 6vw, 80px);
  align-items: start;
  margin-bottom: clamp(48px, 7vw, 80px);
}

.sp-process-title {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4.5vw, 3.6rem);
  font-weight: 700;
  line-height: 1.15;
  margin-top: 1rem;
  min-width: 200px;
}

.sp-process-intro {
  font-size: 1rem;
  color: var(--gray-muted);
  line-height: 1.8;
  max-width: 55ch;
  align-self: end;
  padding-bottom: 4px;
}

/* Timeline container */
.sp-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Individual step */
.sp-step {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 0;
  align-items: start;
}

/* Left column: number + connecting line */
.sp-step-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 28px;
}

.sp-step-num {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 700;
  -webkit-text-stroke: 1px rgba(88, 166, 255, 0.4);
  color: transparent;
  user-select: none;
  margin-bottom: 12px;
}

.sp-step-connector {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  gap: 0;
}

.sp-step-line {
  width: 1px;
  flex: 1;
  min-height: 80px;
  background: linear-gradient(to bottom, var(--sky), rgba(88, 166, 255, 0.1));
  margin-bottom: 0;
}

.sp-step-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--sky);
  box-shadow: 0 0 12px rgba(88, 166, 255, 0.5);
  flex-shrink: 0;
  margin-bottom: 20px;
}

.sp-step-connector--final {
  min-height: unset;
}

.sp-step-dot--final {
  background: #3FB950;
  box-shadow: 0 0 12px rgba(63, 185, 80, 0.5);
  margin-bottom: 0;
}

/* Step card */
.sp-step-card {
  background: var(--navy-light);
  border: var(--border);
  border-radius: 8px;
  padding: clamp(24px, 3.5vw, 40px);
  margin-bottom: 24px;
  transition:
    border-color var(--dur-slow) var(--ease),
    box-shadow var(--dur-slow) var(--ease);
}

.sp-step-card:hover {
  border-color: rgba(88, 166, 255, 0.3);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

/* Accent on middle step */
.sp-step-card--mid {
  border-left: 2px solid var(--electric);
}

.sp-step-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

.sp-step-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}
.sp-step-icon svg { width: 32px; height: 32px; }

.sp-step-title {
  font-family: var(--font-serif);
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  font-weight: 700;
  color: var(--white);
  line-height: 1.2;
}

.sp-step-desc {
  font-size: 0.975rem;
  color: var(--gray-muted);
  line-height: 1.82;
  margin-bottom: 20px;
  max-width: 65ch;
}

/* Output chips */
.sp-step-outputs {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 18px;
}

.sp-step-output {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.07em;
  padding: 4px 10px;
  border-radius: 3px;
  border: 1px solid rgba(88, 166, 255, 0.2);
  color: var(--sky);
  background: rgba(88, 166, 255, 0.05);
}

/* Duration */
.sp-step-duration {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 16px;
  border-top: var(--border);
}

.sp-dur-label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray-dark);
}

.sp-dur-value {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--white);
  font-weight: 500;
}

/* Go-live indicator */
.sp-golive {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 10px 14px;
  background: rgba(63, 185, 80, 0.07);
  border: 1px solid rgba(63, 185, 80, 0.25);
  border-radius: 4px;
  font-size: 0.82rem;
  color: #3FB950;
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
}

.sp-golive-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3FB950;
  box-shadow: 0 0 8px rgba(63, 185, 80, 0.6);
  animation: livePulse 1.5s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes livePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(0.8); }
}


/* ----------------------------------------------------------------
   SP: CLOSING CTA BAND
---------------------------------------------------------------- */
.sp-cta-band {
  background: var(--navy-light);
  border-top: var(--border);
}

.sp-cta-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
}

.sp-cta-title {
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--white);
  margin: 0.5rem 0 1rem;
}

.sp-cta-sub {
  font-size: 0.92rem;
  color: var(--gray-muted);
  line-height: 1.75;
  max-width: 52ch;
}

.sp-cta-right {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 220px;
}

.sp-cta-btn {
  justify-content: center;
}

/* Trust signals row */
.sp-trust-row {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding-top: 12px;
  border-top: var(--border);
}

.sp-trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  color: var(--gray-muted);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}


/* ----------------------------------------------------------------
   SP: RESPONSIVE — Tablet (max-width: 900px)
---------------------------------------------------------------- */
@media (max-width: 900px) {

  .sp-hero-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .sp-hero-title { font-size: clamp(2.4rem, 8vw, 4rem); }

  .sp-card-body {
    grid-template-columns: 1fr;
  }

  .sp-card-lead {
    border-right: none;
    border-bottom: var(--border);
  }

  .sp-stack-split {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .sp-process-header {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .sp-step {
    grid-template-columns: 64px 1fr;
  }

  .sp-cta-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}


/* ----------------------------------------------------------------
   SP: RESPONSIVE — Mobile (max-width: 600px)
---------------------------------------------------------------- */
@media (max-width: 600px) {

  .sp-hero { padding-top: 90px; }

  .sp-hero-title { font-size: 2.4rem; }

  .sp-hero-metrics {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .sp-metric-div { display: none; }
  .sp-metric { padding-right: 0; }

  .sp-hero-strip { display: none; }

  .sp-card-index { display: none; }

  .sp-card-lead,
  .sp-card-detail {
    padding: 24px 20px;
  }

  .sp-usecases { grid-template-columns: 1fr; }

  .sp-step {
    grid-template-columns: 48px 1fr;
  }

  .sp-step-left { padding-top: 20px; }

  .sp-step-card { padding: 20px; }

  .sp-sla-badge {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .sp-cta-right .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ================================================================
   END — SERVICES PAGE ADDITIONS
================================================================ */

/* ================================================================
   CONTACT PAGE — CSS ADDITIONS  (contact.html)
   Append this entire block to the END of your existing styles.css.

   All classes prefixed with "cp-" — zero conflict with existing code.

   Relies entirely on existing CSS variables:
     --navy, --navy-mid, --navy-light, --navy-border,
     --gray, --gray-muted, --gray-dark,
     --sky, --sky-glow, --electric, --electric-dim,
     --white, --font-serif, --font-sans, --font-mono,
     --border, --border-sky, --ease, --ease-fast,
     --dur, --dur-slow, --inner-max, --gutter
================================================================ */


/* ----------------------------------------------------------------
   CP: Active nav link state
---------------------------------------------------------------- */
/* .nav-link--active is already defined in about-styles-addition.css
   If that file is not yet in your styles.css, add this:

.nav-link--active {
  color: var(--sky) !important;
}
.nav-link--active::after {
  width: 100% !important;
}
*/


/* ----------------------------------------------------------------
   CP: PAGE LAYOUT
   Full-height split: left panel + right form panel
   Uses CSS Grid so both columns stretch to the viewport height.
---------------------------------------------------------------- */
.page-contact {
  /* Ensure the body itself stretches so the split fills the screen */
  min-height: 100svh;
}

.cp-page-wrap {
  display: grid;
  /* Left: fixed editorial column, Right: form takes remaining space */
  grid-template-columns: minmax(320px, 480px) 1fr;
  min-height: calc(100svh - 72px); /* subtract header height */
  margin-top: 72px; /* clear the sticky header */
}


/* ----------------------------------------------------------------
   CP: LEFT PANEL — The Pitch
---------------------------------------------------------------- */
.cp-left {
  position: relative;
  background: var(--navy-light);
  border-right: var(--border);
  overflow: hidden;
}

/* Animated background (grid-overlay reused from homepage) */
.cp-left-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* Radial glow — bottom-left origin */
.cp-left-glow {
  position: absolute;
  bottom: -100px;
  left: -60px;
  width: 480px;
  height: 480px;
  background: radial-gradient(circle,
    rgba(31, 111, 235, 0.14) 0%,
    transparent 65%);
  pointer-events: none;
}

/* Floating node dots — mirrors homepage hero nodes */
.cp-node {
  position: absolute;
  border-radius: 50%;
  background: var(--sky);
  box-shadow: 0 0 12px var(--sky), 0 0 4px var(--sky);
  animation: cpNodePulse 4s ease-in-out infinite;
}

.cp-n1 { width: 7px;  height: 7px;  top: 15%;  left: 14%; animation-delay: 0s; }
.cp-n2 { width: 10px; height: 10px; top: 38%;  left: 52%; animation-delay: 0.8s; }
.cp-n3 { width: 6px;  height: 6px;  top: 72%;  left: 28%; animation-delay: 1.6s; }

@keyframes cpNodePulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50%       { opacity: 1;   transform: scale(1.55); }
}

/* SVG connection lines */
.cp-node-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.cp-conn-line {
  stroke: rgba(88, 166, 255, 0.1);
  stroke-width: 1;
  stroke-dasharray: 5 4;
  animation: cpDashFlow 10s linear infinite;
}

@keyframes cpDashFlow {
  from { stroke-dashoffset: 80; }
  to   { stroke-dashoffset: 0; }
}

/* Left inner content */
.cp-left-inner {
  position: relative;
  z-index: 1;
  padding: clamp(40px, 6vw, 72px) clamp(28px, 5vw, 56px);
  display: flex;
  flex-direction: column;
  gap: 0;
  height: 100%;
}

/* Breadcrumb */
.cp-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray-dark);
  margin-bottom: 2rem;
}
.cp-breadcrumb a {
  color: var(--gray-dark);
  transition: color var(--dur) var(--ease-fast);
}
.cp-breadcrumb a:hover { color: var(--sky); }
.cp-breadcrumb span[aria-current="page"] { color: var(--sky); }

/* Section tag override — adds bottom margin */
.cp-tag {
  margin-bottom: 1.25rem;
  display: inline-block;
}

/* Main heading */
.cp-heading {
  font-family: var(--font-serif);
  font-size: clamp(2.4rem, 4.5vw, 3.8rem);
  font-weight: 900;
  line-height: 1.08;
  color: var(--white);
  margin-bottom: 1.75rem;
  animation: fadeInUp 0.8s var(--ease) 0.1s both;
}

/* Pitch paragraphs */
.cp-pitch {
  font-size: 0.93rem;
  color: var(--gray-muted);
  line-height: 1.82;
  margin-bottom: 1rem;
  max-width: 48ch;
  animation: fadeInUp 0.9s var(--ease) 0.2s both;
}

.cp-pitch--secondary {
  font-size: 0.85rem;
  color: var(--gray-dark);
  margin-bottom: 2.5rem;
}

/* Contact list */
.cp-contact-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 2.5rem;
  font-style: normal;
  animation: fadeInUp 1s var(--ease) 0.3s both;
}

.cp-contact-item {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  padding: 12px 16px;
  border: var(--border);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.02);
  transition:
    border-color var(--dur) var(--ease-fast),
    background var(--dur) var(--ease-fast),
    transform 0.2s var(--ease);
}

.cp-contact-item:hover {
  border-color: rgba(88, 166, 255, 0.35);
  background: rgba(88, 166, 255, 0.05);
  transform: translateX(4px);
}

.cp-contact-item--static:hover {
  /* Location is not a link — suppress hover interaction */
  transform: none;
  cursor: default;
  border-color: var(--navy-border);
  background: rgba(255, 255, 255, 0.02);
}

.cp-contact-icon {
  width: 20px;
  height: 20px;
  color: var(--sky);
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.cp-contact-icon svg { width: 20px; height: 20px; }

.cp-contact-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.cp-contact-label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gray-dark);
}

.cp-contact-value {
  font-size: 0.88rem;
  color: var(--white);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Trust signals */
.cp-trust {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
  padding-top: 2rem;
  border-top: var(--border);
  animation: fadeInUp 1s var(--ease) 0.45s both;
}

.cp-trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--gray-muted);
}


/* ----------------------------------------------------------------
   CP: RIGHT PANEL — The Form
---------------------------------------------------------------- */
.cp-right {
  background: var(--navy);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(40px, 5vw, 72px) clamp(24px, 5vw, 64px);
  overflow-y: auto;
}

.cp-form-wrap {
  width: 100%;
  max-width: 640px;
}

/* Form header */
.cp-form-header {
  margin-bottom: 2rem;
}

.cp-form-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sky);
  margin-bottom: 8px;
}

.cp-form-tag-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sky);
  box-shadow: 0 0 8px rgba(88, 166, 255, 0.6);
  animation: cpNodePulse 2s ease-in-out infinite;
}

.cp-form-sub {
  font-size: 0.85rem;
  color: var(--gray-dark);
  max-width: 100%;
}

/* ── Form field layout ── */
.cp-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  transition:
    opacity 0.3s var(--ease-fast),
    transform 0.3s var(--ease-fast);
}

/* Two-column field row */
.cp-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.cp-field-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cp-field-group--full {
  grid-column: 1 / -1;
}

/* Label */
.cp-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

.cp-required {
  color: var(--sky);
  font-size: 0.9em;
}

.cp-label-optional {
  color: var(--gray-dark);
  font-size: 0.85em;
  letter-spacing: 0;
  text-transform: none;
  font-family: var(--font-sans);
}

/* ── Input wrapper: icon + field ── */
.cp-input-wrap,
.cp-select-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.cp-input-icon {
  position: absolute;
  left: 14px;
  width: 14px;
  height: 14px;
  color: var(--gray-dark);
  pointer-events: none;
  flex-shrink: 0;
  z-index: 1;
  display: flex;
  align-items: center;
}
.cp-input-icon svg { width: 14px; height: 14px; }

/* ── Core input / select styles: glass-morphism dark ── */
.cp-input,
.cp-select,
.cp-textarea {
  width: 100%;
  background: rgba(13, 33, 55, 0.7);          /* dark glass base */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--navy-border);
  border-radius: 6px;
  color: var(--white);
  font-family: var(--font-sans);
  font-size: 0.92rem;
  line-height: 1.5;
  transition:
    border-color var(--dur) var(--ease-fast),
    box-shadow   var(--dur) var(--ease-fast),
    background   var(--dur) var(--ease-fast);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

/* Padding accounts for the left icon */
.cp-input,
.cp-select {
  height: 48px;
  padding: 0 16px 0 40px;
}

.cp-textarea {
  padding: 14px 16px;
  resize: vertical;
  min-height: 140px;
}

/* Placeholder */
.cp-input::placeholder,
.cp-textarea::placeholder {
  color: var(--gray-dark);
  font-size: 0.88rem;
}

/* Hover state */
.cp-input:hover,
.cp-select:hover,
.cp-textarea:hover {
  border-color: rgba(88, 166, 255, 0.3);
  background: rgba(13, 33, 55, 0.9);
}

/* ── FOCUS STATE: Electric Blue glow (the signature effect) ── */
.cp-input:focus,
.cp-select:focus,
.cp-textarea:focus {
  border-color: var(--electric);
  background: rgba(15, 36, 62, 0.95);
  box-shadow:
    0 0 0 3px rgba(31, 111, 235, 0.2),   /* soft outer ring */
    0 0 16px rgba(31, 111, 235, 0.12),   /* glow */
    inset 0 1px 2px rgba(0, 0, 0, 0.2);  /* subtle inner depth */
}

/* Focused icon takes on the Electric Blue colour */
.cp-input-wrap:focus-within .cp-input-icon,
.cp-select-wrap:focus-within .cp-input-icon {
  color: var(--sky);
}

/* ── Select: custom chevron ── */
.cp-select-chevron {
  position: absolute;
  right: 14px;
  width: 10px;
  height: 10px;
  color: var(--gray-dark);
  pointer-events: none;
  display: flex;
  align-items: center;
  transition: color var(--dur) var(--ease-fast);
}
.cp-select-chevron svg { width: 10px; height: 10px; }

.cp-select-wrap:focus-within .cp-select-chevron {
  color: var(--sky);
}

/* Select dropdown arrow area */
.cp-select {
  /* Padding right accounts for the custom chevron */
  padding-right: 36px;
  cursor: pointer;
}

/* Style the select option list (browser support varies; this is best-effort) */
.cp-select option {
  background: var(--navy-light);
  color: var(--white);
}

/* ── Textarea wrap (for character counter) ── */
.cp-textarea-wrap {
  position: relative;
}

.cp-char-counter {
  position: absolute;
  bottom: 10px;
  right: 12px;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--gray-dark);
  letter-spacing: 0.06em;
  pointer-events: none;
  transition: color var(--dur) var(--ease-fast);
}

.cp-char-counter--warn { color: rgba(255, 189, 46, 0.8); }
.cp-char-counter--over { color: rgba(248, 81, 73, 0.9); }

/* ── Error state ── */
.cp-input--error {
  border-color: rgba(248, 81, 73, 0.7) !important;
  box-shadow: 0 0 0 3px rgba(248, 81, 73, 0.12) !important;
}

.cp-field-error {
  font-size: 0.75rem;
  color: rgba(248, 81, 73, 0.9);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  min-height: 1em;
}

/* ── Honeypot (invisible to humans) ── */
.cp-honeypot {
  position: absolute;
  left: -9999px;
  top: -9999px;
  opacity: 0;
  pointer-events: none;
  tabindex: -1;
}

/* ── Submit row ── */
.cp-submit-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: 8px;
}

/* ── Submit button ── */
.cp-submit-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  background: var(--electric);
  color: var(--white);
  font-family: var(--font-sans);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  box-shadow: 0 4px 24px rgba(31, 111, 235, 0.4);
  overflow: hidden;
  transition:
    background var(--dur) var(--ease-fast),
    box-shadow  var(--dur) var(--ease-fast),
    transform   0.15s var(--ease-fast);
}

.cp-submit-btn::before {
  /* Shimmer sweep on hover */
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.1),
    transparent
  );
  transition: left 0.5s var(--ease);
}

.cp-submit-btn:hover::before { left: 150%; }

.cp-submit-btn:hover {
  background: var(--sky);
  color: var(--navy);
  box-shadow: 0 6px 32px rgba(88, 166, 255, 0.5);
}

.cp-submit-btn:active { transform: scale(0.97); }

.cp-btn-arrow {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  transition: transform var(--dur) var(--ease);
}
.cp-btn-arrow svg { width: 20px; height: 20px; }
.cp-submit-btn:hover .cp-btn-arrow { transform: translateX(4px); }

/* Spinner — hidden by default */
.cp-btn-spinner {
  display: none;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.cp-btn-spinner svg {
  width: 18px;
  height: 18px;
  animation: cpSpinnerRotate 0.9s linear infinite;
}

@keyframes cpSpinnerRotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Loading state: hide text/arrow, show spinner */
.cp-submit-btn--loading {
  pointer-events: none;
  opacity: 0.85;
}

.cp-submit-btn--loading .cp-btn-text,
.cp-submit-btn--loading .cp-btn-arrow {
  opacity: 0;
  width: 0;
  overflow: hidden;
}

.cp-submit-btn--loading .cp-btn-spinner {
  display: flex;
}

/* Submission note */
.cp-submit-note {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.78rem;
  color: var(--gray-dark);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  max-width: 100%;
}
.cp-submit-note svg { flex-shrink: 0; color: var(--gray-dark); }


/* ----------------------------------------------------------------
   CP: SUCCESS STATE
---------------------------------------------------------------- */
.cp-success {
  text-align: center;
  padding: clamp(40px, 6vw, 72px) 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  animation: fadeInUp 0.6s var(--ease) both;
}

.cp-success-icon {
  width: 72px;
  height: 72px;
  margin-bottom: 8px;
}
.cp-success-icon svg { width: 72px; height: 72px; }

.cp-success-title {
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  color: var(--white);
  margin: 0;
}

.cp-success-desc {
  font-size: 0.93rem;
  color: var(--gray-muted);
  line-height: 1.8;
  max-width: 48ch;
  margin: 0 0 8px;
}


/* ----------------------------------------------------------------
   CP: RESPONSIVE — Tablet (max-width: 900px)
---------------------------------------------------------------- */
@media (max-width: 900px) {

  .cp-page-wrap {
    grid-template-columns: 1fr;
    min-height: unset;
    margin-top: 72px;
  }

  .cp-left {
    border-right: none;
    border-bottom: var(--border);
  }

  /* Collapse trust signals horizontally on tablet */
  .cp-trust {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 2rem;
  }

  .cp-right {
    padding: clamp(32px, 5vw, 56px) clamp(20px, 5vw, 48px);
    align-items: flex-start;
  }
}


/* ----------------------------------------------------------------
   CP: RESPONSIVE — Mobile (max-width: 600px)
---------------------------------------------------------------- */
@media (max-width: 600px) {

  .cp-page-wrap { margin-top: 64px; }

  .cp-left-inner {
    padding: 32px 20px;
  }

  .cp-heading { font-size: 2.2rem; }

  /* Stack the two-column field rows */
  .cp-field-row {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .cp-submit-row {
    flex-direction: column;
    align-items: stretch;
  }

  .cp-submit-btn {
    justify-content: center;
    width: 100%;
  }

  .cp-trust {
    flex-direction: column;
    gap: 8px;
  }
}

/* ================================================================
   END — CONTACT PAGE ADDITIONS
================================================================ */


/* ================================================================
   END — FEATURED PROJECTS ADDITIONS
================================================================ */