/* ============================================================
   ▶ START: DESIGN TOKENS (MASTER BLOCK)
   ============================================================
   SUMMARY: Global colors, font, sizes and the animation curve
   used across the whole site. Change a value here and it
   updates everywhere. Sizes use rem so everything scales
   together when the visitor zooms. (1rem = 16px at 100% zoom)

   INSIDE:
     DESIGN TOKENS > Colors
     DESIGN TOKENS > Font and motion
     DESIGN TOKENS > Sizes
   ============================================================ */
:root {
  /* ------------------------------------------------------------
     ▶ START: DESIGN TOKENS > Colors
     ------------------------------------------------------------
     SUMMARY: Greys (dark → light), white, the blue button
     colors, link blues, orange accent and green.
     ------------------------------------------------------------ */
  --black: #000;
  --gray-900: #161617;
  --gray-800: #1d1d1f;
  --gray-600: #6e6e73;
  --gray-500: #86868b;
  --gray-400: #a1a1a6;
  --gray-300: #d2d2d7;
  --gray-100: #f5f5f7;
  --white: #fff;

  --blue: #0071e3;
  --blue-hover: #0077ed;
  --link-dark: #2997ff;
  --link-light: #0066cc;
  --orange: #f56300;
  --green: #30d158;
  /* ------------------------------------------------------------
     ■ END: DESIGN TOKENS > Colors
     ------------------------------------------------------------ */

  /* ------------------------------------------------------------
     ▶ START: DESIGN TOKENS > Font and motion
     ------------------------------------------------------------
     SUMMARY: The site font stack and the smooth Apple-style
     easing curve used by every hover and animation.
     ------------------------------------------------------------ */
  --font:
    -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter",
    "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ease: cubic-bezier(0.28, 0.11, 0.32, 1);
  /* ------------------------------------------------------------
     ■ END: DESIGN TOKENS > Font and motion
     ------------------------------------------------------------ */

  /* ------------------------------------------------------------
     ▶ START: DESIGN TOKENS > Sizes
     ------------------------------------------------------------
     SUMMARY: Corner roundness, the gap between sections, nav
     height, content widths and the side padding on phones.
     ------------------------------------------------------------ */
  --radius-xl: 2rem;
  --radius-lg: 1.75rem;
  --radius-md: 1.125rem;
  --gap: 0.75rem;
  --nav-height: 3rem;
  --content-width: 61.25rem; /* 980px */
  --wide-width: 73.75rem; /* 1180px */
  --side-pad: 1.375rem; /* 22px */
  /* ------------------------------------------------------------
     ■ END: DESIGN TOKENS > Sizes
     ------------------------------------------------------------ */
}
/* ============================================================
   ■ END: DESIGN TOKENS (MASTER BLOCK)
   ============================================================ */

/* ============================================================
   ▶ START: BASE (MASTER BLOCK)
   ============================================================
   SUMMARY: Default page styles. Removes browser margins, sets
   the black background, font and text smoothing, prevents
   sideways scrolling, and lets long words wrap so nothing
   overflows when zoomed. Also turns motion off for visitors
   who prefer it off.

   INSIDE:
     BASE > Page
     BASE > Elements
     BASE > Reduced motion
   ============================================================ */

/* ------------------------------------------------------------
   ▶ START: BASE > Page
   ------------------------------------------------------------
   SUMMARY: Box sizing, smooth scrolling (stops under the nav),
   and the body's background, font and text settings.
   ------------------------------------------------------------ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-height);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-width: 0;
  overflow-x: clip;
  background: var(--black);
  color: var(--gray-100);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.47;
  letter-spacing: -0.022em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* ------------------------------------------------------------
   ■ END: BASE > Page
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: BASE > Elements
   ------------------------------------------------------------
   SUMMARY: Resets for headings, paragraphs, links, lists and
   images, the keyboard focus ring, and the page's main column
   (sections stacked with a small gap).
   ------------------------------------------------------------ */
h1,
h2,
h3,
p,
figure {
  margin: 0;
}
h1,
h2,
h3,
p,
li {
  overflow-wrap: break-word;
}
a {
  color: inherit;
  text-decoration: none;
}
a:focus-visible,
label:focus-visible {
  outline: 2px solid var(--link-dark);
  outline-offset: 3px;
  border-radius: 0.25rem;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
img {
  display: block;
  max-width: 100%;
  height: auto;
}

main {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}
/* ------------------------------------------------------------
   ■ END: BASE > Elements
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: BASE > Reduced motion
   ------------------------------------------------------------
   SUMMARY: If the visitor's device asks for less motion, all
   animations, transitions and smooth scrolling turn off.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
  html {
    scroll-behavior: auto;
  }
}
/* ------------------------------------------------------------
   ■ END: BASE > Reduced motion
   ------------------------------------------------------------ */

/* ============================================================
   ■ END: BASE (MASTER BLOCK)
   ============================================================ */

/* ============================================================
   ▶ START: SHARED (MASTER BLOCK)
   ============================================================
   SUMMARY: Reusable building blocks used by several sections
   (mainly Work, Education and Contact). Change them here and
   every section that uses them updates.

   INSIDE:
     SHARED > Tiles
     SHARED > Typography
     SHARED > Buttons and links
     SHARED > Cards and chips
   ============================================================ */

/* ------------------------------------------------------------
   ▶ START: SHARED > Tiles
   ------------------------------------------------------------
   SUMMARY: The full-width blocks some sections are built from.
   .tile--dark = black block, .tile--light = light grey block.
   Each sets its own text, link, card and chip colors.
   ------------------------------------------------------------ */
.tile {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: clamp(5rem, 3rem + 5vw, 6.875rem) var(--side-pad);
}

.tile--dark {
  background: var(--black);
  color: var(--gray-100);
  --muted: var(--gray-500);
  --link: var(--link-dark);
  --card-bg: var(--gray-900);
  --chip-bg: var(--gray-800);
}

.tile--light {
  background: var(--gray-100);
  color: var(--gray-800);
  --muted: var(--gray-600);
  --link: var(--link-light);
  --card-bg: var(--white);
  --chip-bg: var(--gray-100);
}
/* ------------------------------------------------------------
   ■ END: SHARED > Tiles
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: SHARED > Typography
   ------------------------------------------------------------
   SUMMARY: Small eyebrow label, big section title, grey
   subtitle, and gradient text (silver on dark sections,
   graphite on light ones). Sizes mix rem + vw so they're
   fluid AND still grow with zoom.
   ------------------------------------------------------------ */
.eyebrow {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 0.5rem;
}
.eyebrow--accent {
  color: var(--orange);
}

.title {
  font-size: clamp(2.25rem, 1.25rem + 3.5vw, 3.5rem);
  font-weight: 600;
  line-height: 1.07;
  letter-spacing: -0.015em;
  margin-bottom: 0.875rem;
}
.title--large {
  font-size: clamp(2.75rem, 1.5rem + 5vw, 5rem);
  line-height: 1.05;
}

.subtitle {
  font-size: clamp(1.1875rem, 1rem + 0.8vw, 1.5rem);
  line-height: 1.33;
  color: var(--muted);
  max-width: 40rem;
  margin: 0 auto;
}

.muted {
  color: var(--muted);
}

/* Gradient text — silver (default, for dark backgrounds) */
.gradient {
  background: linear-gradient(180deg, #ffffff 0%, #9a9aa0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* Gradient text — graphite (for light sections, e.g. Contact) */
.tile--light .gradient {
  background: linear-gradient(180deg, #1d1d1f 0%, #6e6e73 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
/* ------------------------------------------------------------
   ■ END: SHARED > Typography
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: SHARED > Buttons and links
   ------------------------------------------------------------
   SUMMARY: Blue pill buttons, outline buttons, and blue text
   links with the "›" arrow. .cta is the row that holds them.
   ------------------------------------------------------------ */
.cta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem 1.75rem;
  margin-top: 1.75rem;
}
.cta--left {
  justify-content: flex-start;
}

.btn {
  display: inline-block;
  padding: 0.6875rem 1.375rem;
  border-radius: 999em;
  font-size: 1.0625rem;
  border: 1px solid transparent;
  transition:
    background 0.3s var(--ease),
    color 0.3s var(--ease),
    border-color 0.3s var(--ease);
}
.btn--primary {
  background: var(--blue);
  color: var(--white);
}
.btn--primary:hover {
  background: var(--blue-hover);
}
.btn--secondary {
  border-color: var(--link);
  color: var(--link);
}
.btn--secondary:hover {
  background: var(--link);
  color: var(--white);
}

.link {
  color: var(--link);
  font-size: 1.0625rem;
}
.link:hover {
  text-decoration: underline;
}

.chevron {
  display: inline-block;
  margin-left: 0.125rem;
  transition: transform 0.3s var(--ease);
}
.link:hover .chevron {
  transform: translateX(0.1875rem);
}
/* ------------------------------------------------------------
   ■ END: SHARED > Buttons and links
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: SHARED > Cards and chips
   ------------------------------------------------------------
   SUMMARY: Rounded cards (used by Education) and small pill
   "chips". The card grid reflows automatically: 2 columns on
   wide screens, 1 column when narrow or zoomed in.
   ------------------------------------------------------------ */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: 1.25rem;
  max-width: var(--content-width);
  margin: 3.5rem auto 0;
  text-align: left;
}

.card {
  min-width: 0;
  background: var(--card-bg);
  border-radius: var(--radius-md);
  padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
  transition:
    transform 0.4s var(--ease),
    box-shadow 0.4s var(--ease);
}
.card:hover {
  transform: scale(1.015);
  box-shadow: 0 1.25rem 2.5rem rgba(0, 0, 0, 0.08);
}
.tile--dark .card:hover {
  box-shadow: 0 1.25rem 2.5rem rgba(0, 0, 0, 0.6);
}

.card__meta {
  font-size: 0.8125rem;
  color: var(--muted);
  margin-bottom: 0.625rem;
}

.card__title {
  font-size: 1.3125rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-bottom: 0.25rem;
}

.card__company {
  font-size: 1.0625rem;
  color: var(--link);
  margin-bottom: 1.125rem;
}

.card__list li {
  position: relative;
  padding-left: 1rem;
  margin-top: 0.5rem;
  font-size: 0.9375rem;
  color: var(--muted);
}
.card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.3125rem;
  height: 0.3125rem;
  border-radius: 50%;
  background: var(--muted);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 2rem;
}
.chips--left {
  justify-content: flex-start;
  margin-top: 0;
}
.chips li {
  font-size: 0.875rem;
  padding: 0.4375rem 0.875rem;
  border-radius: 999em;
  background: var(--chip-bg);
}
/* Chips directly on a light section (not inside a card) need contrast */
.tile--light > .chips li {
  background: var(--white);
}
/* ------------------------------------------------------------
   ■ END: SHARED > Cards and chips
   ------------------------------------------------------------ */

/* ============================================================
   ■ END: SHARED (MASTER BLOCK)
   ============================================================ */

/* ============================================================
   ▶ START: NAV (MASTER BLOCK)
   ============================================================
   SUMMARY: Fixed top bar in graphite grey glass, so it stands
   apart from the hero. A brighter bottom edge and soft shadow
   make it float above the page. Desktop: links in a row.
   Phone / zoomed in (≤45.875em): the hamburger opens a
   full-screen menu that scrolls if it's taller than the screen.

   INSIDE (same names in index.html):
     NAV > Bar
     NAV > Logo
     NAV > Mobile menu button
     NAV > Links
     NAV > Phone
   ============================================================ */

/* ------------------------------------------------------------
   ▶ START: NAV > Bar
   ------------------------------------------------------------
   SUMMARY: CLEAR → SOLID (tesla.com style).
   - At the top of the page the bar is fully CLEAR: no glass,
     no line, no shadow — the hero photo shows edge to edge
     with just white words on it (a faint dark halo keeps them
     readable on the bright sky).
   - Once you scroll a little, the script (NAV SCROLL STATE)
     adds "is-scrolled" and the bar fades into dark smoked
     glass with a hairline underneath.
   - When the phone menu is open the bar is always solid.
   The inner row spaces the logo and links apart.
   ------------------------------------------------------------ */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--nav-height);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition:
    background-color 0.4s ease,
    border-color 0.4s ease,
    -webkit-backdrop-filter 0.4s ease,
    backdrop-filter 0.4s ease;
}
.nav.is-scrolled,
.nav:has(.nav__toggle:checked) {
  background: rgba(20, 20, 22, 0.78);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

.nav__inner {
  max-width: var(--wide-width);
  height: 100%;
  margin: 0 auto;
  padding: 0 var(--side-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
/* ------------------------------------------------------------
   ■ END: NAV > Bar
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: NAV > Logo
   ------------------------------------------------------------
   SUMMARY: Your name as a Tesla-style WORDMARK — bold, all
   caps, widely spaced letters. Clicking it scrolls back to the
   top. Soft dark halo only while the bar is clear.
   ------------------------------------------------------------ */
.nav__logo {
  flex-shrink: 0;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--white);
  transition: text-shadow 0.4s ease;
}
.nav:not(.is-scrolled) .nav__logo {
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}
/* ------------------------------------------------------------
   ■ END: NAV > Logo
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: NAV > Mobile menu button
   ------------------------------------------------------------
   SUMMARY: Two-line hamburger icon. Hidden on desktop (shown
   in NAV > Phone). The checkbox is removed on desktop; on
   phone / zoomed in it becomes invisible-but-tabbable (see
   NAV > Phone). Tabbing to it draws a blue ring around ☰.
   ------------------------------------------------------------ */
.nav__toggle {
  display: none;
}

.nav__burger {
  display: none;
  position: relative;
  width: 1.75rem;
  height: 1.75rem;
  cursor: pointer;
}
.nav__burger span {
  position: absolute;
  left: 0.375rem;
  right: 0.375rem;
  height: 0.09375rem;
  background: var(--gray-100);
  border-radius: 0.125rem;
  transition: transform 0.3s var(--ease);
}
.nav__burger span:first-child {
  top: 0.625rem;
}
.nav__burger span:last-child {
  top: 1.0625rem;
}

.nav__toggle:focus-visible + .nav__burger {
  outline: 2px solid var(--link-dark);
  outline-offset: 3px;
  border-radius: 0.25rem;
}
/* ------------------------------------------------------------
   ■ END: NAV > Mobile menu button
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: NAV > Links
   ------------------------------------------------------------
   SUMMARY: Tesla-style links: white, medium weight, 14px. On
   hover a soft rounded block lights up behind the word (like
   tesla.com). Soft dark halo only while the bar is clear.
   ------------------------------------------------------------ */
.nav__links {
  display: flex;
  gap: 0.25rem;
}
.nav__links a {
  padding: 0.45rem 0.85rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--white);
  white-space: nowrap;
  transition:
    background-color 0.3s var(--ease),
    text-shadow 0.4s ease;
}
.nav__links a:hover {
  background-color: rgba(255, 255, 255, 0.14);
}
.nav__links a:focus-visible {
  outline: 2px solid var(--link-dark);
  outline-offset: 2px;
}
.nav:not(.is-scrolled) .nav__links a {
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}
/* ------------------------------------------------------------
   ■ END: NAV > Links
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: NAV > Phone
   ------------------------------------------------------------
   SUMMARY: Phone / zoomed in. Shows the hamburger; the links
   become a full-screen dropdown menu with big text. Tapping
   the hamburger turns it into an X and opens the menu.
   The checkbox is invisible but stays in the Tab order so
   keyboard users can open the menu.
   ------------------------------------------------------------ */
@media (max-width: 45.875em) {
  .nav__toggle {
    display: block;
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .nav__burger {
    display: block;
  }

  .nav__links {
    position: fixed;
    top: var(--nav-height);
    left: 0;
    right: 0;
    height: calc(100vh - var(--nav-height));
    height: calc(100dvh - var(--nav-height));
    overflow-y: auto;
    flex-direction: column;
    gap: 0;
    padding: 1rem 2rem 2rem;
    background: rgba(29, 29, 31, 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.625rem);
    transition: all 0.35s var(--ease);
  }
  .nav__links a {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--gray-100);
    opacity: 1;
    padding: 0.625rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .nav__toggle:checked ~ .nav__links {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .nav__toggle:checked + .nav__burger span:first-child {
    transform: translateY(0.21875rem) rotate(45deg);
  }
  .nav__toggle:checked + .nav__burger span:last-child {
    transform: translateY(-0.21875rem) rotate(-45deg);
  }
}
/* ------------------------------------------------------------
   ■ END: NAV > Phone
   ------------------------------------------------------------ */

/* ============================================================
   ■ END: NAV (MASTER BLOCK)
   ============================================================ */

/* ============================================================
   ▶ START: HERO (MASTER BLOCK)
   ============================================================
   SUMMARY: One full-width 16:9 photo (./images/hero-wide.jpg)
   of you and the city, running under the nav bar. Your name
   and role sit on the lower ~30% of the photo; the buttons and
   details line finish just below on a short dark band.
   Zoom-safe: the text only covers a fixed fraction of the
   photo's height, so when zoomed it grows DOWNWARD and never
   reaches your face.
   Phone (≤45.875em): portrait crop centered on you, text below.

   INSIDE (same names in index.html):
     HERO > Setup
     HERO > Photo
     HERO > Text
       HERO > Text > Buttons
       HERO > Text > Details line
     HERO > Animations
     HERO > Tablet
     HERO > Phone
   ============================================================ */

/* ------------------------------------------------------------
   ▶ START: HERO > Setup
   ------------------------------------------------------------
   SUMMARY: Photo height (16:9, never taller than the screen)
   and how much of the photo the text may cover.
   ------------------------------------------------------------ */
.hero {
  /* Photo height: full width at 16:9, but never taller than the screen */
  --hero-h: clamp(20rem, min(90svh, 56.25vw), 90rem);
  /* Bottom part of the photo the text may cover (face stays above it) */
  --hero-overlap: 0.3;

  position: relative;
  isolation: isolate;
  background: var(--black);
  text-align: center;
}
/* ------------------------------------------------------------
   ■ END: HERO > Setup
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: HERO > Photo
   ------------------------------------------------------------
   SUMMARY: FULL PHOTO (Tesla style): the photo fills the WHOLE
   hero — behind the name, buttons and details line — all the
   way down to About's blue glow line. The negative bottom
   margin cancels the small gap between sections, so the photo
   ends exactly AT the line (no black bar). It sits behind the
   text (z-index -1 inside the hero) with a small color pop.
   The shade: a little darker at the top for the nav, then a
   dark gradient over the lower half so every line of text
   stays easy to read.
   ------------------------------------------------------------ */
.hero {
  overflow: hidden;
  margin-bottom: calc(var(--gap) * -1);
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  animation: heroPhotoIn 1.6s var(--ease) both;
}

.hero__photo {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 20%;
  /* Small extra pop for the city — set to "none" to turn off */
  filter: saturate(1.12) contrast(1.04);
}

.hero__shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, transparent 14%),
    linear-gradient(
      180deg,
      transparent 45%,
      rgba(0, 0, 0, 0.55) 68%,
      rgba(0, 0, 0, 0.78) 100%
    );
}
.hero__meta {
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
}
/* ------------------------------------------------------------
   ■ END: HERO > Photo
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: HERO > Text
   ------------------------------------------------------------
   SUMMARY: The text block starts on the lower part of the
   photo (below your face): top margin = photo height minus
   the overlap. Each line fades up one after another. Includes
   the huge name, the role line and the tagline.
   Tagline = TESLA style: lighter Geist, a touch smaller, soft
   grey, in a WIDE column so it sits on one line on big
   screens (two even lines on smaller ones).
   ------------------------------------------------------------ */
.hero__content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--wide-width);
  min-height: calc(var(--hero-h) * var(--hero-overlap));
  margin: calc(var(--hero-h) * (1 - var(--hero-overlap))) auto 0;
  padding: 0 var(--side-pad) clamp(2.5rem, 2rem + 1.5vw, 3.5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Each line fades up gently, one after another */
.hero__content > * {
  animation: heroFadeUp 0.9s var(--ease) both;
}
.hero__content > :nth-child(1) {
  animation-delay: 0.3s;
}
.hero__content > :nth-child(2) {
  animation-delay: 0.45s;
}
.hero__content > :nth-child(3) {
  animation-delay: 0.55s;
}
.hero__content > :nth-child(4) {
  animation-delay: 0.65s;
}
.hero__content > :nth-child(5) {
  animation-delay: 0.75s;
}

/* Name — huge; wraps to two lines only if the screen is too narrow */
.hero__title {
  font-size: clamp(3.25rem, 1rem + 7.5vw, 9rem);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.055em;
  text-wrap: balance;
  filter: drop-shadow(0 0.5rem 2rem rgba(0, 0, 0, 0.6));
}

/* Role line + tagline */
.hero__role {
  margin-top: 1.1rem;
  font-size: clamp(1.0625rem, 0.9rem + 0.6vw, 1.3125rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--white);
  text-shadow: 0 1px 0.75rem rgba(0, 0, 0, 0.6);
}
.hero__subtitle {
  max-width: 60rem;
  margin: 0.7rem auto 0;
  font-family: "Geist", "Inter", sans-serif;
  font-size: clamp(0.9375rem, 0.85rem + 0.3vw, 1.0625rem);
  font-weight: 400;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
  text-wrap: balance;
  text-shadow: 0 1px 0.75rem rgba(0, 0, 0, 0.6);
}
/* ------------------------------------------------------------
   ■ END: HERO > Text
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: HERO > Text > Buttons
   ------------------------------------------------------------
   SUMMARY: Spacing above the button row (a little extra air
   under the tagline) and the bright blue "Download résumé"
   link color.
   ------------------------------------------------------------ */
.hero .cta {
  margin-top: 2rem;
}
.hero .link {
  color: var(--link-dark);
}
/* ------------------------------------------------------------
   ■ END: HERO > Text > Buttons
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: HERO > Text > Details line
   ------------------------------------------------------------
   SUMMARY: Current job (with the glowing green dot), location
   and "Designed & coded by me" (small blue </> icon, "me" a
   touch brighter), separated by thin dividers.
   ------------------------------------------------------------ */
.hero__meta {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.625rem 0;
  margin-top: 1.75rem;
  font-size: 0.8125rem;
  color: var(--gray-400);
}
.hero__meta li {
  display: inline-flex;
  align-items: center;
}
.hero__meta li + li::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 0.75rem;
  margin: 0 0.875rem;
  background: rgba(255, 255, 255, 0.2);
}
.hero__meta li:first-child {
  color: var(--gray-100);
  font-weight: 500;
}
.hero__dot {
  width: 0.4375rem;
  height: 0.4375rem;
  margin-right: 0.5rem;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0.625rem rgba(48, 209, 88, 0.8);
}
.hero__coded svg {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  margin-right: 0.4rem;
  fill: none;
  stroke: #2997ff;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hero__coded b {
  margin-left: 0.25em;
  font-weight: 600;
  color: var(--gray-100);
}
/* ------------------------------------------------------------
   ■ END: HERO > Text > Details line
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: HERO > Animations
   ------------------------------------------------------------
   SUMMARY: heroFadeUp (each text line rises in) and heroPhotoIn
   (the photo fades in with a slight zoom-out).
   ------------------------------------------------------------ */
@keyframes heroFadeUp {
  from {
    opacity: 0;
    transform: translateY(1.5rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes heroPhotoIn {
  from {
    opacity: 0;
    transform: scale(1.03);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
/* ------------------------------------------------------------
   ■ END: HERO > Animations
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: HERO > Tablet
   ------------------------------------------------------------
   SUMMARY: Tablet / moderately zoomed — text covers slightly
   less of the photo.
   ------------------------------------------------------------ */
@media (max-width: 66.75em) {
  .hero {
    --hero-overlap: 0.28;
  }
}
/* ------------------------------------------------------------
   ■ END: HERO > Tablet
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: HERO > Phone
   ------------------------------------------------------------
   SUMMARY: Phone / heavily zoomed — portrait 4:5 crop of you,
   smaller name, and the current-job line on its own row.
   ------------------------------------------------------------ */
@media (max-width: 45.875em) {
  .hero {
    /* Portrait 4:5 crop, as wide as the screen */
    --hero-h: min(125vw, 85svh);
    --hero-overlap: 0.24;
  }

  .hero__title {
    font-size: clamp(2.75rem, 1rem + 9vw, 4rem);
  }

  .hero__meta li:first-child {
    width: 100%;
    justify-content: center;
  }
  .hero__meta li:nth-child(2)::before {
    display: none;
  }
}
/* ------------------------------------------------------------
   ■ END: HERO > Phone
   ------------------------------------------------------------ */

/* ============================================================
   ■ END: HERO (MASTER BLOCK)
   ============================================================ */

/* ============================================================
   ▶ START: ABOUT (MASTER BLOCK)
   ============================================================
   SUMMARY: The header sits on the photo's exact night-sky
   color with the same left-dark fade as the photo, so header
   + photo read as one continuous sky. A black fade at the top
   joins the hero.
   Desktop: header centered with sky above it; photo below
   with the story on the left, you on the right.
   Tablet: stronger fade (header + photo change together).
   Phone / zoomed in (≤45.875em): plain sky header, photo on
   top (4:3), story + boxes below on dark — no overlap.

   INSIDE (same names in index.html):
     ABOUT > Setup
     ABOUT > Header
       ABOUT > Header > Code pill
     ABOUT > Feature
       ABOUT > Feature > Photo
       ABOUT > Feature > Scrim
       ABOUT > Feature > Story
         ABOUT > Feature > Story > Quick facts
         ABOUT > Feature > Story > Skill boxes
     ABOUT > Tablet
     ABOUT > Phone
   ============================================================ */

/* ------------------------------------------------------------
   ▶ START: ABOUT > Setup
   ------------------------------------------------------------
   SUMMARY: Section colors + the shared left-dark fade
   (--scrim-x) used by BOTH the header and the photo.
   Background = black fade at the top (joins the hero) → night
   sky. Top padding gives the header room in the sky.
   position: relative lets the divider line sit on the top edge.
   ------------------------------------------------------------ */
.about {
  --about-width: 87.5rem; /* matches Experience / Skills */
  --photo-focus: 75% 40%; /* keeps YOU (right side) in frame */
  --feature-bg: #07090f; /* dark background under the story on phones */
  --sky: #07142e; /* exact night-sky color from the top of the photo */

  /* Left-dark fade — shared by the header AND the photo so they match */
  --scrim-x: linear-gradient(
    90deg,
    rgba(3, 6, 14, 0.94) 0%,
    rgba(3, 6, 14, 0.86) 45%,
    rgba(3, 6, 14, 0.35) 62%,
    transparent 75%
  );

  /* Box + pill colors (RGB) — bright so they glow on dark */
  --c-insurance: 41, 151, 255; /* #2997ff */
  --c-business: 48, 209, 88; /*  #30d158 */
  --c-code: 191, 90, 242; /*     #bf5af2 */

  position: relative;
  background:
    linear-gradient(180deg, var(--black) 0, transparent 14rem), var(--scrim-x),
    var(--sky);
  color: var(--gray-100);
  padding: clamp(4.5rem, 3.5rem + 3vw, 6rem) var(--side-pad) 0;
}

.about__inner {
  max-width: var(--about-width);
  margin: 0 auto;
}
/* ------------------------------------------------------------
   ■ END: ABOUT > Setup
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: ABOUT > Divider
   ------------------------------------------------------------
   SUMMARY: BLUE GLOW LINE — a thin 1px line on the very top
   edge of About, right where the hero photo ends. Site blue
   (#2997ff, same family as the buttons), brightest in the
   middle and fading to nothing at both edges, with a soft
   blue glow. Sits above the photo (z-index 2). Decorative only.
   Raise / lower the 0.85 values for a brighter / softer line,
   and the 0.7 in box-shadow for more / less glow.
   ------------------------------------------------------------ */
.about::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(41, 151, 255, 0.85) 30%,
    rgba(41, 151, 255, 0.85) 70%,
    transparent 100%
  );
  box-shadow: 0 0 0.9rem rgba(41, 151, 255, 0.7);
  pointer-events: none;
}
/* ------------------------------------------------------------
   ■ END: ABOUT > Divider
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: ABOUT > Header
   ------------------------------------------------------------
   SUMMARY: "Get to know me" and the big "About me." title,
   centered in the night sky. No extra space underneath — the
   story starts right after it.
   ------------------------------------------------------------ */
.about__header {
  text-align: center;
}
.about__eyebrow {
  font-size: clamp(1.0625rem, 0.95rem + 0.4vw, 1.25rem);
  font-weight: 600;
  color: var(--gray-400);
}
.about__title {
  margin-top: 0.375rem;
  font-size: clamp(3rem, 1.5rem + 5.5vw, 5rem);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.055em;
  background: linear-gradient(180deg, #ffffff 0%, #9a9aa0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* ------------------------------------------------------------
   ■ END: ABOUT > Header
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: ABOUT > Header > Code pill
   ------------------------------------------------------------
   SUMMARY: "</> who can code." — purple outline + soft glow.
   Size follows the role line (em), so it scales with zoom.
   Wraps below the line when narrow.
   ------------------------------------------------------------ */
.about__code-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  padding: 0.3125rem 0.875rem;
  border: 1.5px solid rgba(var(--c-code), 0.9);
  border-radius: 999em;
  background: rgba(var(--c-code), 0.12);
  box-shadow: 0 0 0.875rem rgba(var(--c-code), 0.25);
  font-size: 0.875em;
  font-weight: 700;
  color: #e0c2ff;
  white-space: nowrap;
}
.about__code-icon {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-weight: 700;
  color: rgb(var(--c-code));
}
/* ------------------------------------------------------------
   ■ END: ABOUT > Header > Code pill
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: ABOUT > Feature
   ------------------------------------------------------------
   SUMMARY: Full-width photo area (story centered vertically on
   it). Height trimmed so there's no empty space above or below
   the story; grows taller if the story gets longer.
   ------------------------------------------------------------ */
.about__feature {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: clamp(32rem, 26rem + 14vw, 44rem);
  margin-inline: calc(var(--side-pad) * -1);
  background: var(--sky);
}

.about__feature-inner {
  width: 100%;
  padding: clamp(1.5rem, 1rem + 1.5vw, 2.5rem) var(--side-pad)
    clamp(2.5rem, 2rem + 2vw, 3.5rem);
}
/* ------------------------------------------------------------
   ■ END: ABOUT > Feature
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: ABOUT > Feature > Photo
   ------------------------------------------------------------
   SUMMARY: Covers the whole feature area; --photo-focus keeps
   you in frame.
   ------------------------------------------------------------ */
.about__photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: var(--photo-focus);
}
/* ------------------------------------------------------------
   ■ END: ABOUT > Feature > Photo
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: ABOUT > Feature > Scrim
   ------------------------------------------------------------
   SUMMARY: Uses the SAME left-dark fade as the header
   (--scrim-x), so the top of the photo matches the header
   exactly — no seam. Light darkening only at the very bottom.
   ------------------------------------------------------------ */
.about__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    var(--scrim-x),
    linear-gradient(180deg, transparent 80%, rgba(0, 0, 0, 0.35) 100%);
}
/* ------------------------------------------------------------
   ■ END: ABOUT > Feature > Scrim
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: ABOUT > Feature > Story
   ------------------------------------------------------------
   SUMMARY: Text on the photo, left-aligned. Narrow column keeps
   line endings off the bright towers. Small spaced "MY STORY"
   label, silver headline, white lead line, then the story in
   CALM type (Geist regular, soft grey, generous line spacing)
   so it reads lightly instead of as a heavy block. Even
   spacing between every part.
   ------------------------------------------------------------ */
.about__story {
  max-width: min(37rem, 50%);
  color: var(--white);
}
.about__story-eyebrow {
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #a8d1ff;
  text-shadow: 0 1px 0.75rem rgba(0, 0, 0, 0.7);
}
.about__story-title {
  margin-top: 0.6rem;
  font-size: clamp(2.25rem, 1.5rem + 2.5vw, 3.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.055em;
  background: linear-gradient(180deg, #ffffff 0%, #9aa8c0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.about__lead {
  margin-top: 1rem;
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  font-weight: 600;
  line-height: 1.4;
  color: var(--white);
}
.about__text {
  margin-top: 0.75rem;
  font-family: "Geist", "Inter", sans-serif;
  font-size: clamp(0.9375rem, 0.9rem + 0.25vw, 1.0625rem);
  font-weight: 400;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.7);
  text-shadow: 0 1px 0.75rem rgba(0, 0, 0, 0.6);
}
.about__text + .about__text {
  margin-top: 1rem;
}
/* ------------------------------------------------------------
   ■ END: ABOUT > Feature > Story
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: ABOUT > Feature > Story > Quick facts
   ------------------------------------------------------------
   SUMMARY: Small languages line with thin dividers between
   items (add an item with another <li>).
   ------------------------------------------------------------ */
.about__facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.625rem 0;
  margin-top: 1.4rem;
  font-size: 0.8125rem;
  color: #b8c3d8;
}
.about__facts li {
  display: inline-flex;
  align-items: center;
}
.about__facts li + li::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 0.75rem;
  margin: 0 0.875rem;
  background: rgba(255, 255, 255, 0.3);
}
/* ------------------------------------------------------------
   ■ END: ABOUT > Feature > Story > Quick facts
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: ABOUT > Feature > Story > Skill boxes
   ------------------------------------------------------------
   SUMMARY: Navy link boxes with glowing borders (blue / green
   / purple). Box grid, box + hover lift, the three colors,
   icon, and name + description. Grid reflows to fewer columns
   when narrow or zoomed.
   ------------------------------------------------------------ */
.about__skills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.4rem;
}

.skill {
  --glow: 255, 255, 255;

  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  padding: 0.75rem 0.875rem;
  background: rgba(15, 23, 41, 0.92);
  border: 1.5px solid rgba(var(--glow), 0.9);
  border-radius: 1rem;
  box-shadow:
    0 0 0 3px rgba(var(--glow), 0.14),
    0 0.5rem 1.5rem rgba(var(--glow), 0.3);
  color: var(--white);
  transition:
    transform 0.3s var(--ease),
    box-shadow 0.3s var(--ease);
}
.skill:hover,
.skill:focus-visible {
  transform: translateY(-2px);
  box-shadow:
    0 0 0 4px rgba(var(--glow), 0.22),
    0 0.75rem 2rem rgba(var(--glow), 0.45);
}
.skill--insurance {
  --glow: var(--c-insurance);
}
.skill--business {
  --glow: var(--c-business);
}
.skill--code {
  --glow: var(--c-code);
}

.skill__icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.625rem;
  background: rgba(var(--glow), 0.16);
  color: rgb(var(--glow));
}
.skill__icon svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.skill__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.skill__name {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--white);
}
.skill__desc {
  font-size: 0.75rem;
  white-space: nowrap;
  color: #9aa8c0;
}
/* ------------------------------------------------------------
   ■ END: ABOUT > Feature > Story > Skill boxes
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: ABOUT > Tablet
   ------------------------------------------------------------
   SUMMARY: Moderately zoomed / tablet — story a bit wider +
   stronger fade. Changing --scrim-x updates the header AND the
   photo together, so they still match.
   ------------------------------------------------------------ */
@media (max-width: 66.75em) {
  .about {
    --scrim-x: linear-gradient(
      90deg,
      rgba(3, 6, 14, 0.94) 0%,
      rgba(3, 6, 14, 0.82) 40%,
      rgba(3, 6, 14, 0.3) 70%,
      transparent 85%
    );
  }
  .about__story {
    max-width: min(34rem, 62%);
  }
}
/* ------------------------------------------------------------
   ■ END: ABOUT > Tablet
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: ABOUT > Phone
   ------------------------------------------------------------
   SUMMARY: Heavily zoomed / phone — plain night-sky header (no
   side fade) flowing into the photo on top; story + boxes
   below on dark.
   ------------------------------------------------------------ */
@media (max-width: 45.875em) {
  .about {
    --scrim-x: linear-gradient(transparent, transparent);
  }

  .about__feature {
    display: block;
    min-height: 0;
    background: var(--feature-bg);
  }

  .about__photo {
    position: relative;
    z-index: auto;
    height: auto;
    aspect-ratio: 4 / 3;
    object-position: 80% 40%;
  }

  /* Fade only the bottom of the photo into the dark story area */
  .about__scrim {
    inset: 0 0 auto 0;
    z-index: auto;
    height: 75vw;
    background: linear-gradient(
      180deg,
      transparent 55%,
      var(--feature-bg) 100%
    );
  }

  .about__feature-inner {
    padding-top: 1.5rem;
  }

  .about__story {
    max-width: none;
  }
}
/* ------------------------------------------------------------
   ■ END: ABOUT > Phone
   ------------------------------------------------------------ */

/* ============================================================
   ■ END: ABOUT (MASTER BLOCK)
   ============================================================ */

/* ============================================================
   ▶ START: EXPERIENCE (MASTER BLOCK)
   ============================================================
   SUMMARY: "Where I've worked." on a LIGHT cool-grey background
   with a thin black tapered liner at the bottom edge and a soft
   shadow cast down onto Stats. One PLAYING CARD per job, sliding
   left to right (the next one peeks in at the side):
   - BACK (face-down): light aurora in the card's color, a glass
     panel with a double frame, a Moroccan-star pattern, the
     company logo in a white emblem with a black titanium bezel,
     and "Tap to view" in the bottom band.
   - FRONT: aurora glass in the card's color — logo as the title,
     role, date, city · tenure, every bullet with check badges and
     highlighted numbers, a big engraved "01" bottom-right.
   Cards flip face-up as they reach the center (script.js
   EXPERIENCE CAROUSEL); click the center card to flip it, click
   a side card to bring it in. Once a card has finished flipping,
   all 3D is switched off so the text and logos stay razor sharp.
   Colors (Apple deep): Insurance = blue · Business = green ·
   Code = indigo. Change them in EXPERIENCE > Cards.

   INSIDE (same names in index.html):
     EXPERIENCE > Setup
     EXPERIENCE > Header
     EXPERIENCE > Cards
     EXPERIENCE > Cards > Flip
     EXPERIENCE > Cards > Front
     EXPERIENCE > Cards > Front > Head
     EXPERIENCE > Cards > Front > Bullets
     EXPERIENCE > Cards > Front > Number
     EXPERIENCE > Cards > Back
     EXPERIENCE > Cards > Back > Emblem
     EXPERIENCE > Controls
     EXPERIENCE > Tablet
     EXPERIENCE > Phone
     EXPERIENCE > Reduced motion
   ============================================================ */

/* ------------------------------------------------------------
   ▶ START: EXPERIENCE > Setup
   ------------------------------------------------------------
   SUMMARY: Card width, equal top/bottom padding (--xp-pad), the
   cool-grey background, the soft shadow cast down onto Stats
   (z-index: 1 lets it sit on top), and the thin black TAPERED
   LINER on the bottom edge (::after — thickest in the middle,
   fine points at the sides). Pulls itself up over the page gap
   so it touches About.
   ------------------------------------------------------------ */
.experience {
  /* Card width (the rest of the row shows the next card) */
  --card-w: min(100cqw - 3rem, 62rem);

  /* Equal space above the header and below the controls */
  --xp-pad: clamp(3rem, 2.25rem + 2.5vw, 4.25rem);

  position: relative;
  z-index: 1;
  isolation: isolate;
  container-type: inline-size;
  margin-top: calc(var(--gap) * -1);
  padding: var(--xp-pad) 0;
  background: linear-gradient(180deg, #ebebef 0%, #e2e3e8 100%);
  color: #1d1d1f;
  box-shadow: 0 1rem 2.5rem -0.5rem rgba(0, 0, 0, 0.14); /* onto Stats */
}
.experience::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.078125rem; /* centered on the seam */
  height: 0.15625rem; /* 2.5px at the thickest point */
  background: #1d1d1f;
  clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%);
  pointer-events: none;
}
/* ------------------------------------------------------------
   ■ END: EXPERIENCE > Setup
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: EXPERIENCE > Header
   ------------------------------------------------------------
   SUMMARY: "Experience" in near-black + "Where I've worked." in
   polished black glass (same recipe and sizes as Stats).
   ------------------------------------------------------------ */
.experience__header {
  padding: 0 var(--side-pad);
  margin-bottom: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem);
  text-align: center;
}
.experience__eyebrow {
  font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  color: #1d1d1f;
}
.experience__title {
  margin-top: 0.375rem;
  padding-bottom: 0.06em;
  font-size: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.055em;
  background: linear-gradient(
    180deg,
    #5a5a5f 0%,
    #1d1d1f 38%,
    #000 55%,
    #2c2c2e 82%,
    #5a5a5f 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.9))
    drop-shadow(0 0.375rem 0.875rem rgba(0, 0, 0, 0.18));
}
/* ------------------------------------------------------------
   ■ END: EXPERIENCE > Header
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: EXPERIENCE > Cards
   ------------------------------------------------------------
   SUMMARY: The sideways row (snaps each card to the center,
   hidden scrollbar, room underneath for the shadows). Every
   card stretches to the tallest card's height, so all four —
   front AND back — are exactly the same size.
   JOB COLORS (Apple deep) live here — three RGB shades each:
   --a1 bright, --a2 deep (outlines, frames, highlights), --a3
   light (glows). --ink = the deep shade for text.
   ------------------------------------------------------------ */
.experience__track {
  --side: calc((100cqw - var(--card-w)) / 2);
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 1.5rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--side);
  scrollbar-width: none;
  padding: 0.75rem var(--side) 2.5rem;
}
.experience__track::-webkit-scrollbar {
  display: none;
}

.job {
  --a1: 10, 96, 255; /*    #0a60ff blue (bright) */
  --a2: 0, 64, 221; /*     #0040dd blue (deep)   */
  --a3: 143, 176, 255; /*  #8fb0ff blue (light)  */
  --ink: #0040dd;
  position: relative;
  flex: 0 0 var(--card-w);
  display: flex;
  scroll-snap-align: center;
  outline: none;
}
.job--business {
  --a1: 48, 162, 76; /*    #30a24c green */
  --a2: 36, 138, 61; /*    #248a3d       */
  --a3: 160, 217, 173; /*  #a0d9ad       */
  --ink: #248a3d;
}
.job--code {
  --a1: 88, 86, 214; /*    #5856d6 indigo */
  --a2: 54, 52, 163; /*    #3634a3        */
  --a3: 178, 177, 240; /*  #b2b1f0        */
  --ink: #3634a3;
}
.job:focus-visible .job__face {
  outline: 2px solid #0071e3;
  outline-offset: 4px;
}
/* ------------------------------------------------------------
   ■ END: EXPERIENCE > Cards
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: EXPERIENCE > Cards > Flip
   ------------------------------------------------------------
   SUMMARY: Front and back share one spot. With JavaScript the
   card starts face-down (back showing); "is-up" turns it over
   with a smooth 3D flip. When the turn finishes, "is-flat"
   switches all 3D OFF (that's what keeps the front crisp — 3D
   makes text slightly soft). "no-anim" lets the script restore
   the 3D state instantly before flipping back. Without
   JavaScript the front simply shows and the back is hidden.
   ------------------------------------------------------------ */
.job__flip {
  position: relative;
  flex: 1;
  display: grid;
}
.job__face {
  position: relative;
  grid-area: 1 / 1;
  height: 100%;
  border-radius: 1.5rem;
  overflow: hidden;
}
html:not(.js) .job__back {
  display: none;
}
.js .job {
  perspective: 110rem;
  cursor: pointer;
}
.js .job__flip {
  transform-style: preserve-3d;
  transition: transform 0.9s cubic-bezier(0.3, 0.7, 0.2, 1);
}
.js .job__face {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.js .job__front {
  transform: rotateY(180deg);
}
.js .job.is-up .job__flip {
  transform: rotateY(180deg);
}
.js .job.is-up .job__front {
  cursor: auto;
}
.js .job.is-flat .job__flip {
  transform: none;
  transition: none;
}
.js .job.is-flat .job__front {
  transform: none;
}
.js .job.is-flat .job__back {
  visibility: hidden;
}
.js .job.no-anim .job__flip {
  transition: none;
}
/* ------------------------------------------------------------
   ■ END: EXPERIENCE > Cards > Flip
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: EXPERIENCE > Cards > Front
   ------------------------------------------------------------
   SUMMARY: METALLIC SHEEN (Apple Card style) on BOTH sides of
   every card — a deep jewel color with a diagonal band of
   light across it, like light hitting brushed metal:
     Insurance = sapphire · Business = emerald ·
     Web dev = amethyst
   Each job's jewel palette: --j1 deep (top-left), --j2 deeper
   (bottom-right), --j3 light (the soft glow in the top-left
   corner). Plus a bright rim that catches the light (::after —
   brightest at the top-left and bottom-right corners) and a
   colored shadow under the card. The back uses the exact same
   finish (see Back).
   ------------------------------------------------------------ */
.job {
  --j1: #0b3fd6; /* sapphire */
  --j2: #06227e;
  --j3: #4f8dff;
}
.job--business {
  --j1: #11904a; /* emerald */
  --j2: #064226;
  --j3: #4cd27c;
}
.job--code {
  --j1: #5b3fe0; /* amethyst */
  --j2: #2a1680;
  --j3: #9a7dff;
}
.job__front,
.job__back {
  background: linear-gradient(
    155deg,
    var(--j1),
    var(--j2)
  ); /* older browsers */
  background:
    linear-gradient(
      115deg,
      transparent 30%,
      rgba(255, 255, 255, 0.16) 42%,
      rgba(255, 255, 255, 0.04) 50%,
      transparent 58%
    ),
    radial-gradient(
      90% 70% at 0% 0%,
      color-mix(in oklab, var(--j3) 55%, transparent),
      transparent 65%
    ),
    linear-gradient(155deg, var(--j1), var(--j2));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 -1px 0 rgba(255, 255, 255, 0.3),
    inset 0 0 2.5rem rgba(255, 255, 255, 0.12),
    0 1.25rem 2.75rem rgba(var(--a2), 0.3),
    0 0.4rem 1rem rgba(0, 0, 0, 0.1);
}
.job__front {
  display: flex;
  flex-direction: column;
}
.job__front::after,
.job__back::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2.5px;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.85),
    rgba(255, 255, 255, 0.1) 30%,
    rgba(255, 255, 255, 0.05) 60%,
    rgba(255, 255, 255, 0.6)
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
/* ------------------------------------------------------------
   ■ END: EXPERIENCE > Cards > Front
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: EXPERIENCE > Cards > Front > Head
   ------------------------------------------------------------
   SUMMARY: LIGHT HEADER — the top strip is bright frosted white
   (so every logo shows in its real colors) with the glass below
   it. Two rows:
     company LOGO (the title)  ↔  📅 date
     role                      ↔  📍 city · tenure
   Logos keep their real colors. The logo IS the title; the
   typed name stays hidden for screen readers and Google. Wide
   logos 3rem tall; stacked / crest logos (job__logo--tall)
   4rem. Geist for the text.
   ------------------------------------------------------------ */
.job__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.875rem 2.5rem;
  padding: 1.75rem 2.25rem 1.625rem;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.96),
    rgba(255, 255, 255, 0.86)
  );
  border-bottom: 2px solid rgba(255, 255, 255, 0.6);
}
.job__name {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
}
.job__logo {
  display: block;
  width: auto;
  height: 3rem;
  max-width: min(100%, 17rem);
  object-fit: contain;
  object-position: left center;
}
.job__logo--tall {
  height: 4rem;
}
.job__company {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.job__role {
  grid-column: 1;
  grid-row: 2;
  font-family: "Geist", "Inter", sans-serif;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: #1d1d1f;
}
.job__when {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
  display: grid;
  justify-items: end;
  gap: 0.375rem;
  font-family: "Geist", "Inter", sans-serif;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.job__date,
.job__loc {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  line-height: 1.3;
  white-space: nowrap;
}
.job__date {
  font-size: 1.1875rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #1d1d1f;
}
.job__date em {
  font-style: normal;
  color: var(--ink);
}
.job__loc {
  font-size: 1rem;
  font-weight: 500;
  color: #48484a;
}
.job__date::before,
.job__loc::before {
  content: "";
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  background: var(--ink);
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}
.job__date::before {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");
}
.job__loc::before {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-12a7 7 0 0 1 14 0c0 5.8-7 12-7 12z'/%3E%3Ccircle cx='12' cy='9' r='2.5'/%3E%3C/svg%3E");
}
.job__tenure {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink);
}
.job__tenure::before {
  content: "";
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #aeaeb2;
}
/* ------------------------------------------------------------
   ■ END: EXPERIENCE > Cards > Front > Head
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: EXPERIENCE > Cards > Front > Bullets
   ------------------------------------------------------------
   SUMMARY: CALM ROWS: every résumé bullet (full length, word
   for word from the résumé) in two columns, each bullet its
   own row with a fine white divider line on top. Text is
   lighter Geist (regular, 15.5px, soft white, generous line
   spacing) with more air between rows and columns, so long
   bullets read easily instead of feeling crowded. Spare space
   on shorter cards goes to the bottom, never between rows.
   Frosted check-mark badges. NUMBERS (wrapped in <b>) stand out
   in bold Apple yellow (#ffd60a) — easy to scan.
   Extra bottom space keeps the engraved number clear.
   ------------------------------------------------------------ */
.job__list {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-content: start;
  gap: 0 3.5rem; /* rows touch — the divider lines separate them */
  margin: 0;
  padding: 1.75rem 2.75rem 5rem;
  list-style: none;
}
.job__list li {
  position: relative;
  padding: 1.1rem 0 1.1rem 1.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-family: "Geist", "Inter", sans-serif;
  font-size: 0.96875rem;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: -0.005em;
  color: rgba(255, 255, 255, 0.88);
}
.job__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(1.1rem + 0.3em); /* lines up with the first line of text */
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E")
    center / 0.7rem no-repeat;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
}
.job__list b {
  font-weight: 700;
  color: #ffd60a;
}
/* ------------------------------------------------------------
   ■ END: EXPERIENCE > Cards > Front > Bullets
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: EXPERIENCE > Cards > Front > Number
   ------------------------------------------------------------
   SUMMARY: The big soft "01" in the bottom-right corner, faded
   white like it's etched into the glass, with "/ 04 ·
   Insurance" small beside it.
   ------------------------------------------------------------ */
.job__num {
  position: absolute;
  right: 2rem;
  bottom: 1.25rem;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0;
}
.job__num b {
  font-size: 3.25rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.06em;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.5),
    rgba(255, 255, 255, 0.06)
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.job__num span {
  font-family: "Geist", "Inter", sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
}
/* ------------------------------------------------------------
   ■ END: EXPERIENCE > Cards > Front > Number
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: EXPERIENCE > Cards > Back
   ------------------------------------------------------------
   SUMMARY: The face-down side, like a premium playing card, on
   the SAME liquid glass as the front (glass + light rim are set
   in Front, so both sides always match):
   - ::before = inner panel inset by --band, with a playing-card
     double frame in soft white lines.
   - .job__pattern = Moroccan-star pattern in white (strong), sized
     so WHOLE stars fit edge to edge inside the frame. It runs
     right up to the emblem, which sits on top of it.
   - .job__tap = "Tap to view" in the bottom band (white).
   Change --band for a wider/narrower border, --pattern for a
   stronger/softer pattern.
   ------------------------------------------------------------ */
.job__back {
  --band: 1.75rem;
  --pattern: 0.7;
  display: grid;
  place-items: center;
}
.job__back::before {
  content: "";
  position: absolute;
  inset: var(--band);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.06);
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.5),
    inset 0 0 0 6px rgba(255, 255, 255, 0.05),
    inset 0 0 0 7.5px rgba(255, 255, 255, 0.28);
}
.job__pattern {
  position: absolute;
  inset: calc(var(--band) + 0.5rem);
  border-radius: 0.625rem;
  background: rgba(255, 255, 255, var(--pattern));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Crect x='10' y='10' width='20' height='20' stroke='%23000' fill='none' stroke-width='0.9'/%3E%3Crect x='10' y='10' width='20' height='20' transform='rotate(45 20 20)' stroke='%23000' fill='none' stroke-width='0.9'/%3E%3Cpath d='M0 20H5.9M34.1 20H40M20 0V5.9M20 34.1V40' stroke='%23000' fill='none' stroke-width='0.9'/%3E%3Ccircle cx='20' cy='20' r='1.6' fill='%23000'/%3E%3C/svg%3E")
    0 0 / 40px 40px round;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Crect x='10' y='10' width='20' height='20' stroke='%23000' fill='none' stroke-width='0.9'/%3E%3Crect x='10' y='10' width='20' height='20' transform='rotate(45 20 20)' stroke='%23000' fill='none' stroke-width='0.9'/%3E%3Cpath d='M0 20H5.9M34.1 20H40M20 0V5.9M20 34.1V40' stroke='%23000' fill='none' stroke-width='0.9'/%3E%3Ccircle cx='20' cy='20' r='1.6' fill='%23000'/%3E%3C/svg%3E")
    0 0 / 40px 40px round;
  pointer-events: none;
}
.job__tap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--band);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  font-family: "Geist", "Inter", sans-serif;
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
}
/* ------------------------------------------------------------
   ■ END: EXPERIENCE > Cards > Back
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: EXPERIENCE > Cards > Back > Emblem
   ------------------------------------------------------------
   SUMMARY: The logo emblem — the SAME on every card, like a
   stamp on an envelope: a pure white oval (nothing inside but
   the logo) set in a thick polished BLACK TITANIUM bezel (a
   charcoal metal ring with soft highlights — black, but not
   flat or harsh). One fixed size; the logo is sized to fit.
   To change the bezel shade, edit the 5 colors in ::after.
   ------------------------------------------------------------ */
.job__emblem {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: min(20rem, 58%);
  height: min(10.5rem, 40%);
  border-radius: 50%;
  background: #fff;
  box-shadow:
    0 0 0 1px #2c2c2e,
    0 0.75rem 2rem rgba(0, 0, 0, 0.24);
}
.job__emblem::after {
  content: "";
  position: absolute;
  inset: -0.5rem;
  border-radius: 50%;
  padding: 0.5rem;
  background: linear-gradient(
    135deg,
    #5a5a5e,
    #2a2a2d 30%,
    #6b6b70 50%,
    #262629 70%,
    #4a4a4e
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
.job__emblem img {
  display: block;
  width: min(13rem, 70%);
  max-height: 3.4rem;
  object-fit: contain;
}
.job__emblem img.job__emblem-logo--tall {
  width: auto;
  height: min(5.25rem, 66%);
  max-height: none;
}
/* ------------------------------------------------------------
   ■ END: EXPERIENCE > Cards > Back > Emblem
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: EXPERIENCE > Controls
   ------------------------------------------------------------
   SUMMARY: Thin black "eyeliner" controls, easy to see on the
   grey: ‹ › arrows are thin black outline circles (a light
   grey fill on hover), and one hairline bar per job between
   them — the empty bars are a clear grey, the active bar
   fills up in solid black while its card is showing. Each
   bar has a taller invisible click area so it's easy to hit.
   Hidden without JS (people can still swipe / scroll the row).
   ------------------------------------------------------------ */
.experience__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 0 var(--side-pad);
}
html:not(.js) .experience__controls {
  display: none;
}
.experience__arrow {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0 0 0.125rem;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #1d1d1f;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: inset 0 0 0 0.09375rem #1d1d1f; /* 1.5px liner ring */
  transition: background 0.2s var(--ease);
}
.experience__arrow:hover {
  background: rgba(0, 0, 0, 0.06);
}
.experience__arrow:focus-visible,
.experience__bar:focus-visible {
  outline: 2px solid #0071e3;
  outline-offset: 3px;
}
.experience__bars {
  display: flex;
  gap: 0.4rem;
}
.experience__bar {
  display: flex;
  align-items: center;
  width: 3.25rem;
  height: 1rem; /* easy-to-click area */
  padding: 0;
  border: 0;
  background: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)) center /
    100% 0.125rem no-repeat; /* the 2px grey line */
  cursor: pointer;
}
.experience__bar span {
  display: block;
  width: 0;
  height: 0.125rem;
  border-radius: 0.125rem;
  background: #1d1d1f;
}
/* ------------------------------------------------------------
   ■ END: EXPERIENCE > Controls
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: EXPERIENCE > Tablet
   ------------------------------------------------------------
   SUMMARY: Tablet / small laptop / zoomed in: slightly tighter
   card padding and gaps so two bullet columns still fit with
   the full-length bullets.
   ------------------------------------------------------------ */
@media (max-width: 66.75em) {
  .job__head {
    column-gap: 1.75rem;
    padding: 1.5rem 1.75rem 1.375rem;
  }
  .job__list {
    column-gap: 2rem;
    padding: 1.5rem 1.75rem 4.75rem;
  }
}
/* ------------------------------------------------------------
   ■ END: EXPERIENCE > Tablet
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: EXPERIENCE > Phone
   ------------------------------------------------------------
   SUMMARY: Phone / heavily zoomed: cards almost full width
   (a sliver of the next one still peeks in), the header stacks
   on the left (logo, role, then date and city · tenure),
   smaller logos, one bullet column (rows still touch — the
   divider lines separate them), smaller engraved number,
   a slimmer border band and a smaller emblem on the back.
   ------------------------------------------------------------ */
@media (max-width: 45.875em) {
  .experience {
    --card-w: calc(100cqw - 2.5rem);
  }
  .experience__track {
    gap: 0.75rem;
  }
  .job__head {
    grid-template-columns: 1fr;
    padding: 1.375rem 1.25rem 1.25rem;
  }
  .job__logo {
    height: 2.25rem;
  }
  .job__logo--tall {
    height: 3rem;
  }
  .job__role {
    font-size: 1.0625rem;
  }
  .job__when {
    grid-column: 1;
    grid-row: auto;
    justify-items: start;
    text-align: left;
  }
  .job__loc {
    flex-wrap: wrap;
    white-space: normal;
  }
  .job__date {
    font-size: 1.0625rem;
  }
  .job__list {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 1.25rem 1.25rem 4rem;
  }
  .job__list li {
    padding-block: 0.95rem;
    font-size: 0.9375rem;
  }
  .job__list li::before {
    top: calc(0.95rem + 0.3em);
  }
  .job__num {
    right: 1.25rem;
    bottom: 1rem;
  }
  .job__num b {
    font-size: 2.5rem;
  }
  .job__back {
    --band: 1.5rem;
  }
  .job__emblem {
    width: min(15rem, 76%);
    height: min(8rem, 30%);
  }
}
/* ------------------------------------------------------------
   ■ END: EXPERIENCE > Phone
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: EXPERIENCE > Reduced motion
   ------------------------------------------------------------
   SUMMARY: "Reduce motion": cards turn over instantly (no 3D
   animation); the script also stops the auto-advance.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .js .job__flip {
    transition: none;
  }
}
/* ------------------------------------------------------------
   ■ END: EXPERIENCE > Reduced motion
   ------------------------------------------------------------ */

/* ============================================================
   ■ END: EXPERIENCE (MASTER BLOCK)
   ============================================================ */

/* ============================================================
   ▶ START: STATS (MASTER BLOCK)
   ============================================================
   SUMMARY: "Impact, in every role." on a WARM IVORY background
   (so it reads as a new section after Experience's cool grey)
   with a soft warm-white spotlight at the top. Experience casts
   a faint shadow down onto its top edge.
   - Headline + giant $5M+ in POLISHED BLACK GLASS (lighter
     edges, deepest black in the middle, thin white highlight
     underneath), with a warm champagne glow behind $5M+.
   - 8 chips in TINTED BLACK GLASS — blue-black (Insurance),
     green-black (Business), purple-black (Code) — each with a
     colored rim and a soft glow in its color.
   On scroll-in (script.js STATS COUNT-UP) every number counts
   up and the chips fade in one by one. Without JS or with
   "reduce motion", everything simply shows.
   To change a color, edit it in STATS > Setup.

   INSIDE (same names in index.html):
     STATS > Setup
     STATS > Divider
     STATS > Header
     STATS > Feature
     STATS > Chips
     STATS > Tablet
     STATS > Phone
   ============================================================ */

/* ------------------------------------------------------------
   ▶ START: STATS > Setup
   ------------------------------------------------------------
   SUMMARY: Role colors (bright RGB for glows + deeper shades
   for text on light), the polished-black-glass text recipe,
   the WARM IVORY background (#faf8f3 → #efece5) with a warm
   white spotlight at the top, equal padding and max width.
   ------------------------------------------------------------ */
.impact {
  /* Role colors — bright (RGB, for glows / rims) */
  --c-insurance: 41, 151, 255; /* #2997ff blue   */
  --c-business: 48, 209, 88; /*  #30d158 green  */
  --c-code: 191, 90, 242; /*     #bf5af2 purple */

  /* Role colors — deeper, readable on the light background */
  --ink-insurance: #0a6fd6;
  --ink-business: #1a8f3e;
  --ink-code: #8e35c9;

  /* Polished black glass (for headline + $5M+) */
  --black-glass: linear-gradient(
    180deg,
    #5a5a5f 0%,
    #1d1d1f 38%,
    #000 55%,
    #2c2c2e 82%,
    #5a5a5f 100%
  );
  --glass-shine: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.9))
    drop-shadow(0 0.375rem 0.875rem rgba(0, 0, 0, 0.18));

  /* Equal space above the header and below the chips */
  --impact-pad: clamp(3rem, 2.25rem + 2.5vw, 4.25rem);

  position: relative;
  isolation: isolate;
  background:
    radial-gradient(
      ellipse 70% 50% at 50% 0%,
      #fffdf8 0%,
      rgba(255, 253, 248, 0) 70%
    ),
    linear-gradient(180deg, #faf8f3 0%, #efece5 100%);
  color: #1d1d1f;
  padding: var(--impact-pad) var(--side-pad);
}

.impact__inner {
  max-width: 64rem;
  margin: 0 auto;
}
/* ------------------------------------------------------------
   ■ END: STATS > Setup
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: STATS > Divider
   ------------------------------------------------------------
   SUMMARY: Closes the small black gaps above and below Stats
   (so it touches Experience and Skills) and adds a very faint
   1px line on both edges — strongest in the middle, fading
   out at the sides. Decorative only.
   ------------------------------------------------------------ */
.impact {
  margin-block: calc(var(--gap) * -1);
}
.impact::before,
.impact::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 0, 0, 0.06) 30%,
    rgba(0, 0, 0, 0.06) 70%,
    transparent 100%
  );
  pointer-events: none;
}
.impact::before {
  top: 0;
}
.impact::after {
  bottom: 0;
}
/* ------------------------------------------------------------
   ■ END: STATS > Divider
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: STATS > Header
   ------------------------------------------------------------
   SUMMARY: "By the numbers" + "Impact, in every role." in
   polished black glass (same sizes as before).
   ------------------------------------------------------------ */
.impact__header {
  text-align: center;
}
.impact__eyebrow,
.impact__title {
  background: var(--black-glass);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: var(--glass-shine);
}
.impact__eyebrow {
  font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem);
  font-weight: 800;
  letter-spacing: -0.035em;
}
.impact__title {
  margin-top: 0.375rem;
  padding-bottom: 0.08em; /* room for the comma */
  font-size: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.055em;
}
/* ------------------------------------------------------------
   ■ END: STATS > Header
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: STATS > Feature
   ------------------------------------------------------------
   SUMMARY: The hero stat.
   - Glow (::before): soft, warm CHAMPAGNE backlight behind
     $5M+ (luxury product lighting). Change the two rgba
     values to make it warmer / softer.
   - Number: huge, polished black glass; digits keep equal
     width while counting so nothing jiggles.
   - Label: bold near-black.
   - Space below it before the chips.
   ------------------------------------------------------------ */
.impact__feature {
  position: relative;
  margin-top: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  margin-bottom: clamp(2rem, 1.5rem + 2vw, 2.75rem);
  text-align: center;
}
.impact__feature::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 40%;
  width: min(100%, 36rem);
  height: 17rem;
  transform: translate(-50%, -50%);
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    closest-side,
    rgba(255, 214, 150, 0.55) 0%,
    rgba(255, 236, 205, 0.3) 55%,
    transparent 100%
  );
}

.impact__hero {
  font-size: clamp(4.5rem, 2rem + 10vw, 9rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.06em;
}
.impact__hero-num {
  display: inline-block;
  padding: 0 0.04em 0.06em;
  font-variant-numeric: tabular-nums;
  background: var(--black-glass);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: var(--glass-shine);
}

.impact__hero-label {
  margin-top: 0.5rem;
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: #1d1d1f;
}
/* ------------------------------------------------------------
   ■ END: STATS > Feature
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: STATS > Chips
   ------------------------------------------------------------
   SUMMARY: 8 chips in TINTED BLACK GLASS, 4 across. Each chip
   is black with a whisper of its role color (--tint-top /
   --tint-bottom), a colored rim, a soft glow in its color, an
   icon tile, white number and light label. Hover: lifts and
   glows a little more. Fade-in on scroll (only when JS runs,
   staggered by --i).
   ------------------------------------------------------------ */
.impact__chips {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 1rem;
}
.impact__chip {
  --c: 255, 255, 255;
  --tint-top: #1c1c1f;
  --tint-bottom: #0a0a0c;
  --i: 0;
  display: flex;
  align-items: center;
  gap: 0.875rem;
  min-width: 0;
  padding: 0.9375rem 1rem;
  border-radius: 1rem;
  background: linear-gradient(180deg, var(--tint-top), var(--tint-bottom));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 0 0 1px rgba(var(--c), 0.45),
    0 0 1.125rem rgba(var(--c), 0.35),
    0 0.5rem 1.125rem rgba(0, 0, 0, 0.18);
  transition:
    translate 0.25s var(--ease),
    box-shadow 0.25s var(--ease);
}
.impact__chip:hover {
  translate: 0 -0.125rem;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 0 0 1px rgba(var(--c), 0.65),
    0 0 1.625rem rgba(var(--c), 0.5),
    0 0.75rem 1.5rem rgba(0, 0, 0, 0.22);
}
.impact__chip--insurance {
  --c: var(--c-insurance);
  --tint-top: #0c1b30; /* blue-black */
  --tint-bottom: #04070d;
}
.impact__chip--business {
  --c: var(--c-business);
  --tint-top: #0b2215; /* green-black */
  --tint-bottom: #030805;
}
.impact__chip--code {
  --c: var(--c-code);
  --tint-top: #1f0f2c; /* purple-black */
  --tint-bottom: #08040c;
}

.impact__chip-icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.625rem;
  color: rgb(var(--c));
  background: rgba(var(--c), 0.18);
  box-shadow: inset 0 0 0 1px rgba(var(--c), 0.55);
}
.impact__chip-icon svg {
  width: 1.125rem;
  height: 1.125rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.impact__chip-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.impact__chip-value {
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--white);
}
.impact__chip-label {
  margin-top: 0.3125rem;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.35;
  color: #d2d2d7;
}

/* Scroll-in fade (only when JavaScript is running) */
.js .impact__chip {
  opacity: 0;
  transform: translateY(0.75rem);
  transition:
    opacity 0.6s var(--ease) calc(var(--i) * 70ms),
    transform 0.6s var(--ease) calc(var(--i) * 70ms),
    translate 0.25s var(--ease),
    box-shadow 0.25s var(--ease);
}
.js .impact.is-in .impact__chip {
  opacity: 1;
  transform: none;
}
.impact__chip:nth-child(2) {
  --i: 1;
}
.impact__chip:nth-child(3) {
  --i: 2;
}
.impact__chip:nth-child(4) {
  --i: 3;
}
.impact__chip:nth-child(5) {
  --i: 4;
}
.impact__chip:nth-child(6) {
  --i: 5;
}
.impact__chip:nth-child(7) {
  --i: 6;
}
.impact__chip:nth-child(8) {
  --i: 7;
}
/* ------------------------------------------------------------
   ■ END: STATS > Chips
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: STATS > Tablet
   ------------------------------------------------------------
   SUMMARY: Tablet / moderately zoomed — chips go 2 across.
   ------------------------------------------------------------ */
@media (max-width: 66.75em) {
  .impact__chips {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 40rem;
    margin-inline: auto;
  }
}
/* ------------------------------------------------------------
   ■ END: STATS > Tablet
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: STATS > Phone
   ------------------------------------------------------------
   SUMMARY: Phone / heavily zoomed:
   - Chips stay 2 across but STACK inside (icon on top, then
     the number, then the label) so the words get the full
     chip width — airy, never squeezed.
   - Very narrow phones (≤22.5em): 1 chip per row, side by
     side layout again.
   ------------------------------------------------------------ */
@media (max-width: 45.875em) {
  .impact__chips {
    margin-top: clamp(2rem, 1.5rem + 3vw, 2.5rem);
    gap: 0.625rem;
  }
  .impact__chip {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem 1rem 1.0625rem;
  }
  .impact__chip-label {
    margin-top: 0.375rem;
  }
}
@media (max-width: 22.5em) {
  .impact__chips {
    grid-template-columns: 1fr;
  }
  .impact__chip {
    flex-direction: row;
    align-items: center;
  }
}
/* ------------------------------------------------------------
   ■ END: STATS > Phone
   ------------------------------------------------------------ */

/* ============================================================
   ■ END: STATS (MASTER BLOCK)
   ============================================================ */

/* ============================================================
   ▶ START: SKILLS (MASTER BLOCK)
   ============================================================
   SUMMARY: "The Toolkit." A sliding segmented control switches
   one CONTAINED CARD at a time (Google Pixel style): a softly
   tinted rounded card with a thin outline in the area's color,
   the photo flush to its left edge (always fully clear, never
   dimmed), and on the right the icon + title, summary and the
   skills as color-outlined pills in small groups.
   Colors are just bright enough to frame the content, never
   loud. On phones the photo goes on top.
   Without JavaScript: no tabs, all three cards stacked.
   Category colors (RGB, Apple deep — same as Experience) are
   on each card in SKILLS > Cards.

   INSIDE (same names in index.html):
     SKILLS > Setup
     SKILLS > Header
     SKILLS > Tabs
     SKILLS > Cards
       SKILLS > Cards > Photo
       SKILLS > Cards > Body
       SKILLS > Cards > Highlight
     SKILLS > Tablet
     SKILLS > Phone
     SKILLS > Reduced motion
   ============================================================ */

/* ------------------------------------------------------------
   ▶ START: SKILLS > Setup
   ------------------------------------------------------------
   SUMMARY: Section width and background: navy fade at the very
   top (blends out of Stats), soft blue glow left, soft purple
   glow right, near-black base.
   ------------------------------------------------------------ */
.skills {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    linear-gradient(180deg, #070b18 0, rgba(7, 11, 24, 0) 6rem),
    radial-gradient(
      ellipse 45% 40% at 20% 60%,
      rgba(10, 96, 255, 0.12),
      transparent 70%
    ),
    radial-gradient(
      ellipse 45% 40% at 80% 60%,
      rgba(88, 86, 214, 0.12),
      transparent 70%
    ),
    linear-gradient(180deg, #0b0b0d 0%, #050506 100%);
  color: var(--gray-100);
  padding: clamp(3rem, 2rem + 3vw, 5rem) var(--side-pad);
}
.skills__inner {
  max-width: 68rem;
  margin: 0 auto;
}
/* ------------------------------------------------------------
   ■ END: SKILLS > Setup
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: SKILLS > Header
   ------------------------------------------------------------
   SUMMARY: Big white "Skills" and huge silver "The Toolkit.",
   with comfortable space before the tabs.
   ------------------------------------------------------------ */
.skills__header {
  text-align: center;
  margin-bottom: clamp(2rem, 1.5rem + 2vw, 2.75rem);
}
.skills__eyebrow {
  font-size: clamp(1.875rem, 1.4rem + 1.6vw, 2.75rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.045em;
  color: var(--white);
}
.skills__title {
  margin-top: 0.5rem;
  padding-bottom: 0.08em; /* room for the period / descenders */
  font-size: clamp(3.25rem, 1.75rem + 5vw, 5.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.06em;
}
/* ------------------------------------------------------------
   ■ END: SKILLS > Header
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: SKILLS > Tabs
   ------------------------------------------------------------
   SUMMARY: Frosted pill track with three tabs. The colored
   pill (.skills__thumb) slides under the chosen tab; the
   script sets its position and color (--c). Hidden without
   JavaScript (all cards show instead).
   ------------------------------------------------------------ */
.skills__tabs {
  --c: 10, 96, 255;
  position: relative;
  display: flex;
  width: max-content;
  max-width: 100%;
  margin: 0 auto clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem);
  padding: 0.3rem;
  border-radius: 980px;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
html:not(.js) .skills__tabs {
  display: none;
}
.skills__tab {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.6rem 1.15rem;
  border: 0;
  border-radius: 980px;
  background: none;
  font-family: "Geist", "Inter", sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  white-space: nowrap;
  color: #a1a1a6;
  cursor: pointer;
  transition: color 0.3s ease;
}
.skills__tab:hover {
  color: #f5f5f7;
}
.skills__tab[aria-selected="true"] {
  color: #fff;
}
.skills__tab:focus-visible {
  outline: 2px solid #2997ff;
  outline-offset: 2px;
}
.skills__tab svg {
  flex-shrink: 0;
  width: 1.1rem;
  height: 1.1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.skills__thumb {
  position: absolute;
  top: 0.3rem;
  bottom: 0.3rem;
  left: 0;
  width: 0;
  border-radius: 980px;
  background: rgba(var(--c), 0.9);
  box-shadow: 0 0.4rem 1.2rem rgba(var(--c), 0.4);
  transition:
    left 0.45s cubic-bezier(0.3, 0.7, 0.2, 1),
    width 0.45s cubic-bezier(0.3, 0.7, 0.2, 1),
    background-color 0.45s ease,
    box-shadow 0.45s ease;
}
/* ------------------------------------------------------------
   ■ END: SKILLS > Tabs
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: SKILLS > Cards
   ------------------------------------------------------------
   SUMMARY: One contained card per area. Each card's colors —
   --c bright (outline, pills), --l light (icon). Softly tinted
   glass with a 1.5px outline in the area color.
   SAME SIZE ALWAYS: with JavaScript all three cards sit in the
   SAME spot (stacked in one grid cell), so the box is always
   as tall as the tallest card and the page never moves when
   you switch tabs. Hidden cards stay in place but invisible.
   SLIDE: the new card slides in from the side you clicked
   toward while the old one slides out the other way and fades
   (.is-before = the card sits to the left of the chosen one).
   Before the script is ready only the first card shows.
   Without JavaScript: all three cards show one under another.
   ------------------------------------------------------------ */
.skills__cards {
  display: grid;
}
.skills__card {
  --c: 10, 96, 255; /*  #0a60ff blue (Insurance) */
  --l: 143, 176, 255; /* #8fb0ff */
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  border-radius: 2rem;
  overflow: hidden;
  background: linear-gradient(
    135deg,
    rgba(var(--c), 0.1),
    rgba(255, 255, 255, 0.03)
  );
  box-shadow: inset 0 0 0 1.5px rgba(var(--c), 0.35);
  outline: none;
  transition:
    opacity 0.45s ease,
    visibility 0.45s,
    transform 0.55s cubic-bezier(0.3, 0.7, 0.2, 1),
    box-shadow 0.4s ease;
}
.skills__card--business {
  --c: 48, 162, 76; /*  #30a24c green */
  --l: 160, 217, 173; /* #a0d9ad */
}
.skills__card--code {
  --c: 88, 86, 214; /*  #5856d6 indigo */
  --l: 178, 177, 240; /* #b2b1f0 */
}
.js .skills__card {
  grid-area: 1 / 1; /* all three in the same spot */
}
.skills__card[hidden] {
  display: grid; /* keeps its size, so the box stays the same height */
  visibility: hidden;
  opacity: 0;
  transform: translateX(2.5rem); /* waits on the right */
  pointer-events: none;
}
.skills__card[hidden].is-before {
  transform: translateX(-2.5rem); /* waits on the left */
}
.js .skills__cards:not(.is-ready) .skills__card:not(:first-child) {
  visibility: hidden;
  opacity: 0;
}
html:not(.js) .skills__card + .skills__card {
  margin-top: 1.5rem;
}
/* ------------------------------------------------------------
   ■ END: SKILLS > Cards
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: SKILLS > Cards > Photo
   ------------------------------------------------------------
   SUMMARY: The photo fills the left side edge to edge (no gap,
   no dimming), cropped to cover.
   ------------------------------------------------------------ */
.skills__photo {
  position: relative;
  min-height: 26rem;
}
.skills__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* ------------------------------------------------------------
   ■ END: SKILLS > Cards > Photo
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: SKILLS > Cards > Body
   ------------------------------------------------------------
   SUMMARY: Right side, left-aligned and starting at the TOP
   (so every card's title sits in the same place): icon (light
   shade) + title, grey summary, then the groups — small grey
   label and pills with a soft tint and a 1.5px outline in the
   area color.
   ------------------------------------------------------------ */
.skills__body {
  padding: 2.5rem;
  align-self: start;
}
.skills__name {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.035em;
  color: #fff;
}
.skills__name svg {
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  fill: none;
  stroke: rgb(var(--l));
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.skills__desc {
  max-width: 30rem;
  margin: 0.6rem 0 1.75rem;
  font-family: "Geist", "Inter", sans-serif;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: #a1a1a6;
}
.skills__group + .skills__group {
  margin-top: 1.15rem;
}
.skills__group-title {
  margin-bottom: 0.55rem;
  font-family: "Geist", "Inter", sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #8e8e93;
}
.skills__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  list-style: none;
}
.skills__pills li {
  padding: 0.42rem 0.8rem;
  border-radius: 980px;
  font-family: "Geist", "Inter", sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.3;
  color: #f5f5f7;
  background: rgba(var(--c), 0.08);
  box-shadow: inset 0 0 0 1.5px rgba(var(--c), 0.45);
}
/* ------------------------------------------------------------
   ■ END: SKILLS > Cards > Body
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: SKILLS > Cards > Highlight
   ------------------------------------------------------------
   SUMMARY: The About boxes add "is-highlighted" for ~2.8s: the
   card's outline lights up in its color with a soft glow. The
   same ring shows when the card has keyboard focus.
   ------------------------------------------------------------ */
.skills__card.is-highlighted,
.skills__card:focus-visible,
html:not(.js) .skills__card:target {
  box-shadow:
    inset 0 0 0 2px rgba(var(--c), 0.9),
    0 0 2.5rem rgba(var(--c), 0.4);
}
/* ------------------------------------------------------------
   ■ END: SKILLS > Cards > Highlight
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: SKILLS > Tablet
   ------------------------------------------------------------
   SUMMARY: Tablet / small laptop / zoomed in: a bit less
   padding, smaller title, slightly shorter photo.
   ------------------------------------------------------------ */
@media (max-width: 66.75em) {
  .skills__photo {
    min-height: 22rem;
  }
  .skills__body {
    padding: 2rem;
  }
  .skills__name {
    font-size: 1.875rem;
  }
  .skills__desc {
    font-size: 1rem;
  }
}
/* ------------------------------------------------------------
   ■ END: SKILLS > Tablet
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: SKILLS > Phone
   ------------------------------------------------------------
   SUMMARY: Phone / heavily zoomed: photo on top (wide), words
   underneath; tabs get tighter and drop their icons on very
   narrow screens so all three always fit on one line.
   ------------------------------------------------------------ */
@media (max-width: 45.875em) {
  .skills__card {
    grid-template-columns: 1fr;
    border-radius: 1.5rem;
  }
  .skills__photo {
    min-height: 0;
    aspect-ratio: 16 / 10;
  }
  .skills__body {
    padding: 1.5rem 1.375rem 1.75rem;
  }
  .skills__name {
    font-size: 1.625rem;
  }
  .skills__name svg {
    width: 1.4rem;
    height: 1.4rem;
  }
  .skills__tab {
    gap: 0.35rem;
    padding: 0.55rem 0.8rem;
    font-size: 0.875rem;
  }
}
@media (max-width: 26em) {
  .skills__tab svg {
    display: none;
  }
  .skills__tab {
    padding: 0.55rem 0.7rem;
    font-size: 0.8125rem;
  }
}
/* ------------------------------------------------------------
   ■ END: SKILLS > Phone
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: SKILLS > Reduced motion
   ------------------------------------------------------------
   SUMMARY: "Reduce motion": the pill jumps instead of sliding
   and cards swap instantly — no slide, no fade.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .skills__thumb,
  .skills__tab,
  .skills__card {
    transition: none;
  }
  .skills__card[hidden],
  .skills__card[hidden].is-before {
    transform: none;
  }
}
/* ------------------------------------------------------------
   ■ END: SKILLS > Reduced motion
   ------------------------------------------------------------ */

/* ============================================================
   ■ END: SKILLS (MASTER BLOCK)
   ============================================================ */

/* ============================================================
   ▶ START: WORK (MASTER BLOCK)
   ============================================================
   SUMMARY: Project showcase on a light Apple-style background.
   Big header, then a two-column stage: a compact project list
   (left) and a realistic CSS MacBook (right, the star) playing
   your screen recordings. The playing project shows a progress
   bar (filled by script.js). Long titles / descriptions are
   clipped with "…" so the list never breaks.
   Phone / zoomed in (≤45.875em): one column, list below the
   MacBook.

   INSIDE (same names in index.html):
     WORK > Setup
     WORK > Intro heading
     WORK > Stage
       WORK > Stage > Project list
       WORK > Stage > MacBook
         WORK > Stage > MacBook > Colors
         WORK > Stage > MacBook > Slide
     WORK > Phone
   ============================================================ */

/* ------------------------------------------------------------
   ▶ START: WORK > Setup
   ------------------------------------------------------------
   SUMMARY: Stacks the Work pieces; light background. Smaller
   top padding so "Work" sits closer to the line above; the
   bottom keeps its normal padding.
   ------------------------------------------------------------ */
.work {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}
.work__intro {
  --work-pad: clamp(2.75rem, 2rem + 2.5vw, 4rem);
  --work-pad-top: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem);

  padding: var(--work-pad-top) var(--side-pad) var(--work-pad);
  background: linear-gradient(180deg, #f5f5f7 0%, #e8e9ee 100%);
}
/* ------------------------------------------------------------
   ■ END: WORK > Setup
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: WORK > Intro heading
   ------------------------------------------------------------
   SUMMARY: Bigger pure-black "Work" label (800, tight). Headline
   in a polished-graphite finish — lighter at the top, deep black
   through the middle, a soft reflection at the bottom — with a
   thin white edge + soft shadow so it looks glossy and raised.
   Same size as "Where I've worked." (impactful, not huge).
   Extra room at the bottom so g / y / p aren't cut off.
   Subtitle forced to Inter, medium weight, dark grey.
   ------------------------------------------------------------ */
.work__eyebrow {
  font-size: clamp(1.875rem, 1.45rem + 1.6vw, 2.75rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.045em;
  color: var(--black);
}
.work__title {
  margin-top: 0.375rem;
  padding-bottom: 0.08em;
  font-size: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.055em;
  background: linear-gradient(
    180deg,
    #5a5a5f 0%,
    #1d1d1f 38%,
    #000000 52%,
    #2c2c2e 78%,
    #6e6e73 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.9))
    drop-shadow(0 0.375rem 0.625rem rgba(0, 0, 0, 0.12));
}
.work__subtitle {
  max-width: 38rem;
  margin: 0.75rem auto 0;
  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  font-size: clamp(1.0625rem, 0.95rem + 0.45vw, 1.25rem);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: #3a3a3c;
}
/* ------------------------------------------------------------
   ■ END: WORK > Intro heading
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: WORK > Stage
   ------------------------------------------------------------
   SUMMARY: List column (left) + MacBook column (right).
   The MacBook column is LOCKED at --mac-width; the list
   column only gets the space left over, so longer text can
   never shrink or move the laptop. The list hugs the
   MacBook (right edge pinned) and grows LEFT.
   NOTE: on screens too narrow to fit both, the MacBook scales
   down (it has to); phones switch to one column.
   ------------------------------------------------------------ */
.work__stage {
  --mac-width: 63rem; /* laptop size — change to resize it */
  --list-max: 20rem; /* widest the cards can get */
  --list-min: 11rem; /* narrowest the cards can get */
  --stage-gap: clamp(1rem, 0.5rem + 2vw, 2.5rem);

  display: grid;
  grid-template-columns:
    minmax(var(--list-min), 1fr)
    minmax(0, var(--mac-width));
  align-items: center;
  gap: var(--stage-gap);
  max-width: calc(var(--list-max) + var(--stage-gap) + var(--mac-width));
  margin: clamp(2rem, 1.5rem + 2vw, 3rem) auto 0;
  text-align: left;
}
/* ------------------------------------------------------------
   ■ END: WORK > Stage
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: WORK > Stage > Project list
   ------------------------------------------------------------
   SUMMARY: One white card per project (hairline border + soft
   shadow) so each button reads as its own card. Title and
   description are CENTERED, with a short divider line under
   the title (drawn by CSS, nothing to add in HTML).
   - Right edge pinned next to the MacBook; extra width grows
     LEFT, up to --list-max, then text wraps (cards get taller).
   - Every card is the SAME width and height: the biggest card
     sets the size for all of them.
   - Progress bar always sits at the bottom of the card.
   Hover (not playing): card lifts slightly, border darkens.
   Playing: black card, white text, white progress bar (moves
   automatically as videos change).
   ------------------------------------------------------------ */
.work__list {
  justify-self: end;
  display: grid;
  grid-auto-rows: 1fr; /* equal heights */
  gap: 0.625rem;
  width: fit-content; /* as wide as the widest card… */
  max-width: min(100%, var(--list-max)); /* …up to the limit */
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.work__list > li {
  display: flex;
  min-width: 0;
}
.work__item {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  min-width: 0;
  padding: 0.875rem 1rem 0.9375rem;
  border: 1px solid #e3e3e8;
  border-radius: 0.875rem;
  background: var(--white);
  box-shadow: 0 0.125rem 0.625rem rgba(0, 0, 0, 0.05);
  font: inherit;
  text-align: center;
  cursor: pointer;
  transition:
    transform 0.35s var(--ease),
    background 0.35s var(--ease),
    border-color 0.35s var(--ease),
    box-shadow 0.35s var(--ease);
}

/* Title + short divider line under it */
.work__item-name {
  display: block;
  font-size: clamp(0.9375rem, 0.85rem + 0.25vw, 1.0625rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
  color: var(--gray-800);
  transition: color 0.35s var(--ease);
}
.work__item-name::after {
  content: "";
  display: block;
  width: 1.75rem;
  height: 1.5px;
  margin: 0.5rem auto;
  border-radius: 1px;
  background: #c7c7cc;
  transition: background 0.35s var(--ease);
}

.work__item-text {
  flex-grow: 1; /* pushes the progress bar to the bottom */
  font-size: clamp(0.8125rem, 0.75rem + 0.2vw, 0.875rem);
  line-height: 1.45;
  overflow-wrap: anywhere;
  color: #48484a;
  transition: color 0.35s var(--ease);
}
.work__item-bar {
  height: 2px;
  margin-top: 0.625rem;
  overflow: hidden;
  border-radius: 2px;
  background: #48484a;
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}
.work__item-fill {
  display: block;
  height: 100%;
  background: var(--white);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.25s linear;
}

/* Hover (not playing) — lifts slightly, border darkens */
.work__item:not([aria-current="true"]):hover {
  transform: translateY(-0.125rem);
  border-color: #d2d2d7;
  box-shadow: 0 0.375rem 1rem rgba(0, 0, 0, 0.08);
}

/* Playing — black card, white text, white progress bar */
.work__item[aria-current="true"] {
  background: var(--gray-800);
  border-color: var(--gray-800);
  box-shadow: 0 0.625rem 1.5rem rgba(0, 0, 0, 0.22);
}
.work__item[aria-current="true"] .work__item-name {
  color: var(--white);
}
.work__item[aria-current="true"] .work__item-name::after {
  background: #6e6e73;
}
.work__item[aria-current="true"] .work__item-text {
  color: #d1d1d6;
}
.work__item[aria-current="true"] .work__item-bar {
  opacity: 1;
}
.work__item:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}
/* ------------------------------------------------------------
   ■ END: WORK > Stage > Project list
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: WORK > Stage > MacBook
   ------------------------------------------------------------
   SUMMARY: Realistic MacBook in pure CSS. Lid = black glass
   bezel with a thin metal edge, camera notch and soft shadow
   around it; screen = 16:10 with a faint glass reflection;
   hinge; aluminum base (wider than the lid) with the front
   thumb notch; soft desk shadow underneath. All sizes are
   relative, so it scales with the page and zoom.
   ------------------------------------------------------------ */
.mac {
  position: relative;
  min-width: 0;
}

/* Lid + bezel */
.mac__lid {
  position: relative;
  margin: 0 6.2%;
  padding: 1.4% 1.4% 1.8%;
  border-radius: clamp(0.75rem, 0.5rem + 1vw, 1.25rem)
    clamp(0.75rem, 0.5rem + 1vw, 1.25rem) 0.25rem 0.25rem;
  background: #0b0b0c;
  box-shadow:
    0 0 0 1.5px var(--mac-edge),
    0 0 0 2.5px var(--mac-edge-2),
    0 -0.75rem 2.5rem rgba(0, 0, 0, 0.18),
    0 0.75rem 2.5rem rgba(0, 0, 0, 0.12);
}

/* Camera notch + lens */
.mac__notch {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 13%;
  height: clamp(0.5rem, 0.35rem + 0.4vw, 0.875rem);
  transform: translateX(-50%);
  border-radius: 0 0 0.5rem 0.5rem;
  background: #0b0b0c;
}
.mac__notch::before {
  content: "";
  width: 0.3125rem;
  height: 0.3125rem;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #3a4a6a, #0a0d14 60%);
  box-shadow: 0 0 0 1px #1a1a1c;
}

/* Screen */
.work__display {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 0.375rem 0.375rem 0.125rem 0.125rem;
  background: linear-gradient(135deg, #0d1a36 0%, #070b18 70%);
}
/* Faint glass reflection */
.work__display::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    115deg,
    rgba(255, 255, 255, 0.14) 0%,
    rgba(255, 255, 255, 0.04) 28%,
    transparent 42%
  );
  pointer-events: none;
}

/* Hinge */
.mac__hinge {
  height: clamp(0.3rem, 0.2rem + 0.3vw, 0.5rem);
  margin: 0 6.6%;
  border-radius: 0 0 0.1875rem 0.1875rem;
  background: var(--mac-hinge);
}

/* Base + thumb notch + desk shadow */
.mac__base {
  position: relative;
  height: clamp(0.6rem, 0.4rem + 0.6vw, 1.05rem);
  border-radius: 0.125rem 0.125rem 1rem 1rem / 0.125rem 0.125rem 0.75rem 0.75rem;
  background: var(--mac-base);
  box-shadow: inset 0 1px 0 var(--mac-base-hi);
}
.mac__base::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 15%;
  height: 40%;
  transform: translateX(-50%);
  border-radius: 0 0 0.5rem 0.5rem;
  background: var(--mac-lip);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
}
.mac__base::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 2%;
  right: 2%;
  height: clamp(1rem, 0.75rem + 1vw, 1.75rem);
  background: radial-gradient(
    50% 60% at 50% 0%,
    rgba(0, 0, 0, 0.28),
    transparent 75%
  );
  pointer-events: none;
}
/* ------------------------------------------------------------
   ■ END: WORK > Stage > MacBook
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: WORK > Stage > MacBook > Colors
   ------------------------------------------------------------
   SUMMARY: Laptop finishes. "mac" alone = jet black.
   Add mac--white or mac--red in index.html to switch.
   ------------------------------------------------------------ */
.mac {
  --mac-edge: #2a2b2e;
  --mac-edge-2: #111113;
  --mac-hinge: linear-gradient(180deg, #0e0e10, #2c2d31 45%, #0e0e10);
  --mac-base: linear-gradient(
    180deg,
    #3a3b3f 0%,
    #1f2023 45%,
    #141416 80%,
    #0b0b0c 100%
  );
  --mac-base-hi: #55565b;
  --mac-lip: linear-gradient(180deg, #0e0e10, #222327);
}
.mac--white {
  --mac-edge: #ffffff;
  --mac-edge-2: #cfd1d6;
  --mac-hinge: linear-gradient(180deg, #bfc1c6, #e9eaee 45%, #bfc1c6);
  --mac-base: linear-gradient(
    180deg,
    #ffffff 0%,
    #f1f2f4 40%,
    #dcdee2 80%,
    #b9bbc0 100%
  );
  --mac-base-hi: #ffffff;
  --mac-lip: linear-gradient(180deg, #c9cbd0, #e6e7ea);
}
.mac--red {
  --mac-edge: #c8102e;
  --mac-edge-2: #7a0a1c;
  --mac-hinge: linear-gradient(180deg, #5a0613, #9e0c22 45%, #5a0613);
  --mac-base: linear-gradient(
    180deg,
    #e2283f 0%,
    #c8102e 40%,
    #9e0c22 80%,
    #6e0717 100%
  );
  --mac-base-hi: #f0566a;
  --mac-lip: linear-gradient(180deg, #7a0a1c, #a50e25);
}
/* ------------------------------------------------------------
   ■ END: WORK > Stage > MacBook > Colors
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: WORK > Stage > MacBook > Slide
   ------------------------------------------------------------
   SUMMARY: Each video fills the screen; only the active one is
   visible (soft crossfade). Cropped to fill, top of the page
   kept in view.
   ------------------------------------------------------------ */
.showcase__slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.6s var(--ease),
    visibility 0.6s var(--ease);
}
.showcase__slide.is-active {
  opacity: 1;
  visibility: visible;
}
.showcase__shot {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 0%;
}
/* ------------------------------------------------------------
   ■ END: WORK > Stage > MacBook > Slide
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: WORK > Phone
   ------------------------------------------------------------
   SUMMARY: Phone / heavily zoomed — one column: MacBook on top,
   project cards below it, full width, in a wrapping row. Cards
   still share the same height.
   ------------------------------------------------------------ */
@media (max-width: 45.875em) {
  .work__stage {
    grid-template-columns: minmax(0, 1fr);
    max-width: none;
  }
  .mac {
    order: -1;
  }
  .work__list {
    justify-self: stretch;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr));
    width: auto;
    max-width: none;
    margin-top: 1rem;
  }
}
/* ------------------------------------------------------------
   ■ END: WORK > Phone
   ------------------------------------------------------------ */

/* ============================================================
   ■ END: WORK (MASTER BLOCK)
   ============================================================ */

/* ============================================================
   ▶ START: EDUCATION (MASTER BLOCK)
   ============================================================
   SUMMARY: "Always learning." on Education's near-black, with
   the stars rising into Contact below. FEATURE + LIST layout:
   two big feature cards (License, CS degree), then five small
   cards in a row. Each card's color: License = blue, Degree =
   indigo, Certification = green (RGB --c bright, --l light).
   Cards light up a little in their color on hover.

   INSIDE (same names in index.html):
     EDUCATION > Section
     EDUCATION > Header
     EDUCATION > Features
     EDUCATION > List
     EDUCATION > Tablet
     EDUCATION > Phone
   ============================================================ */

/* ------------------------------------------------------------
   ▶ START: EDUCATION > Section
   ------------------------------------------------------------
   SUMMARY: Pulls itself over the small gaps between sections
   (no black bars).
   - SOLID near-black block with a HARD edge at the top
     (Projects ends, Education starts). The BOTTOM has NO edge:
     Contact continues the same black, so the two sections
     read as one night sky ("Stars rise").
   - EVEN spacing: --edu-pad is the space from the top edge to
     the heading AND from the cards to the bottom edge (same
     size as Stats, so the sections match).
   - Content width: --edu-w (same as Skills).
   - Faint BLACK GLOW (box-shadow) spills up onto the light
     Projects above only. z-index: 1 keeps it on top.
   - ::before = the SAME stars as Contact (contact-stars.svg)
     rising into the bottom of Education and fading out upward.
     Change height (how far up) or opacity (how bright).
   - A faint light behind the heading, plus a fine film grain
     (::after).
   ------------------------------------------------------------ */
.education {
  --edu-pad: clamp(3rem, 2.25rem + 2.5vw, 4.25rem); /* top = bottom */
  --edu-w: 68rem;

  position: relative;
  z-index: 1;
  isolation: isolate;
  overflow: hidden;
  margin-block: calc(var(--gap) * -1);
  padding: var(--edu-pad) var(--side-pad);
  color: var(--gray-100);
  background:
    radial-gradient(
      40rem 16rem at 50% calc(var(--edu-pad) + 2rem),
      rgba(255, 255, 255, 0.06),
      transparent 70%
    ),
    linear-gradient(180deg, #0b0b0d 0%, #08080a 100%);
  box-shadow: 0 -1rem 2.5rem -0.5rem rgba(0, 0, 0, 0.22); /* glow up */
}
.education::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  height: 16rem;
  opacity: 0.7;
  pointer-events: none;
  background: url("./images/contact-stars.svg") center top / 150rem auto
    no-repeat;
  -webkit-mask-image: linear-gradient(to top, #000, transparent);
  mask-image: linear-gradient(to top, #000, transparent);
}
.education::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.16;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* ------------------------------------------------------------
   ■ END: EDUCATION > Section
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: EDUCATION > Header
   ------------------------------------------------------------
   SUMMARY: Centered, same style and sizes as the Skills
   header: big white Inter 800 "Education & Certifications"
   and a huge Inter 800 "Always learning." in bright silver
   with a soft shadow. Long lines wrap evenly on small screens
   (text-wrap: balance) and there's room under the title so
   the "g" is never cut off.
   ------------------------------------------------------------ */
.education__header {
  text-align: center;
  margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem);
}
.education__eyebrow {
  font-size: clamp(1.875rem, 1.4rem + 1.6vw, 2.75rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.045em;
  color: var(--white);
  text-wrap: balance;
}
.education__title {
  display: inline-block;
  margin-top: 0.5rem;
  padding-bottom: 0.12em; /* room for the "g" */
  font-size: clamp(3.25rem, 1.75rem + 5vw, 5.5rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.06em;
  text-wrap: balance;
  background: linear-gradient(180deg, #ffffff 0%, #f2f2f5 50%, #c9c9ce 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0.25rem 1.25rem rgba(0, 0, 0, 0.6));
}
/* ------------------------------------------------------------
   ■ END: EDUCATION > Header
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: EDUCATION > Features
   ------------------------------------------------------------
   SUMMARY: Two big cards side by side. Dark graphite with a
   soft glow of the card's color in the top-right corner and a
   thin outline in that color. Type + issuer (icon, light
   shade) top-left; status + year top-right; big title and
   school / role at the bottom. --c / --l = the card's colors
   (also used by EDUCATION > List).
   ------------------------------------------------------------ */
.education__features,
.education__list {
  max-width: var(--edu-w);
  margin-inline: auto;
}
.education__features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.education__feature,
.education__item {
  --c: 10, 96, 255; /*   #0a60ff blue (License) */
  --l: 143, 176, 255; /* #8fb0ff */
}
.education__feature--degree,
.education__item--degree {
  --c: 88, 86, 214; /*   #5856d6 indigo */
  --l: 178, 177, 240; /* #b2b1f0 */
}
.education__item--cert {
  --c: 48, 162, 76; /*   #30a24c green */
  --l: 160, 217, 173; /* #a0d9ad */
}
.education__feature {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 15rem;
  padding: 2rem;
  border-radius: 1.75rem;
  overflow: hidden;
  background:
    radial-gradient(80% 70% at 100% 0%, rgba(var(--c), 0.35), transparent 70%),
    linear-gradient(180deg, #151518, #0e0e10);
  box-shadow: inset 0 0 0 1px rgba(var(--c), 0.4);
}
.education__type {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding-right: 7rem; /* clear of the year */
  font-family: "Geist", "Inter", sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  color: rgb(var(--l));
}
.education__type svg {
  flex-shrink: 0;
  width: 1.1rem;
  height: 1.1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.education__when {
  position: absolute;
  top: 1.6rem;
  right: 2rem;
  display: grid;
  justify-items: end;
  gap: 0.15rem;
}
.education__year {
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: #fff;
}
.education__year--gold {
  background: linear-gradient(180deg, #f6e3a8 0%, #e0bb5f 45%, #b98a2e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.education__label {
  font-family: "Geist", "Inter", sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  color: #8e8e93;
}
.education__name {
  margin-top: auto;
  padding-top: 2.5rem;
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.04em;
  color: #fff;
}
.education__sub {
  margin-top: 0.4rem;
  font-family: "Geist", "Inter", sans-serif;
  font-size: 1rem;
  color: #a1a1a6;
}
/* ------------------------------------------------------------
   ■ END: EDUCATION > Features
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: EDUCATION > List
   ------------------------------------------------------------
   SUMMARY: Five small cards in one row under the features.
   Quiet frosted dark with a faint outline; on hover the
   outline and a soft tint pick up the card's color. Type ·
   issuer (light shade), title, optional school, year at the
   bottom (so every year lines up).
   ------------------------------------------------------------ */
.education__list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  margin-top: 1rem;
  list-style: none;
}
.education__item {
  display: flex;
  flex-direction: column;
  min-height: 9.5rem;
  padding: 1.15rem;
  border-radius: 1.25rem;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  transition:
    background-color 0.3s ease,
    box-shadow 0.3s ease;
}
.education__item:hover {
  background-color: rgba(var(--c), 0.08);
  box-shadow: inset 0 0 0 1.5px rgba(var(--c), 0.5);
}
.education__item-type {
  font-family: "Geist", "Inter", sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.35;
  color: rgb(var(--l));
}
.education__item-name {
  margin-top: 0.35rem;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: #fff;
}
.education__item-sub {
  margin-top: 0.2rem;
  font-family: "Geist", "Inter", sans-serif;
  font-size: 0.75rem;
  color: #8e8e93;
}
.education__item-year {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 0.75rem;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
}
/* ------------------------------------------------------------
   ■ END: EDUCATION > List
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: EDUCATION > Tablet
   ------------------------------------------------------------
   SUMMARY: Tablet / small laptop / zoomed in: small cards go
   3 + 2; feature titles and years a bit smaller.
   ------------------------------------------------------------ */
@media (max-width: 66.75em) {
  .education__list {
    grid-template-columns: repeat(3, 1fr);
  }
  .education__name,
  .education__year {
    font-size: 1.875rem;
  }
}
/* ------------------------------------------------------------
   ■ END: EDUCATION > Tablet
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: EDUCATION > Phone
   ------------------------------------------------------------
   SUMMARY: Phone / heavily zoomed: feature cards stack, small
   cards 2 per row (1 per row on very narrow screens), tighter
   padding and smaller titles.
   ------------------------------------------------------------ */
@media (max-width: 45.875em) {
  .education__features {
    grid-template-columns: 1fr;
  }
  .education__feature {
    min-height: 12rem;
    padding: 1.5rem;
    border-radius: 1.5rem;
  }
  .education__when {
    top: 1.25rem;
    right: 1.5rem;
  }
  .education__type {
    padding-right: 5.5rem;
  }
  .education__name {
    padding-top: 2rem;
    font-size: 1.625rem;
  }
  .education__year {
    font-size: 1.625rem;
  }
  .education__list {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 26em) {
  .education__list {
    grid-template-columns: 1fr;
  }
}
/* ------------------------------------------------------------
   ■ END: EDUCATION > Phone
   ------------------------------------------------------------ */

/* ============================================================
   ■ END: EDUCATION (MASTER BLOCK)
   ============================================================ */

/* ============================================================
   ▶ START: CONTACT (MASTER BLOCK)
   ============================================================
   SUMMARY: Pure white closing section with dark, easy-to-read
   text, a blue "Send a message" button, colored link pills
   (LinkedIn blue · GitHub purple · Résumé red), and the pop-up
   message form. Same padding top and bottom so "Contact" is
   as far from the top black line as the pills are from the
   footer's black line.

   INSIDE (same names in index.html):
     CONTACT > Setup
     CONTACT > Header
     CONTACT > Message button
     CONTACT > Links
     CONTACT > Message form
       CONTACT > Message form > Window
       CONTACT > Message form > Fields
       CONTACT > Message form > Sent
     CONTACT > Phone
   ============================================================ */

/* ------------------------------------------------------------
   ▶ START: CONTACT > Setup
   ------------------------------------------------------------
   SUMMARY: Deep-space background that CONTINUES Education's
   black — it starts on Education's exact bottom color
   (#08080a) and deepens to pure black toward the globe, with
   the same fine film grain (::before), so there's no edge
   between the two sections ("Stars rise").
   Padding: --contact-pad sets the overall height (25% taller
   than before — a bigger stage, same text and button sizes);
   --contact-shift moves the whole text block UP by taking
   that much off the top and adding it to the bottom, so the
   content sits in the visual middle with more globe showing
   under the pills.
   The section clips the globe + stars layer; the text, button
   and pills sit above it. Shared icon style.
   ------------------------------------------------------------ */
.contact {
  --contact-pad: clamp(5.5rem, 2.5rem + 8.75vw, 11.25rem);
  --contact-shift: clamp(1.25rem, 0.5rem + 2.25vw, 2.75rem);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(180deg, #08080a 0%, #060607 45%, #000 100%);
  color: var(--gray-100);
  padding: calc(var(--contact-pad) - var(--contact-shift)) var(--side-pad)
    calc(var(--contact-pad) + var(--contact-shift));
  text-align: center;
}
.contact::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.16;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.contact__inner {
  max-width: var(--content-width);
  margin: 0 auto;
}
.contact__inner > :not(.contact__sky):not(.contact__secret) {
  position: relative;
  z-index: 1;
}
.contact__icon {
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.125rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* ------------------------------------------------------------
   ■ END: CONTACT > Setup
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: CONTACT > Sky
   ------------------------------------------------------------
   SUMMARY: Decorative night layer behind the content. Every
   image is a STILL picture, so scrolling stays smooth; the
   only motion is cheap CSS fading/turning of small layers.
   - Stars (contact-stars.svg): fill the WHOLE section — all
     four corners, right up to the top edge, and beside the
     words — with a snug clear zone around the text, button
     and pills. Pinned to the center so they never drift onto
     the text.
   - Twinkle (contact-twinkle-a / -b.svg): only the brightest
     stars, laid exactly over the star field. The two layers
     fade in and out at different speeds, so the bright stars
     shimmer. Change the 0.9 in the keyframes for more/less.
   - Top-center stars (::before): fills the empty patch ABOVE
     "Contact" and fades out before reaching the heading.
   - Globe (contact-globe.svg): Earth's night side rising from
     the bottom — 25% bigger to match the taller section.
     Change the width clamp to resize it (it's in TWO places:
     .contact__globe and .contact__home — keep them the same).
   - Home star (.contact__home): the slim green star on Sugar
     Land. Its box is an exact copy of the globe's box, so
     left 25.09% / top 79.6% always lands on the same spot.
   - Fade: soft dark glow behind the text so every word stays
     crisp.
   "Reduce motion" stops the twinkle and the home-star turn.
   ------------------------------------------------------------ */
.contact__sky {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.contact__sky::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 44rem;
  height: calc(var(--contact-pad) - var(--contact-shift) - 0.5rem);
  transform: translateX(-50%);
  background: url("./images/contact-stars.svg") center bottom / 150rem auto
    no-repeat;
  -webkit-mask-image: radial-gradient(
    ellipse 50% 100% at 50% 0,
    #000 55%,
    transparent 100%
  );
  mask-image: radial-gradient(
    ellipse 50% 100% at 50% 0,
    #000 55%,
    transparent 100%
  );
}
.contact__stars,
.contact__globe,
.contact__home {
  position: absolute;
  left: 50%;
  max-width: none;
  height: auto;
  transform: translateX(-50%);
  user-select: none;
}
.contact__stars {
  top: 0;
  width: 150rem;
}
.contact__globe,
.contact__home {
  bottom: 0;
  width: clamp(60rem, 150%, 107.5rem);
}

/* Twinkle layers */
.contact__twinkle {
  opacity: 0;
  animation: contact-sky-twinkle 5s ease-in-out infinite;
}
.contact__twinkle--b {
  animation-duration: 6.5s;
  animation-delay: -3s;
}
@keyframes contact-sky-twinkle {
  0%,
  100% {
    opacity: 0;
  }
  50% {
    opacity: 0.9;
  }
}

/* Home star (Sugar Land) */
.contact__home {
  aspect-ratio: 1100 / 280;
}
.contact__home-star {
  position: absolute;
  left: 25.09%;
  top: 79.6%;
  width: 1.4545%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
}
.contact__home-star svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 0 0.125rem rgba(48, 209, 88, 0.9));
  animation: contact-home-star 3s ease-in-out infinite;
}
@keyframes contact-home-star {
  0%,
  100% {
    opacity: 0.55;
    transform: scale(0.9) rotate(0deg);
  }
  50% {
    opacity: 1;
    transform: scale(1.05) rotate(22deg);
  }
}

.contact__fade {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 32rem 9rem at 50% 31%,
    rgba(0, 0, 0, 0.92) 0%,
    rgba(0, 0, 0, 0.85) 55%,
    rgba(0, 0, 0, 0.45) 75%,
    rgba(0, 0, 0, 0) 100%
  );
}

@media (prefers-reduced-motion: reduce) {
  .contact__twinkle {
    animation: none;
    opacity: 0.5;
  }
  .contact__home-star svg {
    animation: none;
    opacity: 1;
  }
}
/* ------------------------------------------------------------
   ■ END: CONTACT > Sky
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: CONTACT > Secret
   ------------------------------------------------------------
   SUMMARY: The hidden IMAN puzzle.
   - Letters: four star clusters (I, M, A, N) scattered around
     the heading — M and A in the sky above it, I and N lower
     on the sides (below the headline, beside the subtitle,
     so they never touch the words at any screen width). Same
     color / twinkle as normal stars. 25% bigger than before
     to match the taller section. Move one by changing its
     left / top. --h = letter height.
   - Lines: golden, hidden until the key is clicked, then each
     letter draws in FULL (--d = delay between letters), its
     stars brighten, and everything fades after ~7 seconds.
     Line thickness is in the letter's own units (0.6 ≈ 1px).
   - Key: small crimson star, tucked in from the top-left
     corner (no longer pressed into it). SAFETY: only the star
     itself (plus a ~3px sliver) is clickable, so a stray
     click or fast scroll nearby won't set it off. No glow, no
     twinkle, no pointer cursor, no outline.
   ------------------------------------------------------------ */
.contact__secret {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.contact__letter {
  --h: 3.5rem;
  position: absolute;
  height: var(--h);
  overflow: visible;
}
.contact__letter--i {
  --d: 0s;
  width: calc(var(--h) * 6 / 26);
  left: 12%;
  top: 16rem;
}
.contact__letter--m {
  --d: 0.35s;
  width: calc(var(--h) * 18 / 26);
  left: 27%;
  top: 4.5rem;
}
.contact__letter--a {
  --d: 0.7s;
  width: calc(var(--h) * 18 / 26);
  left: 70%;
  top: 5.75rem;
}
.contact__letter--n {
  --d: 1.05s;
  width: calc(var(--h) * 17 / 26);
  left: 85%;
  top: 17.5rem;
}
.contact__letter circle {
  fill: #fff;
  opacity: 0.7;
  animation: contact-twinkle 4s ease-in-out infinite;
  transition: opacity 0.6s ease;
}
.contact__letter circle.is-gold {
  fill: #ffd25a;
}
.contact__letter circle:nth-of-type(2n) {
  animation-duration: 5.2s;
  animation-delay: 1.3s;
}
.contact__letter circle:nth-of-type(3n) {
  animation-duration: 3.6s;
  animation-delay: 2.1s;
}
@keyframes contact-twinkle {
  0%,
  100% {
    opacity: 0.35;
  }
  50% {
    opacity: 0.8;
  }
}
.contact__letter line {
  stroke: rgba(255, 226, 150, 0.95);
  stroke-width: 0.6;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0;
  transition:
    stroke-dashoffset 1s ease var(--d),
    opacity 0.6s ease var(--d);
}
.contact__secret.is-revealed .contact__letter line {
  stroke-dashoffset: 0;
  opacity: 1;
}
.contact__secret.is-revealed .contact__letter circle {
  animation: none;
  opacity: 1;
}
.contact__key {
  position: absolute;
  top: 4.5rem;
  left: 4.5rem;
  padding: 0.1875rem;
  border: 0;
  background: none;
  line-height: 0;
  cursor: default;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}
.contact__key:focus {
  outline: none;
}
.contact__key svg {
  display: block;
  width: 0.375rem;
  height: 0.375rem;
  fill: #b3122e;
  opacity: 0.75;
}
@media (prefers-reduced-motion: reduce) {
  .contact__letter circle {
    animation: none;
  }
  .contact__letter line {
    transition: opacity 0.6s ease;
  }
}
/* ------------------------------------------------------------
   ■ END: CONTACT > Secret
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: CONTACT > Header
   ------------------------------------------------------------
   SUMMARY: Same font, weight and spacing as the other headers
   (Inter 800, tight tracking). Pure-white "Contact", silver
   gradient "Let's work together." (same silver as the hero /
   Experience / Skills) with a soft dark shadow for depth.
   Extra room at the bottom so g / y / p aren't cut off.
   Light-grey subtitle for easy reading on black.
   ------------------------------------------------------------ */
.contact__eyebrow {
  font-size: clamp(1.875rem, 1.45rem + 1.6vw, 2.75rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.045em;
  color: var(--white);
}
.contact__title {
  margin-top: 0.375rem;
  font-size: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.055em;
}
.contact__gradient {
  display: inline-block;
  padding-bottom: 0.14em; /* room for g / y / p */
  background: linear-gradient(180deg, #ffffff 0%, #e8e8ed 45%, #9a9aa0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0.25rem 1.25rem rgba(0, 0, 0, 0.7));
}
.contact__subtitle {
  max-width: 32rem;
  margin: 0.375rem auto 0;
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: #e8e8ed;
}
/* ------------------------------------------------------------
   ■ END: CONTACT > Header
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: CONTACT > Message button
   ------------------------------------------------------------
   SUMMARY: Big blue pill with an envelope icon and a soft blue
   glow so it stands out on the night background. Comfortable
   gap above it so the subtitle can breathe.
   ------------------------------------------------------------ */
.contact__send {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 2.25rem;
  padding: 0.8125rem 1.5rem;
  border: 0;
  border-radius: 999em;
  background: var(--blue);
  box-shadow: 0 0.5rem 1.625rem rgba(0, 113, 227, 0.5);
  font: inherit;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--white);
  cursor: pointer;
  transition:
    background 0.3s var(--ease),
    transform 0.3s var(--ease),
    box-shadow 0.3s var(--ease);
}
.contact__send:hover {
  background: var(--blue-hover);
  transform: translateY(-0.0625rem);
  box-shadow: 0 0.75rem 2rem rgba(0, 113, 227, 0.6);
}
.contact__send:focus-visible {
  outline: 2px solid #2997ff;
  outline-offset: 3px;
}
/* ------------------------------------------------------------
   ■ END: CONTACT > Message button
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: CONTACT > Links
   ------------------------------------------------------------
   SUMMARY: NEUTRAL frosted-glass pills (apple.com style): one
   colored primary action ("Send a message", blue) and quiet
   secondary links — LinkedIn, GitHub, Résumé all share the
   same see-through glass with a faint light edge and white
   text + icon, so nothing competes with the main button.
   Clear gap under the Send button so the two rows don't feel
   jammed. Hover: lifts slightly and the glass gets a little
   brighter.
   (The --linkedin / --github / --resume classes in the HTML
   are kept as labels but no longer change the color.)
   ------------------------------------------------------------ */
.contact__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1.75rem;
}
.contact__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.125rem;
  border-radius: 999em;
  background: rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--white);
  transition:
    transform 0.3s var(--ease),
    background-color 0.3s var(--ease),
    box-shadow 0.3s var(--ease);
}
.contact__pill:hover {
  transform: translateY(-0.0625rem);
  background-color: rgba(255, 255, 255, 0.15);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
}
.contact__pill:focus-visible {
  outline: 2px solid #2997ff;
  outline-offset: 2px;
}
/* ------------------------------------------------------------
   ■ END: CONTACT > Links
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: CONTACT > Message form > Window
   ------------------------------------------------------------
   SUMMARY: "Aurora glass" window. The page behind dims, blurs
   and gets a soft blue glow (top-left) + purple glow
   (bottom-right). The window is frosted dark glass with a
   light top edge and deep shadow, and rises in smoothly.
   Page scrolling is paused while it's open.
   ------------------------------------------------------------ */
.msg {
  width: min(100% - 2rem, 30rem);
  max-height: calc(100dvh - 2rem);
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 1.625rem;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.09),
      rgba(255, 255, 255, 0.03) 40%
    ),
    rgba(18, 20, 28, 0.78);
  -webkit-backdrop-filter: blur(1.5rem) saturate(140%);
  backdrop-filter: blur(1.5rem) saturate(140%);
  color: var(--gray-100);
  text-align: left;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 1.875rem 4.5rem rgba(0, 0, 0, 0.6);
  overflow-y: auto;
}
.msg::backdrop {
  background:
    radial-gradient(
      28rem 22rem at 35% 25%,
      rgba(41, 151, 255, 0.38),
      transparent 70%
    ),
    radial-gradient(
      26rem 20rem at 65% 80%,
      rgba(191, 90, 242, 0.32),
      transparent 70%
    ),
    rgba(0, 0, 0, 0.62);
  -webkit-backdrop-filter: blur(0.5rem);
  backdrop-filter: blur(0.5rem);
}
.msg[open] {
  animation: msg-in 0.4s var(--ease);
}
@keyframes msg-in {
  from {
    opacity: 0;
    transform: translateY(1rem) scale(0.97);
  }
}
body:has(.msg[open]) {
  overflow: hidden;
}
.msg [hidden] {
  display: none !important;
}

.msg__inner {
  position: relative;
  padding: clamp(1.5rem, 1.25rem + 1vw, 1.875rem)
    clamp(1.25rem, 1rem + 1vw, 1.75rem) clamp(1.25rem, 1rem + 1vw, 1.75rem);
}

/* Close (✕) — top-right corner */
.msg__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: var(--gray-100);
  cursor: pointer;
  transition: background 0.3s var(--ease);
}
.msg__close:hover {
  background: rgba(255, 255, 255, 0.18);
}
.msg__close .contact__icon {
  width: 1rem;
  height: 1rem;
}

/* Gradient paper-plane tile + silver title */
.msg__tile {
  display: grid;
  place-items: center;
  width: 2.875rem;
  height: 2.875rem;
  margin-bottom: 0.875rem;
  border-radius: 0.875rem;
  background: linear-gradient(135deg, #2997ff, #bf5af2);
  box-shadow: 0 0.5rem 1.5rem rgba(41, 151, 255, 0.45);
  color: var(--white);
}
.msg__tile .contact__icon {
  width: 1.375rem;
  height: 1.375rem;
}
.msg__title {
  padding-bottom: 0.05em;
  font-size: clamp(1.625rem, 1.4rem + 0.8vw, 1.875rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.045em;
  background: linear-gradient(180deg, #ffffff 0%, #a1a1a6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* ------------------------------------------------------------
   ■ END: CONTACT > Message form > Window
   ------------------------------------------------------------ */
/* ------------------------------------------------------------
   ▶ START: CONTACT > Message form > Fields
   ------------------------------------------------------------
   SUMMARY: Glass fields with the label INSIDE. On click or
   once filled, the label floats up small; the active field
   glows blue. Name + Email side by side (stack when narrow).
   Hidden spam trap. Soft-red status line for errors.
   Blue→purple Send button with arrow. Dark autofill fix.
   ------------------------------------------------------------ */
.msg__form {
  display: grid;
  gap: 0.75rem;
}
.msg__title + input,
.msg__form .msg__row {
  margin-top: 0.375rem;
}
.msg__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  gap: 0.75rem;
}

/* Field + floating label */
.msg__field {
  position: relative;
  display: block;
}
.msg__input {
  display: block;
  width: 100%;
  height: 3.5rem;
  padding: 1.375rem 1rem 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.8125rem;
  background: rgba(255, 255, 255, 0.06);
  font: inherit;
  font-size: 1rem;
  color: var(--white);
  transition:
    border-color 0.25s var(--ease),
    background 0.25s var(--ease),
    box-shadow 0.25s var(--ease);
}
.msg__input--area {
  height: auto;
  min-height: 7.75rem;
  padding-top: 1.75rem;
  resize: vertical;
}
.msg__input::placeholder {
  color: transparent;
}
.msg__label {
  position: absolute;
  top: 1.0625rem;
  left: 1rem;
  font-size: 1rem;
  color: #c7c7cc;
  pointer-events: none;
  transition:
    top 0.2s var(--ease),
    font-size 0.2s var(--ease),
    color 0.2s var(--ease);
}

/* Label floats up when the field is active or filled */
.msg__input:focus + .msg__label,
.msg__input:not(:placeholder-shown) + .msg__label {
  top: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--gray-400);
}

/* Active field — blue glow */
.msg__input:hover {
  border-color: rgba(255, 255, 255, 0.22);
}
.msg__input:focus {
  outline: none;
  border-color: #2997ff;
  background: rgba(41, 151, 255, 0.08);
  box-shadow:
    0 0 0 0.25rem rgba(41, 151, 255, 0.18),
    0 0 1.5rem rgba(41, 151, 255, 0.25);
}
.msg__input:focus + .msg__label {
  color: #2997ff;
}

/* Browser autofill — keep it dark */
.msg__input:-webkit-autofill {
  -webkit-text-fill-color: var(--white);
  box-shadow: inset 0 0 0 100rem #1c1f27;
  caret-color: var(--white);
}

.msg__trap {
  display: none;
}

.msg__status {
  font-size: 0.875rem;
  font-weight: 600;
  color: #ff6961;
}
.msg__status:empty {
  display: none;
}

/* Send button — blue → purple */
.msg__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  height: 3.375rem;
  margin-top: 0.5rem;
  border: 0;
  border-radius: 0.875rem;
  background: linear-gradient(90deg, #0071e3, #7d4bdf);
  box-shadow: 0 0.625rem 1.875rem rgba(0, 113, 227, 0.4);
  font: inherit;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--white);
  cursor: pointer;
  transition:
    transform 0.3s var(--ease),
    box-shadow 0.3s var(--ease),
    opacity 0.3s var(--ease);
}
.msg__submit:hover {
  transform: translateY(-0.0625rem);
  box-shadow: 0 0.875rem 2.25rem rgba(0, 113, 227, 0.55);
}
.msg__submit .contact__icon {
  transition: transform 0.3s var(--ease);
}
.msg__submit:hover .contact__icon {
  transform: translateX(0.1875rem);
}
.msg__submit:disabled {
  opacity: 0.65;
  cursor: progress;
  transform: none;
}
.msg__close:focus-visible,
.msg__submit:focus-visible {
  outline: 2px solid #2997ff;
  outline-offset: 2px;
}
/* ------------------------------------------------------------
   ■ END: CONTACT > Message form > Fields
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: CONTACT > Message form > Checks
   ------------------------------------------------------------
   SUMMARY: How a field looks when script.js CONTACT FORM >
   Checks finds a problem (bad language, fake / throwaway email,
   too short): soft-red border + glow, red label, and a small
   red note with a "!" badge underneath. A typo suggestion
   ("Did you mean …@gmail.com?") gets a blue "Use it" link.
   The note disappears as soon as the field is fixed.
   ------------------------------------------------------------ */
.msg__field.is-bad .msg__input {
  border-color: rgba(255, 99, 99, 0.85);
  box-shadow: 0 0 0 4px rgba(255, 69, 58, 0.15);
}
.msg__field.is-bad .msg__input + .msg__label {
  color: #ff8a80;
}
.msg__hint {
  position: relative;
  margin: 0.45rem 0.25rem 0;
  padding-left: 1.4rem;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.4;
  color: #ff9b93;
  text-align: left;
}
.msg__hint::before {
  content: "!";
  position: absolute;
  left: 0;
  top: 0.05rem;
  display: grid;
  place-items: center;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: rgba(255, 69, 58, 0.2);
  color: #ff8a80;
  font-size: 0.6875rem;
  font-weight: 800;
}
.msg__hint[hidden] {
  display: none;
}
.msg__hint button {
  padding: 0;
  border: 0;
  background: none;
  color: #64d2ff;
  font: inherit;
  text-decoration: underline;
  white-space: nowrap;
  cursor: pointer;
}
/* ------------------------------------------------------------
   ■ END: CONTACT > Message form > Checks
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: CONTACT > Message form > Sent
   ------------------------------------------------------------
   SUMMARY: Centered green check that draws itself in, silver
   "Message sent.", light-grey thank-you line, Done button.
   ------------------------------------------------------------ */
.msg__done {
  display: grid;
  justify-items: center;
  gap: 0.625rem;
  padding: 1.5rem 0 0.25rem;
  text-align: center;
}
.msg__done-icon {
  width: 3.5rem;
  height: 3.5rem;
  fill: none;
  stroke: var(--green);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 0.75rem rgba(48, 209, 88, 0.45));
}
.msg__done-icon path {
  stroke-dasharray: 1;
  animation: msg-check 0.7s var(--ease) both;
}
.msg__done-icon path + path {
  animation-delay: 0.35s;
}
@keyframes msg-check {
  from {
    stroke-dashoffset: 1;
  }
  to {
    stroke-dashoffset: 0;
  }
}
.msg__done-text {
  max-width: 22rem;
  margin-bottom: 0.75rem;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--gray-300);
}
/* ------------------------------------------------------------
   ■ END: CONTACT > Message form > Sent
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: CONTACT > Phone
   ------------------------------------------------------------
   SUMMARY: Small screens / zoomed in: the message window uses
   almost the full width; the Send-a-message button stays big
   enough to tap easily. The hidden IMAN letters shrink and
   move into the strip of sky above "Contact" (staggered
   heights so they don't line up like a word), a little lower
   than the very top edge. The key star sits just in from the
   top-left corner, clear of the letters and the heading.
   ------------------------------------------------------------ */
@media (max-width: 45.875em) {
  .msg {
    width: calc(100% - 1.5rem);
    border-radius: 1.125rem;
  }
  .contact__send {
    padding: 0.875rem 1.625rem;
  }

  .contact__letter {
    --h: 1.875rem;
  }
  .contact__letter--i {
    left: 14%;
    top: 1.625rem;
  }
  .contact__letter--m {
    left: 36%;
    top: 0.875rem;
  }
  .contact__letter--a {
    left: 62%;
    top: 1.375rem;
  }
  .contact__letter--n {
    left: 84%;
    top: 0.75rem;
  }
  .contact__key {
    top: 2.25rem;
    left: 1rem;
  }
}
/* ------------------------------------------------------------
   ■ END: CONTACT > Phone
   ------------------------------------------------------------ */

/* ============================================================
   ■ END: CONTACT (MASTER BLOCK)
   ============================================================ */

/* ============================================================
   ▶ START: FOOTER (MASTER BLOCK)
   ============================================================
   SUMMARY: Thin bottom bar — copyright on the left, links on
   the right (same order as the nav). Phone / zoomed in:
   stacks and centers.

   INSIDE (same names in index.html):
     FOOTER > Bar
     FOOTER > Copyright and links
     FOOTER > Phone
   ============================================================ */

/* ------------------------------------------------------------
   ▶ START: FOOTER > Bar
   ------------------------------------------------------------
   SUMMARY: Slim frosted-glass bar that sits right under the
   Contact globe (no gap). Dark graphite fading to near-black
   with a faint inner highlight. Lit from above by the planet:
   - ::before = EARTHSHINE: faint blue light spilling down
     from under the globe, strongest in the middle, fading
     out to the sides and bottom.
   - ::after  = SOFT RIM: a blurred blue haze along the top
     edge where Earth's atmosphere meets the footer (no hard
     line).
   Change the 0.2 / 0.28 numbers to make the glow stronger or
   weaker. The text sits above both layers.
   ------------------------------------------------------------ */
.footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(180deg, #16181e 0%, #08090c 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    ellipse 45% 140% at 50% 0%,
    rgba(59, 140, 255, 0.2) 0%,
    rgba(59, 140, 255, 0.06) 45%,
    transparent 75%
  );
}
.footer::after {
  content: "";
  position: absolute;
  top: 0;
  left: 15%;
  right: 15%;
  height: 0.875rem;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    ellipse 50% 100% at 50% 0%,
    rgba(110, 180, 255, 0.28),
    transparent 70%
  );
  filter: blur(2px);
}

.footer__inner {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 1rem var(--side-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
}
/* ------------------------------------------------------------
   ■ END: FOOTER > Bar
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: FOOTER > Copyright and links
   ------------------------------------------------------------
   SUMMARY: Easy-to-read small text. Copyright in soft grey
   with your name in white; links a touch brighter and turn
   white on hover.
   ------------------------------------------------------------ */
.footer__copy {
  font-size: 0.8125rem;
  letter-spacing: -0.005em;
  color: var(--gray-500);
}
.footer__name {
  font-weight: 600;
  color: var(--gray-100);
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
}
.footer__links a {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #d2d2d7;
  transition: color 0.2s var(--ease);
}
.footer__links a:hover {
  color: var(--white);
}
/* ------------------------------------------------------------
   ■ END: FOOTER > Copyright and links
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: FOOTER > Phone
   ------------------------------------------------------------
   SUMMARY: Phone / zoomed in — copyright and links stack and
   center; links wrap neatly if the screen is very narrow.
   ------------------------------------------------------------ */
@media (max-width: 45.875em) {
  .footer__inner {
    flex-direction: column;
    text-align: center;
    padding-block: 1.125rem;
  }
  .footer__links {
    justify-content: center;
  }
}
/* ------------------------------------------------------------
   ■ END: FOOTER > Phone
   ------------------------------------------------------------ */

/* ============================================================
   ■ END: FOOTER (MASTER BLOCK)
   ============================================================ */