/* =========================================================
   Jason Matkowsky — Portfolio
   Design tokens (brand-matched to codeapps.me) + components
   ========================================================= */

:root {
  /* Type scale */
  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1.0625rem;
  --text-lg: 1.1875rem;
  --text-xl: 1.375rem;
  --text-2xl: clamp(1.75rem, 1.4rem + 1.3vw, 2.5rem);
  --text-3xl: clamp(2.25rem, 1.7rem + 2vw, 3.5rem);
  --text-hero: clamp(2.75rem, 2rem + 3vw, 4.75rem);

  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 9rem;

  --font-display: "Space Grotesk", "Inter", sans-serif;
  --font-body: "Inter", "Space Grotesk", sans-serif;

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* Dark theme (brand default — matches live codeapps.me) */
  --bg: #020812;
  --panel: #07111f;
  --card: #0b1626;
  --card2: #0e1d31;
  --gold: #f5a900;
  --gold-soft: #d89b2b;
  --text: #ffffff;
  --muted: #a8b3c2;
  --border: rgba(255, 255, 255, 0.12);
  --shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
  --gold-rgb: 245, 169, 0;
  --scrim: rgba(2, 8, 18, 0.72);
}

[data-theme="light"] {
  --bg: #f6f4ee;
  --panel: #ffffff;
  --card: #ffffff;
  --card2: #f1eee3;
  --gold: #b3760a;
  --gold-soft: #8a5b00;
  --text: #0b1626;
  --muted: #52606d;
  --border: rgba(11, 22, 38, 0.12);
  --shadow: 0 24px 60px rgba(11, 22, 38, 0.1);
  --gold-rgb: 179, 118, 10;
  --scrim: rgba(246, 244, 238, 0.82);
}

/* ---------- Layout primitives ---------- */
.wrap {
  width: min(1400px, 92%);
  margin-inline: auto;
}

.section {
  padding-block: var(--space-2xl);
  position: relative;
}

.section-tight {
  padding-block: var(--space-xl);
}

.section-head {
  max-width: 720px;
  margin-bottom: var(--space-lg);
}

.section-head.center {
  margin-inline: auto;
  text-align: center;
}

.section-kicker {
  color: var(--gold);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.12em;
  font-size: var(--text-xs);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  margin-bottom: var(--space-sm);
  font-family: var(--font-display);
}

.section-kicker::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--gold);
  display: inline-block;
}

.section-title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.section-sub {
  color: var(--muted);
  font-size: var(--text-lg);
  margin-top: var(--space-sm);
  max-width: 60ch;
}

.section-head.center .section-sub {
  margin-inline: auto;
}

.divider {
  height: 1px;
  background: var(--border);
  width: 100%;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.9rem 1.7rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: var(--text-sm);
  font-family: var(--font-display);
  letter-spacing: 0.01em;
  white-space: nowrap;
  border: 1px solid transparent;
  text-decoration: none;
}

.btn-gold {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-soft) 100%);
  color: #100b02;
  box-shadow: 0 12px 30px rgba(var(--gold-rgb), 0.28);
}

.btn-gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 38px rgba(var(--gold-rgb), 0.38);
}

.btn-outline {
  border-color: var(--border);
  color: var(--text);
  background: rgba(255, 255, 255, 0.02);
}

.btn-outline:hover {
  border-color: rgba(var(--gold-rgb), 0.6);
  color: var(--gold);
  transform: translateY(-2px);
}

.btn-sm {
  padding: 0.65rem 1.3rem;
  font-size: var(--text-xs);
}

.btn[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
}

/* ---------- Tags ---------- */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.85rem;
  border: 1px solid rgba(var(--gold-rgb), 0.35);
  border-radius: 999px;
  color: var(--gold);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  background: rgba(var(--gold-rgb), 0.08);
}

/* =========================================================
   HEADER
   ========================================================= */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(2, 8, 18, 0.72);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--border);
  transition: background 220ms var(--ease), border-color 220ms var(--ease);
}

[data-theme="light"] .site-header {
  background: rgba(246, 244, 238, 0.82);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
  gap: var(--space-md);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
  color: var(--text);
  text-decoration: none;
  flex-shrink: 0;
}

.brand-mark {
  width: 42px;
  height: 42px;
  color: var(--gold);
  flex-shrink: 0;
}

.brand-name em {
  font-style: normal;
  color: var(--gold);
}

.brand-title {
  display: block;
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.main-nav ul {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  list-style: none;
}

.main-nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 500;
  position: relative;
  padding-block: 0.25rem;
}

.main-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 2px;
  background: var(--gold);
  transition: width 220ms var(--ease);
}

.main-nav a:hover,
.main-nav a.active {
  color: var(--text);
}

.main-nav a.active::after,
.main-nav a:hover::after {
  width: 100%;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.theme-toggle {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  flex-shrink: 0;
}

.theme-toggle:hover {
  color: var(--gold);
  border-color: rgba(var(--gold-rgb), 0.5);
}

.theme-toggle svg {
  width: 19px;
  height: 19px;
}

.icon-sun { display: none; }
[data-theme="light"] .icon-moon { display: none; }
[data-theme="light"] .icon-sun { display: block; }

.nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--border);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
}

.nav-toggle span {
  width: 18px;
  height: 2px;
  background: var(--text);
  display: block;
  transition: transform 220ms var(--ease), opacity 220ms var(--ease);
}

.nav-toggle.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 980px) {
  .site-header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--bg);
  }
  [data-theme="light"] .site-header {
    background: var(--bg);
  }
  .main-nav {
    position: fixed;
    inset: 76px 0 0 0;
    background: var(--bg);
    flex-direction: column;
    align-items: flex-start;
    padding: var(--space-lg) var(--space-md);
    gap: var(--space-lg);
    transform: translateX(100%);
    transition: transform 320ms var(--ease);
    overflow-y: auto;
  }
  .main-nav.open { transform: translateX(0); }
  .main-nav ul {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
    width: 100%;
  }
  .main-nav a { font-size: var(--text-xl); }
  .main-nav .btn { width: 100%; }
  .nav-toggle { display: flex; }
}

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative;
  padding-top: calc(76px + var(--space-2xl));
  padding-bottom: var(--space-2xl);
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 82% 8%, rgba(var(--gold-rgb), 0.16), transparent 55%),
    radial-gradient(circle at 8% 92%, rgba(var(--gold-rgb), 0.08), transparent 50%);
  pointer-events: none;
  z-index: 0;
}

.hero .wrap {
  display: grid;
  grid-template-columns: 1.05fr 0.85fr;
  gap: var(--space-2xl);
  align-items: center;
  position: relative;
  z-index: 1;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--gold);
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: var(--text-xs);
  margin-bottom: var(--space-sm);
}

.hero-eyebrow .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 4px rgba(var(--gold-rgb), 0.2);
}

.hero h1 {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-md);
}

.hero h1 .accent { color: var(--gold); }

.hero-lede {
  color: var(--muted);
  font-size: var(--text-lg);
  max-width: 52ch;
  margin-bottom: var(--space-lg);
}

.hero-actions {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-bottom: var(--space-lg);
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.hero-meta a,
.hero-meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--muted);
  font-size: var(--text-sm);
  text-decoration: none;
}

.hero-meta svg { width: 17px; height: 17px; color: var(--gold); flex-shrink: 0; }
.hero-meta a:hover { color: var(--gold); }

.hero-visual {
  position: relative;
}

.hero-portrait {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  aspect-ratio: 4 / 5;
}

.hero-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(2,8,18,0) 55%, rgba(2,8,18,0.55) 100%);
}

.hero-signature {
  position: absolute;
  bottom: var(--space-md);
  left: var(--space-md);
  right: var(--space-md);
  z-index: 2;
  color: #fff;
}

.hero-signature strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-lg);
}

.hero-signature span {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.8);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Inset glass chip — sits inside the portrait frame so the rounded
   silhouette stays unbroken. */
.hero-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  background: rgba(7, 17, 31, 0.62);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  padding: 0.65rem 0.9rem;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  z-index: 3;
}

.hero-badge svg { width: 22px; height: 22px; color: var(--gold); }
.hero-badge strong { font-family: var(--font-display); font-size: var(--text-base); display: block; }
.hero-badge span { font-size: var(--text-xs); color: #c9d2dd; }

/* the chip sits on the photo in both themes, so keep its text light */
[data-theme="light"] .hero-badge strong { color: #ffffff; }

@media (max-width: 980px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .hero-visual { max-width: 420px; margin-inline: auto; order: -1; }
  .hero-badge { top: 12px; right: 12px; padding: 0.55rem 0.8rem; }
}

/* =========================================================
   TRUSTED-BY LOGO STRIP — console panel + continuous marquee
   ========================================================= */
.trustbar {
  border: 0;
  background: transparent;
  padding-block: var(--space-lg);
}

.trustbar .wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
}

.trustbar-label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--muted);
  font-weight: 600;
  text-align: center;
}

/* ---------- The panel (glowing frame) ---------- */
.trust-panel {
  position: relative;
  width: 100%;
  padding: 2px;                 /* this padding IS the glowing border */
  border-radius: 18px;
  background:
    /* gold pooled at top-center and bottom-center */
    radial-gradient(70% 130% at 50% 0%, rgba(var(--gold-rgb), 0.85), transparent 62%),
    radial-gradient(70% 130% at 50% 100%, rgba(var(--gold-rgb), 0.85), transparent 62%),
    /* neutral hairline everywhere else */
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.05));
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.55);
  isolation: isolate;
}

/* soft gold bloom bleeding out of the top + bottom edges */
.trust-panel::before,
.trust-panel::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  height: 20px;
  background: radial-gradient(55% 100% at 50% 50%,
    rgba(var(--gold-rgb), 0.75), rgba(var(--gold-rgb), 0) 72%);
  filter: blur(11px);
  z-index: -1;
  pointer-events: none;
}
.trust-panel::before { top: -11px; }
.trust-panel::after  { bottom: -11px; }

/* machined corner notches */
.trust-panel .notch {
  position: absolute;
  width: 34px;
  height: 7px;
  background: var(--bg);
  pointer-events: none;
  z-index: 3;
}
.trust-panel .notch::after {
  content: "";
  position: absolute;
  inset: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.13);
  clip-path: inherit;
}
.notch-bl {
  bottom: 0; left: 34px;
  clip-path: polygon(7px 0, 100% 0, 100% 100%, 0 100%);
}
.notch-br {
  bottom: 0; right: 34px;
  clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 100%, 0 100%);
}

/* ---------- Inner rail ---------- */
.trust-logos {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 0;
  min-height: 74px;
  padding: 0.35rem 0;
  border-radius: 15px;
  background:
    radial-gradient(120% 220% at 50% 0%, rgba(var(--gold-rgb), 0.10), transparent 55%),
    linear-gradient(180deg, #0d1626 0%, #050c16 55%, #020812 100%);
  overflow: hidden;
  /* fade the logos into the panel edges */
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

/* inner hairline so the panel reads like machined metal */
.trust-logos::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07),
              inset 0 -1px 0 rgba(255, 255, 255, 0.04);
  pointer-events: none;
  z-index: 2;
}

/* ---------- Marquee ---------- */
.marquee-track {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  /* Duration is tuned to the number of logos so scroll SPEED stays constant.
     11 logos at 51s ~= the original 9 logos at 42s. If you add or remove a
     logo, rescale: new = 51 * (new count / 11). Same for the 760px value. */
  animation: trust-marquee 51s linear infinite;
  will-change: transform;
}

.trust-logos:hover .marquee-track { animation-play-state: paused; }

@keyframes trust-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

/* ---------- Logo items ---------- */
.trust-logos span {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.55rem 1.35rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-sm);
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: #cfd8e3;               /* brighter than --muted for near-black backgrounds */
  transition: color 220ms var(--ease), text-shadow 220ms var(--ease);
}

/* divider between items */
.trust-logos span + span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 30px;
  background: linear-gradient(180deg,
    transparent, rgba(255, 255, 255, 0.16), transparent);
}

.trust-logos svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--gold);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
}
/* Wider marks need an explicit width, since svg is locked to 22x22.
   AWS ~1.4:1; Hex is a wordmark at ~2.6:1 (240x92.31 viewBox).
   Hex carries no text label — the mark IS the name — so it runs a little
   wider than its raw aspect ratio to hold equal weight beside the
   icon+label pairs on either side. */
.trust-logos svg.logo-aws { width: 30px; }
.trust-logos svg.logo-hex { width: 64px; }

/* Hex has no label to brighten, so the mark itself takes the hover state,
   mirroring how every other item's text goes white. */
.trust-logos span:hover svg.logo-hex { color: #ffffff; }

.trust-logos span:hover {
  color: #ffffff;
  text-shadow: 0 0 18px rgba(var(--gold-rgb), 0.35);
}

/* ---------- Light theme (panel stays dark on purpose) ---------- */
[data-theme="light"] .trust-logos {
  background:
    radial-gradient(120% 220% at 50% 0%, rgba(var(--gold-rgb), 0.10), transparent 55%),
    linear-gradient(180deg, #17212f 0%, #0d1622 55%, #0b1626 100%);
}
[data-theme="light"] .trust-panel { box-shadow: 0 20px 50px rgba(11, 22, 38, 0.22); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .trust-logos span { padding: 0.5rem 1rem; font-size: var(--text-xs); }
  .trust-logos svg { width: 20px; height: 20px; }
  .trust-logos svg.logo-aws { width: 28px; }
  .trust-logos svg.logo-hex { width: 58px; }
}

@media (max-width: 760px) {
  .trust-panel { padding: 2px; border-radius: 16px; }
  .trust-panel .notch { display: none; }
  .trust-panel::before,
  .trust-panel::after { left: 22%; right: 22%; }
  .trust-logos { min-height: 62px; }
  .marquee-track { animation-duration: 37s; }   /* was 30s for 9 logos */
}

@media (prefers-reduced-motion: reduce) {
  .trust-logos span { transition: none; }
  /* stop the scroll and let the rail scroll manually instead */
  .marquee-track { animation: none; }
  .trust-logos {
    overflow-x: auto;
    scrollbar-width: none;
  }
  .trust-logos::-webkit-scrollbar { display: none; }
  .marquee-track[aria-hidden="true"] { display: none; }
}

/* =========================================================
   ABOUT + EXPERTISE
   ========================================================= */
.about-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: var(--space-2xl);
  align-items: center;
}

.about-media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

.about-media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; }

.about-copy p { color: var(--muted); font-size: var(--text-lg); margin-bottom: var(--space-md); }
.about-copy p:last-child { margin-bottom: 0; }
.about-copy strong { color: var(--text); }

@media (max-width: 900px) {
  .about-grid { grid-template-columns: 1fr; }
}

.expertise-grid {
  margin-top: var(--space-xl);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

.expertise-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}

.expertise-card:hover {
  border-color: rgba(var(--gold-rgb), 0.4);
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

.expertise-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(var(--gold-rgb), 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-sm);
  color: var(--gold);
}

.expertise-icon svg { width: 24px; height: 24px; }

.expertise-card h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  margin-bottom: 0.4rem;
}

.expertise-card p { color: var(--muted); font-size: var(--text-sm); }

@media (max-width: 900px) {
  .expertise-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .expertise-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   PROJECTS
   ========================================================= */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}

.project-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  text-decoration: none;
  color: var(--text);
  display: block;
}

.project-card:hover {
  transform: translateY(-6px);
  border-color: rgba(var(--gold-rgb), 0.45);
  box-shadow: var(--shadow);
}

.project-thumb {
  aspect-ratio: 3/2;
  overflow: hidden;
  position: relative;
}

.project-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 420ms var(--ease); }
.project-card:hover .project-thumb img { transform: scale(1.06); }

.project-body { padding: var(--space-md); }
.project-body .tag { margin-bottom: var(--space-xs); }
.project-body h3 { font-family: var(--font-display); font-size: var(--text-lg); margin-bottom: 0.4rem; }
.project-body p { color: var(--muted); font-size: var(--text-sm); }

.projects-cta { text-align: center; margin-top: var(--space-lg); }

@media (max-width: 980px) {
  .projects-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .projects-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   STATS BAR — dividers, gold hairline top edge
   Matches the Trusted Solutions panel treatment below.
   Used on index.html (5 metrics) and projects.html (4 metrics),
   so the column count MUST stay derived from the child count —
   see .stats-grid. Tuning: glow = the .10 alpha; hairline = .55.
   ========================================================= */
.stats-bar {
  position: relative;
  background:
    radial-gradient(60% 100% at 50% 0%, rgba(var(--gold-rgb), 0.10), transparent 70%),
    var(--panel);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding-block: var(--space-xl);
}

/* tapered gold hairline along the top edge */
.stats-bar::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--gold-rgb), 0.55), transparent);
}

/* One equal column per metric, however many there are. Do not
   hardcode repeat(N, 1fr) here — index.html has 5 metrics and
   projects.html has 4, and a fixed count leaves the shorter bar
   with an empty column and visibly off-centre content. */
.stats-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 0;
  text-align: center;
}

/* Fixed-height number row keeps every label on one shared baseline,
   even though the money figure uses a smaller font size. */
.metric {
  display: grid;
  grid-template-rows: 2.7rem auto;
  align-content: start;
  row-gap: 2px;
  padding-inline: var(--space-sm);
}

.metric + .metric { border-left: 1px solid var(--border); }

.metric strong {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  line-height: 1;
  white-space: nowrap;              /* never let a figure wrap */
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.2rem + 0.95vw, 2.15rem);
  color: var(--gold);
  font-weight: 700;
}

/* Opt-in smaller size for any unusually long value (e.g. a range like
   "$400K–$600K"). Not currently used — every figure fits at full size. */
.metric.is-money strong { font-size: clamp(1.15rem, 0.95rem + 0.65vw, 1.65rem); }

.metric span {
  color: #c2cbd8;                   /* --muted washes out on --panel */
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Below 980px we wrap to rows, so auto-flow must be reset to row.
   nth-child(4) is the first item of row 2 for both 4- and 5-metric bars. */
@media (max-width: 980px) {
  .stats-grid {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, 1fr);
    row-gap: var(--space-lg);
  }
  .metric:nth-child(4) { border-left: 0; }   /* first item of row 2 */
}
@media (max-width: 560px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .metric:nth-child(odd) { border-left: 0; }
  .metric:nth-child(4) { border-left: 1px solid var(--border); }
}

/* =========================================================
   CONTENT / FRAMED PASSPORT
   ========================================================= */
.content-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: center;
}

.content-media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  position: relative;
}

.content-media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; }

.content-media-badge {
  position: absolute;
  bottom: var(--space-md);
  left: var(--space-md);
  background: rgba(2,8,18,0.75);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  padding: 0.5rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #fff;
  font-size: var(--text-xs);
  font-weight: 600;
  backdrop-filter: blur(6px);
}

.content-media-badge svg { width: 16px; height: 16px; color: #ff0033; }

.content-copy .brand-lockup {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xl);
  margin-bottom: var(--space-sm);
}

.content-copy .brand-lockup svg { width: 30px; height: 30px; color: var(--gold); }

.content-copy p { color: var(--muted); font-size: var(--text-lg); margin-bottom: var(--space-md); }

.content-pillars {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-bottom: var(--space-lg);
}

.content-pillars span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: 600;
}

.content-pillars svg { width: 16px; height: 16px; color: var(--gold); }

@media (max-width: 900px) {
  .content-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   EXPERIENCE / TIMELINE
   ========================================================= */
.timeline {
  border-left: 2px solid var(--border);
  margin-left: var(--space-sm);
}

.timeline-item {
  position: relative;
  padding: 0 0 var(--space-lg) var(--space-lg);
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: var(--space-md);
}

.timeline-item:last-child { padding-bottom: 0; }

.timeline-item::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 4px var(--bg), 0 0 0 5px var(--border);
}

.timeline-year {
  color: var(--gold);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-sm);
  letter-spacing: 0.02em;
}

.timeline-role h3 { font-family: var(--font-display); font-size: var(--text-lg); margin-bottom: 0.2rem; }
.timeline-role .org { color: var(--gold-soft); font-size: var(--text-sm); font-weight: 600; margin-bottom: 0.5rem; display: block; }
.timeline-role p { color: var(--muted); font-size: var(--text-sm); }

@media (max-width: 700px) {
  .timeline-item { grid-template-columns: 1fr; gap: 0.35rem; }
}

/* =========================================================
   INSIGHTS
   ========================================================= */
.insights-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

.insight-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.insight-card:hover { border-color: rgba(var(--gold-rgb), 0.4); transform: translateY(-4px); box-shadow: var(--shadow); }

.insight-card .tag { align-self: flex-start; }
.insight-card h3 { font-family: var(--font-display); font-size: var(--text-lg); }
.insight-card p { color: var(--muted); font-size: var(--text-sm); flex: 1; }

@media (max-width: 900px) {
  .insights-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   TESTIMONIALS
   ========================================================= */
.testimonial-wrap {
  display: grid;
  grid-template-columns: 0.6fr 1.4fr;
  gap: var(--space-2xl);
  align-items: center;
}

.testimonial-media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  position: relative;
}

.testimonial-media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1/1; }

.testimonial-slider { position: relative; min-height: 220px; }

.testimonial-slide {
  display: none;
  animation: fadeIn 420ms var(--ease);
}

.testimonial-slide.active { display: block; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.testimonial-slide svg { width: 34px; height: 34px; color: var(--gold); margin-bottom: var(--space-sm); }

.testimonial-slide blockquote {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 500;
  line-height: 1.4;
  margin-bottom: var(--space-md);
}

.testimonial-slide cite {
  display: block;
  font-style: normal;
  color: var(--gold);
  font-weight: 600;
  font-size: var(--text-sm);
}

.testimonial-slide cite span { color: var(--muted); font-weight: 400; }

.testimonial-controls {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

.t-dots { display: flex; gap: 0.5rem; }
.t-dots button {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--border); padding: 0;
}
.t-dots button.active { background: var(--gold); width: 22px; border-radius: 4px; }

.t-arrow {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--text);
}
.t-arrow:hover { border-color: var(--gold); color: var(--gold); }
.t-arrow svg { width: 16px; height: 16px; }

@media (max-width: 900px) {
  .testimonial-wrap { grid-template-columns: 1fr; }
  .testimonial-media { max-width: 260px; margin-inline: auto; }
}

/* =========================================================
   CTA BANNER
   ========================================================= */
.cta-banner {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  padding: var(--space-2xl) var(--space-lg);
  text-align: center;
  isolation: isolate;
}

.cta-banner img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

.cta-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(2,8,18,0.88), rgba(2,8,18,0.94));
  z-index: -1;
}

.cta-banner h2 {
  font-family: var(--font-display);
  color: #fff;
  font-size: var(--text-3xl);
  margin-bottom: var(--space-sm);
  max-width: 720px;
  margin-inline: auto;
}

.cta-banner p { color: rgba(255,255,255,0.78); font-size: var(--text-lg); max-width: 560px; margin: 0 auto var(--space-lg); }

.cta-banner .hero-actions { justify-content: center; margin-bottom: 0; }

/* =========================================================
   CONTACT
   ========================================================= */
.contact-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-2xl);
  margin-top: var(--space-xl);
}

.contact-form {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow);
}

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); margin-bottom: var(--space-md); }

.field { display: flex; flex-direction: column; gap: 0.45rem; margin-bottom: var(--space-md); }
.field label { font-size: var(--text-sm); font-weight: 600; color: var(--text); }
.field input,
.field textarea {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1rem;
  color: var(--text);
  font-size: var(--text-sm);
  width: 100%;
}
.field input:focus,
.field textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(var(--gold-rgb), 0.15);
  outline: none;
}
.field textarea { resize: vertical; min-height: 130px; }
.field .error-msg { color: #ff6b6b; font-size: var(--text-xs); min-height: 1em; }

.form-status {
  margin-top: var(--space-sm);
  font-size: var(--text-sm);
  min-height: 1.4em;
}
.form-status.ok { color: #4ade80; }
.form-status.err { color: #ff6b6b; }

.contact-side { display: flex; flex-direction: column; gap: var(--space-md); }

.contact-info-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}

.contact-info-card h3 { font-family: var(--font-display); font-size: var(--text-lg); margin-bottom: var(--space-md); }

.contact-info-list { display: flex; flex-direction: column; gap: var(--space-sm); }
.contact-info-list a,
.contact-info-list span {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--muted);
  text-decoration: none;
  font-size: var(--text-sm);
}
.contact-info-list a:hover { color: var(--gold); }
.contact-info-list svg { width: 19px; height: 19px; color: var(--gold); flex-shrink: 0; }

.social-row { display: flex; gap: 0.6rem; margin-top: var(--space-md); }
.social-row a {
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--muted);
}
.social-row a:hover { color: var(--gold); border-color: rgba(var(--gold-rgb), 0.5); transform: translateY(-2px); }
.social-row svg { width: 19px; height: 19px; }

@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer {
  border-top: 1px solid var(--border);
  padding-block: var(--space-lg);
  background: var(--panel);
}

.footer-grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.footer-links { display: flex; flex-wrap: wrap; gap: var(--space-md); }
.footer-links a { color: var(--muted); text-decoration: none; font-size: var(--text-sm); }
.footer-links a:hover { color: var(--gold); }

.footer-copy { color: var(--muted); font-size: var(--text-sm); }

@media (max-width: 560px) {
  .footer-grid { flex-direction: column; align-items: flex-start; }
  .footer-links { gap: var(--space-sm) var(--space-md); }
}

.back-to-top {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--card);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  box-shadow: var(--shadow);
  z-index: 60;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
}

.back-to-top.visible { opacity: 1; pointer-events: auto; transform: none; }
.back-to-top svg { width: 20px; height: 20px; }
.back-to-top.near-bottom { bottom: 96px; }

@media (max-width: 560px) {
  .back-to-top { bottom: 20px; right: 16px; width: 44px; height: 44px; }
  .back-to-top.near-bottom { bottom: 88px; }
}

/* =========================================================
   MODAL (privacy/terms not needed here; used for lightweight dialogs)
   ========================================================= */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}
.reveal.in { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .section { padding-block: var(--space-xl); }
}

/* =========================================================
   PROJECTS ARCHIVE PAGE (projects.php)
   ========================================================= */
.page-hero {
  position: relative;
  padding-top: calc(76px + var(--space-2xl));
  padding-bottom: var(--space-xl);
  overflow: hidden;
}

.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 85% 10%, rgba(var(--gold-rgb), 0.16), transparent 55%),
    radial-gradient(circle at 10% 90%, rgba(var(--gold-rgb), 0.08), transparent 50%);
  pointer-events: none;
  z-index: 0;
}

.page-hero .wrap { position: relative; z-index: 1; }

.page-hero h1 {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  font-weight: 600;
  letter-spacing: -0.02em;
  max-width: 20ch;
  margin-bottom: var(--space-md);
}

.page-hero-lede {
  color: var(--muted);
  font-size: var(--text-lg);
  max-width: 68ch;
  margin-bottom: var(--space-lg);
}

.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

.filter-chip {
  padding: 0.55rem 1.15rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: var(--text-xs);
  font-family: var(--font-display);
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.01em;
  background: rgba(255, 255, 255, 0.02);
}

.filter-chip:hover { border-color: rgba(var(--gold-rgb), 0.6); color: var(--gold); }

.case-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-xl);
}

.case-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.case-card.featured { border-color: rgba(var(--gold-rgb), 0.5); box-shadow: var(--shadow); }
.case-card:hover { border-color: rgba(var(--gold-rgb), 0.4); transform: translateY(-4px); box-shadow: var(--shadow); }

.case-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.case-top .year { color: var(--muted); font-size: var(--text-xs); font-family: var(--font-display); font-weight: 600; }

.case-card h3 { font-family: var(--font-display); font-size: var(--text-lg); }
.case-card > p { color: var(--muted); font-size: var(--text-sm); }

.case-card ul { display: flex; flex-direction: column; gap: 0.45rem; margin-top: auto; padding-top: var(--space-xs); }
.case-card ul li { position: relative; padding-left: 1.1rem; color: var(--muted); font-size: var(--text-xs); list-style: none; }
.case-card ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
}

.stack-grid { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-lg); }

.stack-chip {
  padding: 0.6rem 1.15rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  font-size: var(--text-xs);
  font-family: var(--font-display);
  font-weight: 600;
}

@media (max-width: 1080px) {
  .case-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
  .case-grid { grid-template-columns: 1fr; }
  .page-hero h1 { max-width: none; }
}