/* ==========================================================================
   Mabini Villamin III — Portfolio styles
   One stylesheet for every page. Sections:
   1. Colors (light + dark theme)
   2. Base (font, text sizes, links, focus)
   3. Layout (sidebar, top bar on phones, main area, background lines)
   4. Shared pieces (cards, buttons, chips, labels, links)
   5. Home page
   6. Top of inner pages + call-to-action band
   7. Projects page
   8. Services page
   9. About page
   10. FAQs / Contact page
   11. Video pop-up
   12. Intro animation (Home, first visit)
   13. Scroll fade-in + reduced motion
   ========================================================================== */


/* ==========================================================================
   1. COLORS
   Brand colors: Slate Ocean #2F4858 · Cloud Mint #DDFBEF · White · Deep green #1E7F5C
   Every text/background pair below passes WCAG AA contrast.
   ========================================================================== */
:root {
  --sidebar-w: 17.5rem;
  --gap: 1rem;                                  /* space between cards */
  --card-pad: clamp(1.125rem, 2vw, 1.5rem);     /* space inside cards */

  /* Light theme (default) */
  --bg: #F1FCF7;              /* page background: soft Cloud Mint */
  --surface: #FFFFFF;         /* cards */
  --sidebar-bg: #FFFFFF;
  --tint: #DDFBEF;            /* Cloud Mint: chips, icon tiles, highlights */
  --chip-bg: #F1FCF7;
  --text: #2F4858;            /* Slate Ocean */
  --text-soft: #4A6070;       /* darker Slate Ocean shade for secondary text (6.5:1) */
  --accent: #1E7F5C;          /* deep green: links, active nav, checkmarks */
  --accent-hover: #17664A;
  --on-accent: #FFFFFF;       /* text on green buttons */
  --nav-active-bg: #DDFBEF;
  --secondary-hover-bg: #DDFBEF;
  --border: #D5DBDF;          /* neutral gray: card borders */
  --card-border: #BAC4CB;     /* neutral gray: thicker project-card borders */
  --border-strong: #767F86;   /* neutral gray: form fields, switches (3:1+) */
  --input-bg: #FFFFFF;
  --error: #B3261E;
  --lines: rgba(47, 72, 88, 0.13);
  --grid-line: rgba(47, 72, 88, 0.07);
  --hero-glow: #DDFBEF;
  --accent-glow: rgba(30, 127, 92, 0.16);
  --shadow: 0 1px 2px rgba(47, 72, 88, 0.05), 0 10px 30px -12px rgba(47, 72, 88, 0.12);
  --shadow-hover: 0 2px 4px rgba(47, 72, 88, 0.06), 0 18px 40px -14px rgba(47, 72, 88, 0.22);
  color-scheme: light;
}

/* Dark theme (turned on with the sidebar switch) */
:root[data-theme="dark"] {
  --bg: #243B4A;
  --surface: #2F4858;         /* Slate Ocean cards */
  --sidebar-bg: #1F3340;
  --tint: #3A5668;
  --chip-bg: #243B4A;
  --text: #DDFBEF;            /* Cloud Mint */
  --text-soft: #C3E0D8;
  --accent: #6EDDAE;          /* lighter green so it stays readable on dark */
  --accent-hover: #8FE7C2;
  --on-accent: #1F3340;
  --nav-active-bg: rgba(110, 221, 174, 0.14);
  --secondary-hover-bg: rgba(110, 221, 174, 0.1);
  --border: #4F606B;
  --card-border: #667985;
  --border-strong: #95A1AA;
  --input-bg: #243B4A;
  --error: #FFB4AB;
  --lines: rgba(221, 251, 239, 0.09);
  --grid-line: rgba(221, 251, 239, 0.07);
  --hero-glow: rgba(110, 221, 174, 0.1);
  --accent-glow: rgba(110, 221, 174, 0.2);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 10px 30px -12px rgba(0, 0, 0, 0.35);
  --shadow-hover: 0 2px 4px rgba(0, 0, 0, 0.15), 0 18px 40px -14px rgba(0, 0, 0, 0.5);
  color-scheme: dark;
}


/* ==========================================================================
   2. BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--bg);
}

body {
  margin: 0;
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1.125rem;       /* 18px body text */
  font-weight: 400;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }

[hidden] { display: none !important; }

.accent-text { color: var(--accent); }

h1, h2, h3, p, figure, blockquote { margin: 0; }
h1, h2, h3 { line-height: 1.25; font-weight: 600; overflow-wrap: break-word; }
p { max-width: 70ch; }

a { color: var(--accent); text-underline-offset: 0.2em; }

button { font: inherit; color: inherit; }

/* Visible keyboard focus everywhere */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

/* Hidden visually, still read by screen readers */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* "Skip to content" link: appears when you press Tab */
.skip-link {
  position: absolute;
  top: -10rem;
  left: 1rem;
  z-index: 100;
  display: inline-flex;
  align-items: center;
  min-height: 3rem;
  padding: 0.75rem 1.25rem;
  border-radius: 0.875rem;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { top: 1rem; }

/* Icons (Phosphor) sit nicely next to text */
.ph { line-height: 1; flex: none; }


/* ==========================================================================
   3. LAYOUT
   ========================================================================== */

/* Thin decorative curved lines behind everything */
.bg-lines {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  fill: none;
  stroke: var(--lines);
  stroke-width: 1.25;
}

/* ---------- Sidebar (desktop) ---------- */
.site-header {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 20;
  width: var(--sidebar-w);
  background: var(--sidebar-bg);
  border-right: 1px solid var(--border);
}

.topbar { display: none; }

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  height: 100%;
  overflow-y: auto;
  padding: 1.75rem 1.25rem 1.25rem;
}

.profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  text-align: center;
}

.profile .photo-ring { margin-bottom: 0.75rem; }
.profile-photo {
  width: 7.5rem;
  height: 7.5rem;
  object-fit: cover;
}

.profile-name {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
}

.profile-title {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text-soft);
}

.social-links {
  display: flex;
  justify-content: center;
  gap: 0.625rem;
  margin: 0.875rem 0 0;
  padding: 0;
  list-style: none;
}

.icon-link {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text);
  font-size: 1.375rem;
  text-decoration: none;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s, transform 0.2s;
}
.icon-link:hover {
  border-color: var(--accent);
  background: var(--nav-active-bg);
  color: var(--accent);
  transform: translateY(-2px);
}

/* Sidebar icons in brand colors, on white circles (clear in light and dark mode) */
.icon-link--linkedin,
.icon-link--email,
.icon-link--calendly { background: #FFFFFF; border-color: #D5DBDF; }
.icon-link--linkedin,
.icon-link--linkedin:hover { color: #0A66C2; }   /* LinkedIn blue */
.icon-link--calendly,
.icon-link--calendly:hover { color: #006BFF; }   /* Calendly blue */
.icon-link--email,
.icon-link--email:hover { color: #1E7F5C; }      /* your green */
.icon-link--linkedin:hover,
.icon-link--email:hover,
.icon-link--calendly:hover { background: #FFFFFF; border-color: currentColor; }

/* Navigation */
.site-nav ul {
  display: grid;
  gap: 0.25rem;
  margin: 0;
  padding: 1.25rem 0 0;
  border-top: 1px solid var(--border);
  list-style: none;
}

.site-nav a {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  min-height: 3rem;
  padding: 0.5rem 1rem;
  border-radius: 0.875rem;
  color: var(--text);
  font-size: 1.0625rem;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s;
}
.site-nav a .ph { font-size: 1.375rem; }
.site-nav a:hover { background: var(--secondary-hover-bg); }
.site-nav a[aria-current="page"] {
  background: var(--nav-active-bg);
  color: var(--accent);
  font-weight: 600;
  box-shadow: inset 4px 0 0 var(--accent);
}

/* Dark-mode switch */
.theme-toggle {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  width: 100%;
  min-height: 3rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--border);
  border-radius: 0.875rem;
  background: transparent;
  color: var(--text);
  font-size: 1.0625rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s;
}
.theme-toggle .ph { font-size: 1.375rem; }
.theme-toggle:hover { background: var(--secondary-hover-bg); border-color: var(--accent); }

.switch {
  position: relative;
  flex: none;
  width: 2.75rem;
  height: 1.5rem;
  margin-left: auto;
  border-radius: 999px;
  background: var(--border-strong);
  transition: background-color 0.2s;
}
.switch::after {
  content: "";
  position: absolute;
  top: 0.1875rem;
  left: 0.1875rem;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  background: #FFFFFF;
  transition: transform 0.2s;
}
.theme-toggle[aria-pressed="true"] .switch { background: var(--accent); }
.theme-toggle[aria-pressed="true"] .switch::after {
  transform: translateX(1.25rem);
  background: var(--on-accent);
}

.sidebar-footer {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text-soft);
  text-align: center;
}

/* ---------- Main area ---------- */
.main {
  position: relative;
  z-index: 1;
  margin-left: var(--sidebar-w);
  padding: clamp(1rem, 2.2vw, 1.75rem);
}
.main:focus { outline: none; }

.main-inner {
  display: grid;
  gap: var(--gap);
  max-width: 76rem;
  margin: 0 auto;
}

/* Footer at the bottom of the page — only shown on tablet/phone */
.site-footer {
  display: none;
  position: relative;
  z-index: 1;
  padding: 1.5rem 1rem 2rem;
  font-size: 1rem;
  color: var(--text-soft);
  text-align: center;
}

/* ---------- Tablet and phone: sidebar becomes a top bar ---------- */
@media (max-width: 63.99em) {
  .site-header {
    position: relative;
    bottom: auto;
    width: auto;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
  .menu-ready .site-header { position: sticky; }

  .topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 4.25rem;
    padding: 0.625rem 1rem;
  }

  .topbar-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 3rem;
    color: var(--text);
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none;
  }
  .topbar-brand img {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--tint);
  }
  /* Very narrow phones: hide the small photo so the name fits on one line */
  @media (max-width: 25em) {
    .topbar-brand img { display: none; }
  }

  /* The Menu button only appears once the script is ready */
  .menu-button { display: none; }
  .menu-ready .menu-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 3rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--border-strong);
    border-radius: 0.875rem;
    background: var(--surface);
    color: var(--text);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
  }
  .menu-button .ph { font-size: 1.5rem; }

  .sidebar {
    height: auto;
    padding: 1.25rem 1rem 1.5rem;
    border-top: 1px solid var(--border);
  }
  .menu-ready .sidebar { display: none; }
  .menu-ready .site-header.is-open .sidebar {
    display: flex;
    max-height: calc(100vh - 4.25rem);
    max-height: calc(100dvh - 4.25rem);
  }

  .profile-photo { width: 5.5rem; height: 5.5rem; }
  .sidebar-footer { display: none; }

  .main { margin-left: 0; }
  .site-footer { display: block; }

  /* Card grids stack into one column */
  .project-grid,
  .projects-grid,
  .service-grid,
  .stat-grid,
  .info-bar { grid-template-columns: minmax(0, 1fr); }
}


/* ==========================================================================
   4. SHARED PIECES
   ========================================================================== */

/* ---------- Cards ---------- */
.card {
  position: relative;
  padding: var(--card-pad);
  border: 1px solid var(--border);
  border-radius: 1.25rem;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-bottom: 1rem;
}

.card-title {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  font-size: 1.75rem;
  font-weight: 600;
}
.card-title .icon-tile {
  width: 3.25rem;
  height: 3.25rem;
  font-size: 1.625rem;
}

/* ---------- Animated ring around your photos ----------
   When a photo comes into view, a green light sweeps around it for about
   3 seconds, then settles into a still green ring with a soft glow.
   Hovering the photo plays the sweep again. No movement with "reduce motion". */
.photo-ring {
  position: relative;
  isolation: isolate;
  display: block;
  overflow: hidden;
  padding: 4px;
  border-radius: 1.25rem;
  background: var(--accent);                         /* the settled ring */
  box-shadow: 0 0 0 4px var(--accent-glow), 0 10px 28px -8px var(--accent-glow);
  transition: background-color 0.3s;
}
.photo-ring img {
  position: relative;
  display: block;
  border-radius: calc(1.25rem - 4px);
}
.photo-ring--round,
.photo-ring--round img { border-radius: 50%; }

/* the moving light (a large spinning gradient, clipped to the ring) */
.photo-ring::before {
  content: "";
  position: absolute;
  inset: -50%;
  z-index: -1;
  background: conic-gradient(from 0deg, transparent 0deg 190deg, var(--accent) 290deg, var(--hero-glow) 330deg, var(--accent) 350deg, transparent 360deg);
  opacity: 0;
  transition: opacity 0.3s;
}

@media (prefers-reduced-motion: no-preference) {
  .photo-ring.ring-ready { background: var(--tint); box-shadow: none; }
  .photo-ring.ring-play { animation: ring-settle 0.6s ease 2.6s forwards; }
  .photo-ring.ring-play::before {
    opacity: 1;
    animation: ring-sweep 3s cubic-bezier(0.45, 0, 0.25, 1) forwards, ring-fade 0.6s ease 2.6s forwards;
  }
  .photo-ring:hover { background: var(--tint); }
  .photo-ring:hover::before { opacity: 1; animation: ring-spin 1.4s linear infinite; }
}
@keyframes ring-sweep { from { transform: rotate(0deg); } to { transform: rotate(720deg); } }
@keyframes ring-spin  { to { transform: rotate(360deg); } }
@keyframes ring-fade  { to { opacity: 0; } }
@keyframes ring-settle {
  to {
    background-color: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-glow), 0 10px 28px -8px var(--accent-glow);
  }
}

/* ---------- Circle that follows the mouse (added by main.js; mouse only) ---------- */
.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2000;
  width: 0;
  height: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}
.cursor-ring.is-visible { opacity: 1; }
.cursor-ring::before {
  content: "";
  position: absolute;
  top: -1rem;
  left: -1rem;
  width: 2rem;
  height: 2rem;
  border: 1.5px solid var(--accent);
  border-radius: 50%;
  transition: transform 0.2s ease, background-color 0.2s ease;
}
.cursor-ring.is-active::before { transform: scale(1.5); background: var(--accent-glow); }
.cursor-ring.is-pressed::before { transform: scale(0.8); }

/* Small rounded square holding an icon */
.icon-tile {
  display: grid;
  place-items: center;
  flex: none;
  width: 3rem;
  height: 3rem;
  border-radius: 0.875rem;
  background: var(--tint);
  color: var(--accent);
  font-size: 1.5rem;
}
.icon-tile--sm {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.75rem;
  font-size: 1.25rem;
}

/* ---------- Small label above headings (e.g. "About Me") ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--accent);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.eyebrow::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: currentColor;
}

/* ---------- Buttons: one style everywhere ---------- */
.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3.25rem;
  padding: 0.75rem 1.5rem;
  border: 2px solid var(--accent);
  border-radius: 0.875rem;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.btn .ph { font-size: 1.25rem; }
.btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

.btn-primary {
  background: var(--accent);
  color: var(--on-accent);
}
.btn-primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

.btn-secondary {
  background: transparent;
  color: var(--accent);
}
.btn-secondary:hover { background: var(--secondary-hover-bg); }

/* ---------- Chips (tags) ---------- */
.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.chip {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: var(--tint);
  color: var(--text);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.4;
}

/* ---------- Tools marquee (Home + Services) ----------
   Scrolls on its own; stops while the mouse is over it or it has keyboard focus,
   and stands still for visitors whose device is set to reduce motion. */
.tools {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem 1.25rem;
  padding: 0.875rem 0.875rem 0.875rem 1.25rem;
}

.tools-title { font-size: 1.25rem; font-weight: 600; }

.marquee {
  overflow: hidden;
  border-radius: 999px;
}
.marquee.is-animated {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent);
  mask-image: linear-gradient(to right, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent);
}
.marquee:focus-visible { outline-offset: -3px; }

.marquee-track {
  display: flex;
  width: max-content;
}
/* Still row (no animation): items wrap onto new lines */
.marquee:not(.is-animated) .marquee-track { width: auto; }
.marquee:not(.is-animated) .tool-list { flex-wrap: wrap; }

.tool-list {
  display: flex;
  gap: 0.75rem;
  margin: 0;
  padding: 0.25rem 0.75rem 0.25rem 0;
  list-style: none;
}

.tool {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.375rem 1.125rem 0.375rem 0.375rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--chip-bg);
  color: var(--text);
  font-size: 1.0625rem;
  font-weight: 500;
  white-space: nowrap;
}

/* Brand logos in their own colors, on a small white tile (readable in both themes) */
.logo-tile {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  background: #FFFFFF;
  box-shadow: inset 0 0 0 1px rgba(47, 72, 88, 0.12);
}
.logo-tile img {
  width: 1.5rem;
  height: 1.5rem;
  object-fit: contain;
}

.marquee.is-animated .marquee-track {
  animation: marquee var(--marquee-duration, 40s) linear infinite;
}
.marquee.is-animated:hover .marquee-track,
.marquee.is-animated:focus-within .marquee-track,
.marquee.is-animated:focus .marquee-track {
  animation-play-state: paused;
}
@keyframes marquee {
  to { transform: translateX(-50%); }
}

@media (max-width: 74.99em) {
  .tools { grid-template-columns: 1fr; padding: var(--card-pad); }
}


/* ==========================================================================
   5. HOME PAGE
   ========================================================================== */

/* ---------- Hero ---------- */
.hero {
  isolation: isolate;
  padding: clamp(1.5rem, 3.5vw, 3rem);
  border-radius: 1.5rem;
  background:
    radial-gradient(circle at 85% 15%, var(--hero-glow), transparent 55%),
    var(--surface);
  overflow: hidden;
}

/* Graph-paper grid behind the hero (lighter behind the text) */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 2.5rem 2.5rem;
  background-position: -1px -1px;
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.35), #000 60%);
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.35), #000 60%);
}

.hero-text {
  position: relative;
  max-width: 38rem;
}

/* Rising growth chart in the bottom-right corner (decoration only) */
.hero-chart {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: -1;
  width: min(50%, 34rem);
  height: auto;
  color: var(--accent);
  pointer-events: none;
}
.hero-chart .chart-bar  { fill: currentColor; opacity: 0.1; }
.hero-chart .chart-line { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.hero-chart .chart-dot  { fill: var(--surface); stroke: currentColor; stroke-width: 3; }
.hero-chart .chart-halo { fill: currentColor; opacity: 0.2; }
@media (max-width: 63.99em) {
  .hero-chart { width: 70%; opacity: 0.45; }
}
@media (max-width: 47.99em) {
  .hero-chart { display: none; }
}

.hero-title {
  font-size: clamp(2rem, 0.9rem + 3.2vw, 3.75rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.hero-title span { display: block; }

.hero-lead {
  max-width: 58ch;
  margin-top: 1.25rem;
  color: var(--text-soft);
  font-size: clamp(1.125rem, 1rem + 0.35vw, 1.3125rem);
}

.hero .button-row { margin-top: 1.75rem; }

/* ---------- Featured projects ---------- */
.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16.5rem), 1fr));
  gap: var(--gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.project-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 0.75rem 0.75rem 1.25rem;
  border: 2px solid var(--card-border);     /* thicker so the cards stand out */
  border-radius: 1.25rem;
  background: var(--surface);
  transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
}
.project-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-hover);
  transform: translateY(-3px);
}

.project-body {
  display: grid;
  gap: 0.5rem;
  padding: 0 0.5rem;
}
.project-body .chip-list { margin-top: 0.5rem; }

.project-label {
  color: var(--accent);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.project-name { font-size: 1.3125rem; font-weight: 600; }

.project-subtitle {
  color: var(--text-soft);
  font-size: 1.0625rem;
  line-height: 1.5;
}

/* Video thumbnail with a play button */
.video-thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 0.875rem;
  background: #1F3340;
}
.video-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* crops YouTube's black bars */
  transition: transform 0.4s ease;
}
.video-thumb:hover img { transform: scale(1.04); }
.video-thumb:focus-visible { outline-offset: 3px; }

.play-badge {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  margin: auto;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  color: #1E7F5C;
  font-size: 1.75rem;
  box-shadow: 0 8px 24px rgba(31, 51, 64, 0.35);
  transition: background-color 0.2s, color 0.2s, transform 0.2s;
}
.video-thumb:hover .play-badge,
.video-thumb:focus-visible .play-badge {
  background: #1E7F5C;
  color: #FFFFFF;
  transform: scale(1.08);
}

/* ---------- What I Can Build (full width), then About Me + Let's Talk ---------- */
.home-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap);
}
@media (min-width: 75em) {
  .home-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-grid .build-card { grid-column: 1 / -1; }
}
.home-grid .card { display: flex; flex-direction: column; }

/* What I Can Build: 4 per row on laptops, 2 on tablets, 1 on phones */
.build-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 36em) {
  .build-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 75em) {
  .build-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.build-list li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: var(--chip-bg);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.4;
}

/* About Me (small) */
/* Photo is exactly as tall as the paragraph next to it */
.about-mini {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  align-items: stretch;
  gap: 1.25rem;
}
.about-mini-photo { min-height: 8rem; }
.about-mini-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
}
/* Phones: photo above the text */
@media (max-width: 30em) {
  .about-mini { grid-template-columns: minmax(0, 1fr); }
  .about-mini-photo { width: 8rem; height: 10rem; }
}

/* Buttons at the bottom of a card, under a thin divider line
   (lined up at the same height in cards that sit side by side) */
.card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: auto;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}
.about-mini,
.contact-lines { margin-bottom: 1.25rem; }

/* Let's Talk & Build: email + Calendly buttons, stacked and the same width */
.contact-lines {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin-top: 1rem;
}
.contact-line {
  justify-content: flex-start;
  width: 100%;
  text-align: left;
  overflow-wrap: anywhere;
}
.contact-line .ph { font-size: 1.375rem; }
/* Narrow phones: a bit less padding so the email address fits */
@media (max-width: 30em) {
  .contact-line { padding-inline: 1rem; font-size: 1rem; }
}
/* Same icon colors as the sidebar (a lighter blue in dark mode so it stays visible) */
.contact-icon--email { color: var(--accent); }
.contact-icon--calendly { color: #006BFF; }
:root[data-theme="dark"] .contact-icon--calendly { color: #6AAEFF; }


/* ==========================================================================
   6. TOP OF INNER PAGES + CALL-TO-ACTION BAND
   ========================================================================== */
.page-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap);
}
@media (min-width: 75em) {
  .page-head--split { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
}

.page-intro {
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  border-radius: 1.5rem;
  background:
    radial-gradient(circle at 90% 10%, var(--hero-glow), transparent 55%),
    var(--surface);
}

.page-title {
  margin-top: 0.75rem;
  font-size: clamp(2rem, 1.1rem + 2.6vw, 3.25rem);
  font-weight: 700;
  line-height: 1.15;
}

.page-lead {
  max-width: 62ch;
  margin-top: 1rem;
  color: var(--text-soft);
  font-size: clamp(1.125rem, 1rem + 0.3vw, 1.25rem);
}

/* Mint card used for side notes and call-to-actions */
.callout {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.75rem;
  border-color: transparent;
  background: var(--tint);
  box-shadow: none;
}
.callout .icon-tile,
.cta .icon-tile,
.process-card .icon-tile { background: var(--surface); }
.callout-title { font-size: 1.375rem; font-weight: 600; }
/* Small label in the side card stays on one line */
.callout .eyebrow { white-space: nowrap; letter-spacing: 0.05em; }
.callout p { color: var(--text-soft); }

.cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2rem;
  border-color: transparent;
  background: var(--tint);
  box-shadow: none;
}
.cta-text {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.cta-title { font-size: 1.5rem; font-weight: 600; }
.cta p { margin-top: 0.25rem; color: var(--text-soft); }


/* ==========================================================================
   7. PROJECTS PAGE
   ========================================================================== */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
/* Selected filter looks like a primary button, with a check mark */
.filter-bar .btn[aria-pressed="true"] {
  background: var(--accent);
  color: var(--on-accent);
}
.filter-bar .btn[aria-pressed="true"]:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}
.filter-bar .btn .ph-check { display: none; }
.filter-bar .btn[aria-pressed="true"] .ph-check { display: inline-block; }

/* One column on tablets and phones; all three projects side by side on laptops and desktops */
.projects-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 64em) {
  .projects-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.project-card--full { gap: 0.875rem; padding-bottom: 1rem; }
.project-card--full .project-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.625rem;
}
.project-card--full .project-name { font-size: 1.375rem; }

.chip--accent {
  align-self: flex-start;
  color: var(--accent);
  font-weight: 600;
}

/* "Tools & Features" sits just above the buttons, so it lines up across all three cards */
.features-title {
  margin-top: auto;
  padding-top: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
/* Tools & Features tags: one per line, all the same height */
.project-card--full .chip-list {
  flex-direction: column;
  align-items: flex-start;
}
.project-card--full .chip-list .chip { min-height: 2.25rem; }
.chip .ph {
  margin-right: 0.5rem;
  font-size: 1.25rem;
}
/* Chip with a colored brand logo */
.chip--logo { gap: 0.5rem; padding-left: 0.25rem; }
.chip .logo-tile { width: 1.75rem; height: 1.75rem; }
.chip .logo-tile img { width: 1.125rem; height: 1.125rem; }

/* Buttons stacked, full width, lined up along the bottom of every card */
.project-actions {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding-top: 0.5rem;
}
.project-actions .btn { width: 100%; }


/* ==========================================================================
   8. SERVICES PAGE
   ========================================================================== */
.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  gap: var(--gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.service-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: border-color 0.25s, box-shadow 0.25s, opacity 0.6s ease, transform 0.6s ease;
}
.service-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-hover);
}
.service-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.service-num {
  color: var(--text-soft);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.05em;
}
.service-title { font-size: 1.3125rem; font-weight: 600; }

/* My Process: four steps joined by arrows */
.process-card { background: var(--tint); border-color: transparent; box-shadow: none; }

.process {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 90em) {
  .process { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Stacked steps: number on the left, title + text on the right */
.process-step {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0.25rem 1rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: 1.25rem;
  background: var(--surface);
}
.process-step .process-num { grid-row: span 2; }
/* Side-by-side steps (wide screens): everything stacked inside each card */
@media (min-width: 90em) {
  .process-step { display: flex; flex-direction: column; gap: 0.5rem; }
}
.process-num {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 1rem;
  font-weight: 700;
}
.process-title { font-size: 1.25rem; font-weight: 600; }

/* Arrow after each step (points down on narrow screens, right on wide screens) */
.process-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: calc(100% + 0.375rem);
  left: 50%;
  width: 1.75rem;
  height: 1.75rem;
  background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transform: translateX(-50%) rotate(90deg);
}
@media (min-width: 90em) {
  .process-step:not(:last-child)::after {
    top: 50%;
    left: calc(100% + 0.375rem);
    transform: translateY(-50%);
  }
}
/* My Process animation (plays once when scrolled into view; main.js starts it).
   Each step slides up and fades in, its number pops in, then the arrow draws
   itself toward the next step. Step 1 at 0s, 2 at 0.45s, 3 at 0.9s, 4 at 1.35s. */
@media (prefers-reduced-motion: no-preference) {
  .process-anim .process-step { opacity: 0; transform: translateY(1.25rem); }
  .process-anim .process-num { opacity: 0; transform: scale(0.4); }
  .process-anim .process-step:not(:last-child)::after { clip-path: inset(0 100% 0 0); }

  .process-anim.is-playing .process-step {
    animation: process-step-in 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) calc(var(--i) * 0.45s) forwards;
  }
  .process-anim.is-playing .process-num {
    animation: process-num-pop 0.45s cubic-bezier(0.3, 1.6, 0.5, 1) calc(var(--i) * 0.45s + 0.15s) forwards;
  }
  .process-anim.is-playing .process-step:not(:last-child)::after {
    animation: process-arrow-draw 0.3s ease-out calc(var(--i) * 0.45s + 0.4s) forwards;
  }
}
/* When printing, always show everything (even parts that haven't animated in yet) */
@media print {
  .process-anim .process-step,
  .process-anim .process-num,
  .reveal { opacity: 1 !important; transform: none !important; }
  .process-anim .process-step::after { clip-path: none !important; }
}
@keyframes process-step-in    { to { opacity: 1; transform: none; } }
@keyframes process-num-pop    { to { opacity: 1; transform: none; } }
@keyframes process-arrow-draw { to { clip-path: inset(0 0 0 0); } }

@media (forced-colors: active) {
  .process-step:not(:last-child)::after { forced-color-adjust: none; background: CanvasText; }
}

/* Tools card with a sentence of text (Services page) */
.tools--stacked {
  grid-template-columns: minmax(0, 1fr);
  padding: var(--card-pad);
}
.tools-desc { margin-top: 0.5rem; color: var(--text-soft); }


/* ==========================================================================
   9. ABOUT PAGE
   ========================================================================== */
/* Top: intro + photo side by side (same height), quote in a full-width row below */
.about-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "intro" "photo" "quote";
  gap: var(--gap);
}
@media (min-width: 64em) {
  .about-top {
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    grid-template-areas: "intro photo" "quote quote";
  }
}
.about-intro { grid-area: intro; }
.about-intro .button-row { margin-top: 1.5rem; }

.about-subtitle {
  max-width: 55ch;
  margin-top: 1rem;
  font-size: clamp(1.1875rem, 1.05rem + 0.4vw, 1.375rem);
  font-weight: 500;
  line-height: 1.5;
}

/* The photo fills the full height of the intro card next to it */
.about-photo {
  grid-area: photo;
  position: relative;
  overflow: hidden;
  min-height: 22rem;
  padding: 0;
}
.about-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
}
@media (max-width: 63.99em) {
  .about-photo { width: 100%; max-width: 26rem; min-height: 0; aspect-ratio: 3 / 4; }
}
/* With the animated ring: the photo sits just inside the ring */
.about-photo.photo-ring { padding: 5px; border: 0; }
.about-photo.photo-ring img {
  position: absolute;
  inset: 5px;
  width: calc(100% - 10px);
  height: calc(100% - 10px);
  border-radius: calc(1.25rem - 5px);
}

/* Quote: small quote mark on top, text centered */
.quote-card {
  grid-area: quote;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: clamp(1.5rem, 3vw, 2rem) clamp(1.25rem, 5vw, 4rem);
  background:
    radial-gradient(circle at 50% 0%, var(--hero-glow), transparent 65%),
    var(--surface);
  text-align: center;
}
.quote-mark { color: var(--accent); font-size: 2.25rem; }
.quote-card blockquote p {
  max-width: 62ch;
  margin-inline: auto;
  font-size: clamp(1.1875rem, 1.05rem + 0.35vw, 1.3125rem);
  font-weight: 500;
  line-height: 1.6;
}

/* Highlight cards */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: var(--gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.stat-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
}
.stat-title { font-size: 1.25rem; font-weight: 600; }
.stat-number {
  margin-right: 0.25rem;
  color: var(--accent);
  font-size: 1.75rem;
  font-weight: 700;
}
.stat-card p { margin-top: 0.25rem; color: var(--text-soft); }
.stat-projects { margin-top: 0.75rem; }

/* My Background + Core Skills: both cards end at the same line */
.about-details {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap);
  align-items: stretch;
}
@media (min-width: 75em) {
  .about-details { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }
}
.about-details .card { display: flex; flex-direction: column; }
.prose { margin-bottom: 1.25rem; }
.prose p + p { margin-top: 1rem; }

.pull-quote {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  margin-top: auto;
  padding: 1rem 1.25rem;
  border-radius: 1rem;
  background: var(--tint);
}
.pull-quote .ph { color: var(--accent); font-size: 2rem; }
.pull-quote p { font-size: 1.1875rem; font-weight: 600; }

/* Skills spread out evenly to fill their card */
.check-list {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.625rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}
.check-list .ph {
  margin-top: 0.1rem;
  color: var(--accent);
  font-size: 1.5rem;
}


/* ==========================================================================
   10. FAQs / CONTACT PAGE
   ========================================================================== */
.contact-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.contact-intro-art {
  display: none;
  place-items: center;
  flex: none;
  width: 8rem;
  height: 8rem;
  border-radius: 2rem;
  background: var(--tint);
  color: var(--accent);
  font-size: 4.5rem;
}
@media (min-width: 75em) {
  .contact-intro-art { display: grid; }
}

/* Two columns that always end at the same line:
   left = FAQs + Book a Call (the Book a Call card grows if needed),
   right = form (the message box grows if needed) */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: var(--gap);
}
@media (min-width: 75em) {
  .contact-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
}
.contact-col {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}
.contact-col .book-call { flex-grow: 1; }
.form-card {
  display: flex;
  flex-direction: column;
  scroll-margin-top: 1rem;       /* space above the form when the page jumps to it */
}
@media (max-width: 63.99em) {
  .form-card { scroll-margin-top: 5.5rem; }   /* clear the top bar on tablets/phones */
}
.card-intro { margin-top: -0.25rem; margin-bottom: 1rem; color: var(--text-soft); }

/* FAQ accordion */
.faq-list {
  display: grid;
  gap: 0.75rem;
}
.faq-item {
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: var(--chip-bg);
}
.faq-item h3 { font-size: inherit; }
.faq-button {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  width: 100%;
  min-height: 3.5rem;
  padding: 0.75rem 1rem;
  border: 0;
  border-radius: 1rem;
  background: transparent;
  color: var(--text);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
}
.faq-button:hover { background: var(--secondary-hover-bg); }
.faq-num {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.75rem;
  background: var(--tint);
  color: var(--accent);
  font-size: 1rem;
  font-weight: 700;
}
.faq-chevron {
  margin-left: auto;
  font-size: 1.25rem;
  transition: transform 0.2s;
}
.faq-button[aria-expanded="true"] .faq-chevron { transform: rotate(180deg); }
.faq-panel { padding: 0 1.25rem 1.25rem 4.375rem; }
@media (max-width: 30em) {
  .faq-panel { padding-left: 1.25rem; }
}

/* Book a call */
.book-call {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
}
.book-call-text {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.book-call-text p { color: var(--text); font-weight: 500; }

/* Contact form */
.contact-form {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 1.125rem;
}
.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: 1.125rem;
}
.field {
  display: grid;
  align-content: start;
  gap: 0.5rem;
}
.field label {
  font-size: 1rem;
  font-weight: 600;
}
.field input,
.field textarea {
  width: 100%;
  min-height: 3.25rem;
  padding: 0.75rem 1rem;
  border: 2px solid var(--border-strong);
  border-radius: 0.875rem;
  background: var(--input-bg);
  color: var(--text);
  font: inherit;
  font-size: 1.125rem;
  line-height: 1.5;
}
.field textarea {
  min-height: 9.5rem;
  resize: vertical;
}
/* The message box takes up any spare height, so the form card has no empty gap */
.field--grow { display: flex; flex: 1; flex-direction: column; }
.field--grow textarea { flex: 1; }
.field input::placeholder,
.field textarea::placeholder {
  color: var(--text-soft);
  opacity: 1;
}
.field input:focus-visible,
.field textarea:focus-visible {
  border-color: var(--accent);
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}
.field [aria-invalid="true"] { border-color: var(--error); }

.field-error {
  display: flex;
  align-items: flex-start;
  gap: 0.375rem;
  color: var(--error);
  font-size: 1rem;
  font-weight: 500;
}
.field-error .ph { margin-top: 0.2rem; font-size: 1.125rem; }

.honeypot { display: none !important; }

.form-message {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border: 2px solid var(--accent);
  border-radius: 1rem;
  background: var(--surface);
  font-weight: 500;
}
.form-message:focus { outline: 3px solid var(--accent); outline-offset: 3px; }
.form-message .ph { margin-top: 0.1rem; color: var(--accent); font-size: 1.5rem; }
.form-message--error { border-color: var(--error); }
.form-message--error .ph { color: var(--error); }
.form-message--error:focus { outline-color: var(--error); }

.contact-form .btn { align-self: flex-start; }
.contact-form .btn[disabled] { cursor: progress; opacity: 0.75; transform: none; }

/* Bottom contact bar: three items with round icons and thin divider lines */
.info-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background:
    radial-gradient(circle at 0% 0%, var(--hero-glow), transparent 45%),
    var(--surface);
}
.info-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.875rem;
  padding-block: 1.25rem;
  text-align: center;
}
.info-item p { margin-inline: auto; }
.info-item:first-child { padding-top: 0; }
.info-item:last-child { padding-bottom: 0; }
.info-item + .info-item { border-top: 1px solid var(--border); }

/* Laptops: side by side, with vertical dividers (smaller screens: stacked) */
@media (min-width: 80em) {
  .info-bar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .info-item { padding: 0 1.5rem; }
  .info-item:first-child { padding-left: 0; }
  .info-item:last-child { padding-right: 0; }
  .info-item + .info-item { border-top: 0; border-left: 1px solid var(--border); }
}
/* Wider screens: each column as wide as its text needs, so the email and
   titles stay on one line and "Full-Time & Part-Time Remote" stays together */
@media (min-width: 84em) {
  .info-bar { grid-template-columns: fit-content(26rem) fit-content(17.5rem) minmax(0, 1fr); }
  .info-title { white-space: nowrap; }
  .nowrap-wide { white-space: nowrap; }
}
.nowrap { white-space: nowrap; }

.info-bar .icon-tile {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  font-size: 1.875rem;
}
.info-title { font-size: 1.25rem; font-weight: 600; }
.info-item p { color: var(--text-soft); }
.info-link {
  padding-block: 0.625rem;   /* bigger click area without extra line spacing */
  font-weight: 600;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.info-link:hover { text-decoration: underline; }

/* Links inside a sentence: bigger click area without changing the line spacing */
.inline-link {
  padding-block: 0.625rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}


/* ==========================================================================
   11. VIDEO POP-UP
   ========================================================================== */
.video-dialog {
  width: min(64rem, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  padding: 0;
  border: 0;
  border-radius: 1.25rem;
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
  overflow: auto;
}
.video-dialog::backdrop { background: rgba(23, 38, 48, 0.82); }

.video-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.625rem 0.625rem 0.625rem 1.25rem;
}
.video-dialog-title { font-size: 1.125rem; font-weight: 600; }

.dialog-close {
  display: grid;
  place-items: center;
  flex: none;
  width: 3rem;
  height: 3rem;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  font-size: 1.5rem;
  cursor: pointer;
}
.dialog-close:hover { border-color: var(--accent); color: var(--accent); }

.video-frame {
  aspect-ratio: 16 / 9;
  background: #1F3340;
}
.video-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}


/* ==========================================================================
   12. INTRO ANIMATION (Home page, first visit in a browser session)
   Timeline (seconds):  headline words 0.1–1.1 · step 1 lights up 0.9 ·
   step 2 at 1.45 · step 3 at 2.0 · step 4 at 2.55 · "Workflow complete" 2.85 ·
   at 3.1 (set in main.js) the headline glides into the Home page headline while
   everything else fades · finished by about 4.05.
   ========================================================================== */
.intro { display: none; }

.intro-active .intro {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  overflow-y: auto;
  padding: 5.5rem 1rem 2rem;
  background: var(--bg);
}
/* Safety net: if the script never starts the intro, hide it anyway */
.intro-active .intro:not(.is-playing) {
  animation: intro-out 0.4s ease 2s forwards;
}
.intro-active .intro.is-leaving      { animation: intro-out 0.45s ease forwards; }
.intro-active .intro.is-leaving-fast { animation: intro-out 0.3s ease forwards; }

/* The glide at the end: background, workflow and buttons fade;
   the headline words move (main.js sets where they go) */
.intro-active .intro.is-gliding {
  background-color: transparent;
  transition: background-color 0.5s ease 0.25s;
}
.intro.is-gliding .intro-flow,
.intro.is-gliding .intro-status,
.intro.is-gliding .intro-skip,
.intro.is-gliding .intro-lines {
  opacity: 0 !important;
  transition: opacity 0.3s ease;
}

.intro-lock,
.intro-lock body { overflow: hidden; }

.intro-lines {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  fill: none;
  stroke: var(--lines);
  stroke-width: 1.25;
}

.intro-skip {
  position: fixed;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 1;
  background: var(--surface);
}

.intro-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(2rem, 6vh, 4rem);
  width: min(100%, 60rem);
  margin: auto;            /* centers, but never cuts off content on short screens */
  text-align: center;
}

/* Headline, word by word */
.intro-title {
  max-width: none;
  color: var(--text);
  font-size: clamp(2rem, 0.8rem + 4.4vw, 4.5rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.intro-phrase {
  display: inline-block;
  white-space: nowrap;
  transform-origin: 0 0;
  transition: transform 0.85s cubic-bezier(0.65, 0, 0.35, 1);
}
.intro-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.5em);
}
.intro-word--accent { color: var(--accent); }
.is-playing .intro-word {
  animation: intro-word 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) var(--d) forwards;
}

/* Workflow: four steps, left to right */
.intro-flow {
  --node: clamp(3.5rem, 8vw, 5rem);
  display: flex;
  width: 100%;
  max-width: 52rem;
  margin: 0;
  padding: 0;
  list-style: none;
  opacity: 0;
}
.is-playing .intro-flow { animation: intro-fade 0.4s ease 0.55s forwards; }

.intro-step {
  position: relative;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.intro-node {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--node);
  height: var(--node);
  border: 2px solid var(--border);
  border-radius: 1.25rem;
  background: var(--surface);
  color: var(--text-soft);
  font-size: calc(var(--node) * 0.42);
  box-shadow: var(--shadow);
}
.is-playing .intro-node { animation: intro-node-on 0.3s ease var(--on) forwards; }

/* small connection dots on the sides of each box */
.intro-node::before,
.intro-node::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 0.625rem;
  height: 0.625rem;
  border: 2px solid var(--border-strong);
  border-radius: 50%;
  background: var(--surface);
  transform: translateY(-50%);
}
.intro-node::before { left: -0.4rem; }
.intro-node::after { right: -0.4rem; }
.intro-step:first-child .intro-node::before,
.intro-step:last-child .intro-node::after { display: none; }

/* green checkmark badge */
.intro-check {
  position: absolute;
  top: -0.7rem;
  right: -0.7rem;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 1rem;
  transform: scale(0);
}
.is-playing .intro-check {
  animation: intro-pop 0.35s cubic-bezier(0.3, 1.6, 0.5, 1) var(--done) forwards;
}

.intro-label {
  color: var(--text);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.35;
}

/* connecting line that fills in after each step is done */
.intro-line {
  position: absolute;
  top: calc(var(--node) / 2 - 1.5px);
  left: calc(50% + var(--node) / 2 + 0.5rem);
  width: calc(100% - var(--node) - 1rem);
  height: 3px;
  overflow: hidden;
  border-radius: 3px;
  background: var(--border);
}
.intro-line-fill {
  display: block;
  height: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
}
.is-playing .intro-line-fill { animation: intro-fill 0.3s linear var(--done) forwards; }

/* Status line: "Executing workflow…" then "Workflow complete" */
.intro-status {
  display: inline-grid;
  max-width: none;
  color: var(--text-soft);
  font-size: 1.0625rem;
  font-weight: 500;
  opacity: 0;
}
.is-playing .intro-status { animation: intro-fade 0.4s ease 0.7s forwards; }
.intro-status > span {
  display: inline-flex;
  grid-area: 1 / 1;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.intro-status-done { opacity: 0; color: var(--text); }
.intro-status-done .ph { color: var(--accent); font-size: 1.375rem; }
.is-playing .intro-status-running { animation: intro-hide 0.25s ease 2.85s forwards; }
.is-playing .intro-status-done { animation: intro-fade 0.3s ease 2.9s forwards; }

.intro-dot {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background: var(--accent);
}
.is-playing .intro-dot { animation: intro-pulse 0.7s ease-in-out infinite alternate; }

@keyframes intro-word    { to { opacity: 1; transform: none; } }
@keyframes intro-fade    { to { opacity: 1; } }
@keyframes intro-hide    { to { opacity: 0; } }
@keyframes intro-pop     { to { transform: scale(1); } }
@keyframes intro-fill    { to { transform: scaleX(1); } }
@keyframes intro-pulse   { to { opacity: 0.35; transform: scale(0.8); } }
@keyframes intro-out     { to { opacity: 0; visibility: hidden; } }
@keyframes intro-node-on {
  to {
    border-color: var(--accent);
    color: var(--accent);
    box-shadow: 0 0 0 6px var(--accent-glow), var(--shadow);
  }
}


/* ==========================================================================
   13. SCROLL FADE-IN + REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .reveal-ready .reveal:not(.is-visible) {
    opacity: 0;
    transform: translateY(1rem);
  }
  .reveal-ready .reveal {
    transition: opacity 0.6s ease, transform 0.6s ease, border-color 0.25s, box-shadow 0.25s;
  }
}

/* Visitor asked their device for less motion: switch off movement */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .btn:hover, .icon-link:hover, .project-card:hover,
  .video-thumb:hover img { transform: none; }
  .intro { display: none !important; }
}