/* ---------- Design tokens (gentle green theme) ---------- */
:root{
  --bg:#eaf7f1;            /* page bg (mint) */
  --surface:#ffffff;       /* surfaces/nav */
  --text:#1a2e22;          /* primary text (deep forest) */
  --muted:#5b7c6a;         /* secondary text (sage) */
  --brand:#5ca97a;         /* primary accent (soft green) */
  --brand-2:#a8e6b3;       /* lighter accent (gradient end) */
  --card:#f5fbf8;          /* cards bg */
  --border:#cfe6d9;        /* subtle borders */

  --radius:14px;
  --space:16px;
  --maxw:1100px;
  --shadow:0 10px 25px rgba(0,0,0,.08);
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#eaf7f1; --surface:#fff; --text:#1a2e22; --muted:#5b7c6a;
    --card:#f5fbf8; --border:#cfe6d9;
  }
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,Apple Color Emoji,Segoe UI Emoji;
  color:var(--text);
  background:linear-gradient(180deg,var(--bg),#d9f2e6 40%,#c5e8d7 100%);
  background-attachment: fixed;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
a:hover{color:var(--brand)}

.container{max-width:var(--maxw);margin:0 auto;padding:0 1rem}
.row{display:flex;gap:1rem;align-items:center}
.between{justify-content:space-between}
.skip-link{position:absolute;left:-9999px;top:auto}
.skip-link:focus{left:1rem;top:1rem;background:#fff;padding:.5rem 1rem;border-radius:6px;z-index:999}

/* ---------- Header / Nav ---------- */
.site-header{
  position:sticky;top:0;z-index:10;
  backdrop-filter:saturate(180%) blur(8px);
  background:color-mix(in oklab, var(--surface) 80%, transparent);
  border-bottom:1px solid var(--border);
}
.brand{font-weight:800;letter-spacing:-.02em}
.nav a{padding:.75rem .75rem;border-radius:8px}
.nav a[aria-current="page"], .nav a:hover{background:var(--card)}

/* Mobile nav (simple) */
.nav-toggle{display:none}
@media (max-width:720px){
  .nav-toggle{display:grid;place-items:center;background:var(--card);border:1px solid var(--border);border-radius:10px;padding:.4rem}
  .nav{display:none;position:absolute;right:1rem;top:60px;background:var(--surface);padding:.5rem;border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow)}
  .nav.open{display:block}
  .nav a{display:block}
  .nav-toggle .bar{display:block;width:18px;height:2px;background:var(--text);margin:3px 0}
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block; padding:.75rem 1.1rem; border-radius:var(--radius);
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  color:#fff; font-weight:600; border:none; box-shadow:var(--shadow);
  transition:filter .2s ease, transform .05s ease;
}
.btn:hover{filter:saturate(1.05) brightness(.98)}
.btn:active{transform:translateY(1px)}
.btn-featured{background:linear-gradient(135deg,#4a8c65,#8bd3a4)}

/* ---------- Hero ---------- */
.hero{
  background:linear-gradient(160deg,#eaf7f1 0%,#d7f0e4 40%,#c2e8d4 100%);
  padding:6rem 1rem; border-radius:var(--radius); text-align:center;
  animation:fadeIn 1s ease-in-out; box-shadow:var(--shadow); margin-top:1rem;
}
.hero h1{
  font-size:clamp(2.5rem,6vw,3.5rem); color:#174a2d; margin:0 0 .75rem;
  letter-spacing:-.03em; animation:slideDown .8s ease;
}
.hero .lead{
  font-size:1.1rem; color:#365a46; max-width:650px; margin:0 auto .5rem; line-height:1.5;
  animation:slideUp 1s ease .2s both;
}
.hero .creds{
  color:#557563; font-weight:600; font-size:.95rem; letter-spacing:.02em;
  animation:fadeIn 1.2s ease .4s both;
}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideDown{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}

/* === Hero: side-by-side (text left, photo right) === */
.hero.container {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  text-align: left;           /* override any center alignment */
  padding: clamp(3rem, 6vw, 5rem) 1rem;
}

/* Keep your right-side image tidy */
.hero .hero-media {
  display: flex;
  justify-content: center;    /* keeps image nicely centered within its column */
}
.hero .hero-media img {
  width: 100%;
  max-width: clamp(320px, 40vw, 480px);  /* cap size so it never gets huge */
  height: auto;
  border-radius: 16px;
  box-shadow: var(--shadow);
}

/* Nice spacing and readable line-length for the text column */
.hero .hero-text {
  max-width: 56ch;            /* prevents super-long lines */
}

/* Mobile: stack vertically (text first, image second) */
@media (max-width: 900px) {
  .hero.container {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .hero .hero-text { margin-inline: auto; }
  .hero .hero-media { margin-top: 1rem; }
}

/* === Hero text refinements for better emphasis === */
.hero .eyebrow {
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: #4c8c66; /* slightly deeper green for contrast */
  margin-bottom: 0.75rem;
}

.hero h1 {
  font-size: clamp(2.5rem, 6vw, 3.5rem);
  background: linear-gradient(135deg, #174a2d 0%, #5ca97a 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
  margin-bottom: 0.5rem;
}

.hero .creds {
  font-weight: 600;
  color: #3e6b53;
  font-size: 1rem;
  letter-spacing: 0.015em;
  margin-bottom: 0.8rem;
  border-left: 4px solid #74d4ac;
  padding-left: 0.6rem;
}

.hero .lead:not(.creds) {
  font-size: 1.05rem;
  line-height: 1.65;
  color: #2d4b39;
  max-width: 65ch;
  margin: 0.8rem auto;
  text-shadow: 0 0.5px 0 rgba(0, 0, 0, 0.05);
}

/* Subtle fade-in and slide animation */
.hero .hero-text > * {
  opacity: 0;
  transform: translateY(10px);
  animation: heroTextUp 0.8s ease forwards;
}
.hero .hero-text > *:nth-child(1) { animation-delay: 0.2s; }
.hero .hero-text > *:nth-child(2) { animation-delay: 0.4s; }
.hero .hero-text > *:nth-child(3) { animation-delay: 0.6s; }
.hero .hero-text > *:nth-child(4) { animation-delay: 0.8s; }

@keyframes heroTextUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ========== Global fade-up keyframes (reuse from hero vibe) ========== */
@keyframes fadeUpOnce {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .highlights, .highlights .carousel, .highlights .carousel-track > .slide .card,
  .projects h1, .projects .lead, .projects .cards > li {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ========== Index: Highlights section ========== */
/* Section + track fade in first */
.highlights {
  opacity: 0;
  transform: translateY(10px);
  animation: fadeUpOnce .7s ease both;
  animation-delay: .10s;
}
.highlights .carousel {
  opacity: 0;
  transform: translateY(10px);
  animation: fadeUpOnce .7s ease both;
  animation-delay: .18s;
}

/* Stagger each highlight card */
.highlights .carousel-track > .slide .card {
  opacity: 0;
  transform: translateY(10px);
  animation: fadeUpOnce .7s ease both;
}

/* Adjust the count to how many slides you have */
.highlights .carousel-track > .slide:nth-child(1)  .card { animation-delay: .26s; }
.highlights .carousel-track > .slide:nth-child(2)  .card { animation-delay: .32s; }
.highlights .carousel-track > .slide:nth-child(3)  .card { animation-delay: .38s; }
.highlights .carousel-track > .slide:nth-child(4)  .card { animation-delay: .44s; }
.highlights .carousel-track > .slide:nth-child(5)  .card { animation-delay: .50s; }
.highlights .carousel-track > .slide:nth-child(6)  .card { animation-delay: .56s; }
.highlights .carousel-track > .slide:nth-child(7)  .card { animation-delay: .62s; }
.highlights .carousel-track > .slide:nth-child(8)  .card { animation-delay: .68s; }
.highlights .carousel-track > .slide:nth-child(9)  .card { animation-delay: .74s; }
.highlights .carousel-track > .slide:nth-child(10) .card { animation-delay: .80s; }

/* ========== Projects page grid ========== */
/* Title + intro line */
.projects h1 {
  opacity: 0;
  transform: translateY(8px);
  animation: fadeUpOnce .6s ease both;
  animation-delay: .12s;
}
.projects .lead {
  opacity: 0;
  transform: translateY(8px);
  animation: fadeUpOnce .6s ease both;
  animation-delay: .20s;
}

/* Cards (stagger in rows) */
.projects .cards > li {
  opacity: 0;
  transform: translateY(10px);
  animation: fadeUpOnce .6s ease both;
}

/* Stagger delays — adjust count to your cards */
.projects .cards > li:nth-child(1)  { animation-delay: .26s; }
.projects .cards > li:nth-child(2)  { animation-delay: .32s; }
.projects .cards > li:nth-child(3)  { animation-delay: .38s; }
.projects .cards > li:nth-child(4)  { animation-delay: .44s; }
.projects .cards > li:nth-child(5)  { animation-delay: .50s; }
.projects .cards > li:nth-child(6)  { animation-delay: .56s; }
.projects .cards > li:nth-child(7)  { animation-delay: .62s; }
.projects .cards > li:nth-child(8)  { animation-delay: .68s; }
.projects .cards > li:nth-child(9)  { animation-delay: .74s; }
.projects .cards > li:nth-child(10) { animation-delay: .80s; }
.projects .cards > li:nth-child(11) { animation-delay: .86s; }
.projects .cards > li:nth-child(12) { animation-delay: .92s; }

/* ========== Project detail page (optional but nice) ========== */
.proj-wrap {
  opacity: 0;
  transform: translateY(10px);
  animation: fadeUpOnce .6s ease both;
  animation-delay: .18s;
}


/* ---------- Cards / Projects ---------- */
.cards{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));padding:0;list-style:none}
.card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:1rem;
  box-shadow:var(--shadow); transition:transform .12s ease, box-shadow .2s ease;
}
.card:hover{transform:translateY(-2px); box-shadow:0 16px 40px rgba(0,0,0,.12)}
.card h3{margin:.25rem 0 .25rem}
.card .lead{ overflow:hidden; text-overflow:ellipsis}
.tags{display:flex;gap:.4rem;flex-wrap:wrap;padding:0;margin:.5rem 0 0;list-style:none}
.tags li{border:1px solid var(--border);background:var(--surface);border-radius:999px;padding:.2rem .5rem;font-size:.8rem}

/* ---------- Project detail page ---------- */
.proj-wrap{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
.proj-header{margin:2rem 0 1rem}
.proj-meta{color:var(--muted);margin:.25rem 0 1rem}
.proj-body .section{margin:1.25rem 0}
.backlink{display:inline-block;margin:1rem 0}

/* ---------- Highlights carousel ---------- */
.carousel{--gap:1rem;--spv:1;position:relative}
.carousel-viewport{overflow:hidden}
.carousel-track{display:flex;gap:var(--gap);padding:.25rem 0;transition:transform 300ms ease;will-change:transform}
.slide{min-width:calc((100% - (var(--gap) * (var(--spv) - 1)))/var(--spv));list-style:none}
.carousel-btn{
  position:absolute;top:50%;translate:0 -50%;border:none;background:var(--surface);
  box-shadow:0 4px 16px rgba(0,0,0,.12);width:40px;height:40px;border-radius:50%;
  cursor:pointer;font-size:1.5rem;line-height:1;padding:0;display:grid;place-items:center;z-index:2;
}
.carousel-btn:focus-visible{outline:2px solid #555;outline-offset:2px}
.carousel-btn.prev{left:-46px}.carousel-btn.next{right:-46px}
.carousel-dots{display:flex;gap:.5rem;justify-content:center;margin-top:.75rem}
.carousel-dots button{width:10px;height:10px;border-radius:50%;border:none;background:#c8c8c8;cursor:pointer}
.carousel-dots button[aria-current="true"]{background:#333}
@media (min-width:700px){.carousel{--spv:2}}
@media (min-width:1024px){.carousel{--spv:3}}

/* ---------- Forms / Contact ---------- */
input, textarea{
  width:100%;padding:.7rem .8rem;border-radius:10px;border:1px solid var(--border);
  background:var(--surface);color:var(--text)
}
label{display:block;margin:.75rem 0 .25rem}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media (max-width:720px){.form-row{grid-template-columns:1fr}}

/* ---------- Footer ---------- */
.site-footer{margin-top:2rem;border-top:1px solid var(--border);background:var(--surface)}
.site-footer .social a{margin-left:1rem}
.foot-creds{font-size:.9rem;color:var(--muted);margin:.25rem 0 .5rem}

/* === Featured (capstone) styling — subtle, not flashy === */
.badge {
  display:inline-block;
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.04em;
  padding:.18rem .5rem;
  border-radius:999px;
  background: color-mix(in oklab, var(--brand) 20%, white 80%);
  color:#174a2d;
  border:1px solid var(--border);
}

.card.featured,
.featured-block {
  background: linear-gradient(180deg, var(--card), color-mix(in oklab, var(--card) 90%, white 10%));
  border: 1.5px solid color-mix(in oklab, var(--brand) 45%, var(--border) 55%);
  box-shadow: 0 10px 28px rgba(0,0,0,.10);
}

.card.featured:hover { transform: translateY(-3px); box-shadow: 0 14px 38px rgba(0,0,0,.14); }

.badge-capstone { margin-left:.5rem; background: color-mix(in oklab, var(--brand) 35%, white 65%); }

.featured-note {
  color: var(--muted);
  font-size: .9rem;
  margin-top: .25rem;
}

.proj-wrap.smartstep {
  max-width: 900px;
  margin: 0 auto;
  line-height: 1.6;
}

.proj-header {
  text-align: center;
  margin-bottom: 1.5rem;
}

.subtitle {
  color: #567b67;
  font-size: 1rem;
  font-style: italic;
}

.section-title {
  margin-top: 2.5rem;
  border-left: 5px solid #9bc9a3;
  padding-left: 0.6rem;
  color: #284a35;
}

.divider {
  border: none;
  height: 1px;
  background: #d2e4d6;
  margin: 2rem 0;
}

.keylist li,
.numbered li {
  margin-bottom: 0.4rem;
}

.keylist strong {
  color: #305a3e;
}

details {
  margin: 1rem 0;
  background: #f8fbf9;
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  border: 1px solid #d5e6d9;
}

details summary {
  cursor: pointer;
  font-weight: 600;
  color: #2d563c;
}

details[open] {
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.results {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
}

.results th, .results td {
  border: 1px solid #d5e6d9;
  padding: 0.4rem 0.6rem;
  text-align: left;
}

.results th {
  background: #e8f3ec;
}

.process {
  color: #2e7d51;
  font-weight: 500;
}

/* === Main page full-screen hero fix === */
.hero.container.main {
  display: flex;
  flex-direction: column;
  justify-content: center; /* centers text vertically */
  align-items: center;     /* centers text horizontally */
  min-height: 100vh;       /* full viewport height */
  text-align: center;
  background: transparent; /* keeps your video visible */
  position: relative;
  z-index: 2;              /* make sure it's above video */
  box-shadow: none;
  border-radius: 0;
  padding: 0;
}


/* Keep video behind everything */
#bg-video {
  position: fixed;
  top: 0;
  left: 0;
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
  z-index: 1;
}