/* ═══════════════════════════════════════════════════════════
   SATHISH S — Portfolio  |  style.css
   Breakpoints: 1440px (desktop), 768px (tablet), 375px (mobile)
   ═══════════════════════════════════════════════════════════ */

/* ─── Reset ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; background: #c1121f; } /* red shows on top overscroll */
body {
  font-family: 'Urbanist', sans-serif;
  background: #f3dcad; /* tan shows on bottom overscroll */
  color: #362e1b;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

/* ─── Colours ────────────────────────────────────────────── */
:root {
  --red:      #c1121f;
  --red-dark: #b51628;
  --cream:    #ffe6b2;
  --cream-bg: #fff5e7;
  --tan:      #f3dcad;
  --white:    #ffffff;
  --dark:     #362e1b;
  --muted:    #655a45;
  --light-red:#ffefee;
}

/* ─── Page layout ────────────────────────────────────────── */
/* Every section has 80px left/right gutter on desktop */
.section-hero,
.section-about-experience,
.section-projects,
.section-gallery,
.section-blog,
.section-testimonials,
.section-contact,
.footer {
  width: 100%;
}

/* ══════════════════════════════════════════════════════════
   NAVBAR
   ══════════════════════════════════════════════════════════ */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  padding: 20px 80px;
  max-width: 1440px;
  margin: 0 auto;
  transition: transform .42s cubic-bezier(.16,1,.3,1);
  will-change: transform;
}
/* Auto-hide: slides up out of view; revealed on scroll-up or top-edge hover (JS). */
.navbar.nav-hidden { transform: translateY(-140%); }
/* Once scrolled off the hero, lift the pill so it reads over light sections. */
.navbar.is-stuck .navbar-inner { box-shadow: 0 10px 30px rgba(0,0,0,.22); }
/* Anchor jumps land below the fixed header, not under it. */
section[id] { scroll-margin-top: 96px; }
@media (max-width: 767px) { section[id] { scroll-margin-top: 68px; } }

/* Semantic landmark — no visual impact */
main { display: block; margin: 0; padding: 0; }

/* Skip-to-content link (keyboard accessibility) */
.skip-to-main {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.skip-to-main:focus {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  height: auto;
  padding: 12px 24px;
  background: #362e1b;
  color: #f3dcad;
  border-radius: 8px;
  font-size: 16px;
  text-decoration: none;
  white-space: nowrap;
}
.navbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--red);
  border-radius: 12px;
  padding: 10px 24px;
}
.logo {
  background: var(--cream);
  color: var(--red);
  font-family: 'ZCOOL KuaiLe', sans-serif;
  font-size: 26px;
  letter-spacing: 2px;
  border-radius: 8px;
  padding: 6px 12px;
  line-height: 1.5;
  flex-shrink: 0;
  text-decoration: none;
}
.nav-links {
  display: flex;
  gap: 48px;
}
.nav-links a {
  font-size: 24px;
  font-weight: 400;
  color: var(--cream);
}
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 12px; /* Fitts's Law: was 4px, expanded tap area to ~50px */
}
.hamburger span {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--cream);
  border-radius: 2px;
  transition: transform 0.3s, opacity 0.3s;
}

/* ══════════════════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════════════════ */
/* ── HERO: ONE fluid system for the WHOLE range (320–2301px) ──
   Same layout at every width (centred avatar, name behind, button-left,
   follow-right). Every value is clamp(min, calc(A·vw + B), max) tuned to
   pass through the approved mobile/tablet/desktop looks, so the avatar &
   type scale gradually with the window — no system-swap, no size jump.   */
.section-hero {
  position: relative;
  background: var(--red);
  height: clamp(380px, calc(42.07vw + 214px), 820px);
  min-height: 380px;
  overflow: hidden;
}
.hero-content {
  position: relative;
  z-index: 2;          /* paint above about-card's z-index:1 so avatar stands on card */
  width: 100%;
  height: 100%;
  max-width: 1440px;
  margin: 0 auto;
}

/* Avatar centred (slight right bias). */
.hero-avatar {
  position: absolute;
  left: 50%;
  transform: translateX(calc(-50% + clamp(0px, 12.3vw - 31.5px, 40px)));
  top: 78px;
  bottom: auto;
  width: auto;
  height: clamp(302px, calc(42.07vw + 136px), 742px);
  max-height: none;
  object-fit: contain;
  object-position: bottom center;
  pointer-events: none;
  z-index: 4;
}

/* Main content: headline near top, button pinned to the BOTTOM so it lines
   up with the Follow-me block (both share the same bottom anchor). z-index 3. */
.hero-main {
  position: absolute;
  /* Headline sits below the navbar, lower on wider/web views (matches design). */
  top: clamp(135px, calc(6.2vw + 86px), 200px);
  /* Button/follow sit at the avatar's waist on mobile/tablet (~55px@mobile,
     ~118px@tablet); the cap (130px) keeps the row low enough on desktop that
     the tall "Follow me" label clears the huge SATHISH S headline. */
  bottom: clamp(55px, calc(19.3vw - 30px), 130px);
  left: 0;
  right: 0;
  z-index: 3;
  padding-left: clamp(18px, calc(21.9vw - 68px), 115px);
  padding-right: clamp(14px, calc(24.6vw - 224px), 130px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Text block — Welcome above SATHISH S, both in flow */
.hero-name-block {
  color: var(--cream);
  pointer-events: none;
  user-select: none;
}
.hero-sub {
  font-family: 'Oswald', sans-serif;
  font-size: clamp(14px, calc(1.87vw + 7.6px), 40px);
  font-weight: 400;
  white-space: nowrap;
  line-height: 1.4;
  letter-spacing: clamp(2px, 0.5vw, 4px);
  text-transform: uppercase;
}
.hero-name {
  font-family: 'Oswald', sans-serif;
  font-size: clamp(60px, 19.4vw, 280px);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  color: var(--cream);
}

/* Resume button — left, below the name */
.hero-resume-col {
  display: flex;
  align-items: flex-start;
}
.btn-resume {
  display: flex;
  align-items: center;
  gap: clamp(3px, 0.8vw, 10px);
  border: 1px solid var(--cream);
  border-radius: 60px;
  height: clamp(30px, calc(2.67vw + 19.5px), 56px);
  padding: 0 clamp(10px, 2.6vw, 40px);
  color: var(--cream);
  font-size: clamp(9px, calc(1vw + 5px), 20px);
  letter-spacing: -0.3px;
  white-space: nowrap;
  text-decoration: none;
}
.btn-resume img {
  width: clamp(12px, calc(1.87vw + 4.6px), 28px);
  height: clamp(12px, calc(1.87vw + 4.6px), 28px);
}

/* Follow me — absolute, scales toward the lower-right as the hero grows.
   z-index 5 (always above the avatar). */
.hero-follow {
  position: absolute;
  /* Anchored to the SAME bottom line as the button so the social icons and
     the Download Resume button always sit on one row at every width. */
  top: auto;
  bottom: clamp(55px, calc(19.3vw - 30px), 130px);
  right: clamp(16px, calc(19.25vw - 37.8px), 90px);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.follow-label {
  font-family: 'Oswald', sans-serif;
  font-size: clamp(18px, calc(2.14vw + 9.6px), 48px);
  color: var(--cream);
  line-height: normal;
  margin-bottom: clamp(6px, 1vw, 8px);
}
.social-icons {
  display: flex;
  gap: clamp(6px, 1vw, 14px);
}
.social-icons img {
  width: clamp(18px, calc(2.14vw + 9.6px), 50px);
  height: clamp(18px, calc(2.14vw + 9.6px), 50px);
}
/* Fitts's Law: expand social icon tap areas to 44px without changing icon size */
.social-icons a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}

/* ══════════════════════════════════════════════════════════
   ABOUT & EXPERIENCE
   ══════════════════════════════════════════════════════════ */
.section-about-experience {
  background: var(--red);
  padding: 0 80px 0;
  position: relative;
  min-height: 1460px;
}

/* About me white card */
.about-card {
  position: absolute;
  top: 0;
  left: 268px;  /* 188px + 80px section padding */
  right: 196px;
  background: var(--white);
  border-radius: 32px;
  padding: 118px 60px;
  overflow: hidden;
}
.about-label {
  font-size: 16px;
  font-weight: 700;
  color: var(--red-dark);
  letter-spacing: 1.6px;
  line-height: 24px;
  margin-bottom: 8px;
}
.about-heading {
  font-family: 'Urbanist', sans-serif;
  font-size: clamp(56px, 6.7vw, 96px);
  font-weight: 900;
  color: var(--dark);
  letter-spacing: -4.8px;
  line-height: 1;
  margin-bottom: 35px;
}
.about-profile {
  display: flex;
  align-items: center;
  gap: 21px;
  margin-bottom: 35px;
  width: 422px;
  max-width: 100%;
}
.profile-photo-wrap {
  width: 95px;
  height: 106px;
  border-radius: 77px;
  overflow: hidden;
  flex-shrink: 0;
}
.profile-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.profile-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.profile-name {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 1.68px;
  color: #262626;
}
.profile-title {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 1.12px;
  color: #262626;
}
.about-bio {
  font-size: 20px;
  font-weight: 400;
  color: #262626;
  letter-spacing: 1.4px;
  line-height: 1.47;
}

/* Experience red card */
.experience-card {
  position: absolute;
  top: 870px;
  left: 291px;
  right: 247px;
  background: var(--red);
  border-bottom: 2px solid var(--cream);
  border-radius: 24px;
  padding: 32px 60px;
  overflow: hidden;
  touch-action: pan-y; /* let browser scroll vertically; JS handles horizontal swipe */
}
.exp-inner {
  display: flex;
  flex-direction: column;
  gap: 61px;
}
.exp-heading {
  font-family: 'Urbanist', sans-serif;
  font-size: clamp(36px, 3.75vw, 54px);
  font-weight: 900;
  color: var(--cream);
  text-transform: uppercase;
  line-height: 1;
}
/* Path & Practice carousel — entries cross-fade in place (auto-rotates via JS) */
.exp-entries { position: relative; }
.exp-entry {
  display: flex; flex-direction: column; gap: 12px;
  position: absolute; top: 0; left: 0; right: 0;
  opacity: 0; transform: translateY(14px);
  transition: opacity .6s ease, transform .7s cubic-bezier(.16,1,.3,1);
  pointer-events: none;
}
.exp-entry.active { opacity: 1; transform: none; pointer-events: auto; }
.experience-card .dot { cursor: pointer; transition: width .3s ease, background .3s ease; }
.exp-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--cream);
}
.exp-role { font-size: 24px; font-weight: 600; }
.exp-date { font-size: 16px; font-weight: 400; }
.exp-company { font-size: 20px; font-weight: 300; color: var(--cream); letter-spacing: 1.4px; }
.exp-desc { font-size: 20px; font-weight: 400; color: var(--cream); letter-spacing: 1.4px; line-height: 1.47; }
.dots {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
}
.dot {
  width: 15px; height: 15px;
  border-radius: 20px;
  background: #e4e7ec;
  flex-shrink: 0;
}
.dot-active {
  width: 60px;
  background: var(--cream);
}

/* ══════════════════════════════════════════════════════════
   PROJECTS
   ══════════════════════════════════════════════════════════ */
.section-projects {
  background: var(--red);
  padding: 0 80px;
}
.projects-inner {
  background: var(--cream);
  border-radius: 32px;
  padding: 128px 60px;
  display: flex;
  flex-direction: column;
  gap: 80px;
}
.section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}
.section-header-left { flex: 1; }
.eyebrow {
  font-size: 16px;
  font-weight: 700;
  color: var(--red-dark);
  letter-spacing: 1.6px;
  line-height: 24px;
  margin-bottom: 8px;
}
.section-title {
  font-family: 'Urbanist', sans-serif;
  font-size: clamp(56px, 6.7vw, 96px);
  font-weight: 900;
  color: var(--dark);
  letter-spacing: -4.8px;
  line-height: 1;
}
.section-header-right {
  flex: 1;
  max-width: 448px;
  font-size: 20px;
  color: var(--muted);
  line-height: 28px;
}

/* Projects grid — 12-column */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 704px 704px;
  gap: 48px;
}
.proj-card { display: flex; flex-direction: column; gap: 32px; }
.proj-large {
  grid-column: span 8;
}
.proj-small {
  grid-column: span 4;
}
/* Row 1 positioning */
.proj-card:nth-child(1) { grid-column: 1 / span 8; grid-row: 1; align-self: start; }
.proj-card:nth-child(2) { grid-column: 9 / span 4; grid-row: 1; align-self: start; padding-top: 96px; }
.proj-card:nth-child(3) { grid-column: 1 / span 4; grid-row: 2; align-self: start; }
.proj-card:nth-child(4) { grid-column: 5 / span 8; grid-row: 2; align-self: start; }

.proj-img-wrap {
  border-radius: 16px;
  overflow: hidden;
  flex: 1;
  min-height: 400px;
  position: relative;
}
.proj-card:nth-child(1) .proj-img-wrap { height: 600px; flex: none; }
.proj-card:nth-child(4) .proj-img-wrap { height: 600px; flex: none; }
/* Absolutely fill the box, with a little vertical overflow so the image can
   parallax (slide) within the frame on scroll (set via JS). */
.proj-img { position: absolute; left: 0; right: 0; top: -12%; width: 100%; height: 124%; object-fit: cover; }
.proj-dark  { background: #060709; }
.proj-warm  { background: #f7e6c6; }
.proj-dark-gray { background: #3f4348; }
.proj-meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.proj-name {
  font-size: 36px;
  font-weight: 900;
  color: var(--dark);
  line-height: 40px;
}
.proj-card:nth-child(2) .proj-name,
.proj-card:nth-child(3) .proj-name { font-size: 30px; line-height: 36px; }
.proj-type {
  font-size: 16px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 1.6px;
  line-height: 24px;
  margin-top: 7.5px;
}
.proj-num {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: #b9ac92;
  line-height: 32px;
}
/* Desktop bento: only the large cards (01, 04) are numbered. The 02/03 on the
   small cards show in the tablet/mobile equal grid (see ≤991 rule). */
.proj-small .proj-num { display: none; }

/* ══════════════════════════════════════════════════════════
   GALLERY
   ══════════════════════════════════════════════════════════ */
.section-gallery {
  background: var(--red);
  padding: 0 80px;
}
.gallery-inner {
  background: var(--red-dark);
  border-radius: 32px;
  padding: 128px 84px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 64px;
}
.gallery-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.gallery-title {
  font-family: 'Urbanist', sans-serif;
  font-size: clamp(40px, 5vw, 72px);
  font-weight: 900;
  color: #ffefee;
  letter-spacing: -1.8px;
  line-height: 1;
}
.gallery-eyebrow {
  font-size: 16px;
  font-weight: 700;
  color: var(--white);
  letter-spacing: 8px;
  text-transform: uppercase;
}
.gallery-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;          /* vertical gap between the two rows */
  height: 758px;
}
.gallery-row {
  display: flex;
  flex: 1;
  gap: 16px;          /* horizontal gap between images (was 0 — the missing gap) */
  min-height: 0;      /* lets both rows shrink to equal height (images crop via cover) */
}
.gallery-img-wrap {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  border-radius: 12px;
  position: relative;
}
.gallery-img-wrap img {
  position: absolute;
  left: 0; right: 0; top: -12%;
  width: 100%;
  height: 124%;        /* vertical overflow for scroll parallax */
  object-fit: cover;
}
.gallery-img-wrap { cursor: zoom-in; }

/* ── Lightbox (gallery image preview) ───────────────────────── */
/* Full-viewport layer just dims the page and centres the panel + catches
   outside clicks; the visible popup is the fixed-size .lb-panel. */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 14, 6, 0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}
.lightbox.open { opacity: 1; visibility: visible; }

/* The popup itself — sized to the gallery image area, never bigger than the
   viewport. Desktop/laptop default; tablet & phone overrides below. */
.lb-panel {
  position: relative;
  width: 1112px;
  height: 758px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 32px);
  background: rgba(20, 14, 6, 0.96);
  border-radius: 16px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
  overflow: hidden;
  transform: scale(.96);
  transition: transform .3s cubic-bezier(.16,1,.3,1);
}
.lightbox.open .lb-panel { transform: scale(1); }
.lb-stage {
  margin: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}
.lb-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
}
.lb-count {
  position: absolute;
  bottom: 14px;
  left: 0; right: 0;
  text-align: center;
  font-family: 'Urbanist', sans-serif;
  font-size: 14px;
  letter-spacing: 2px;
  color: var(--cream);
  opacity: .8;
  pointer-events: none;
}
.lb-close, .lb-nav {
  position: absolute;
  border: none;
  background: rgba(255,255,255,0.12);
  color: var(--cream);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background .2s ease, transform .2s ease;
  z-index: 1;
}
.lb-close { top: 14px; right: 14px; width: 42px; height: 42px; font-size: 26px; line-height: 1; background: rgba(20,14,6,0.75); color: #fff; border: 1.5px solid rgba(255,255,255,0.35); }
.lb-nav { top: 50%; transform: translateY(-50%); width: 46px; height: 46px; font-size: 28px; line-height: 1; }
.lb-prev { left: 14px; }
.lb-next { right: 14px; }
@media (hover: hover) and (pointer: fine) {
  .lb-close:hover { background: rgba(20,14,6,0.92); transform: scale(1.08); }
  .lb-nav:hover { background: rgba(255,255,255,0.24); transform: translateY(-50%) scale(1.08); }
}
.lb-close:active { transform: scale(.94); }
.lb-nav:active { transform: translateY(-50%) scale(.94); }

/* Tablet */
@media (max-width: 991px) {
  .lb-panel { width: 704px; height: 455px; }
}
/* Phone */
@media (max-width: 767px) {
  .lb-panel { width: 329px; height: 217px; }
  .lb-stage { padding: 10px; }
  .lb-close { width: 34px; height: 34px; font-size: 22px; top: 8px; right: 8px; }
  .lb-nav { width: 36px; height: 36px; font-size: 22px; }
  .lb-prev { left: 8px; } .lb-next { right: 8px; }
  .lb-count { bottom: 8px; font-size: 12px; }
}

/* ══════════════════════════════════════════════════════════
   BLOG
   ══════════════════════════════════════════════════════════ */
.section-blog {
  background: var(--red);
  padding: 0 80px;
}
.blog-inner {
  background: var(--cream-bg);
  border-radius: 32px;
  padding: 128px 60px;
  display: flex;
  gap: 64px;
  align-items: flex-start;
}
.blog-sidebar {
  width: 344px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.blog-title {
  font-family: 'Urbanist', sans-serif;
  font-size: clamp(36px, 3.33vw, 48px);
  font-weight: 900;
  color: var(--dark);
  line-height: 1;
}
.blog-desc {
  font-size: 16px;
  color: var(--muted);
  line-height: 24px;
}
.blog-see-all {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 700;
  color: var(--red-dark);
}
.blog-list {
  flex: 1;
  border-top: 1px solid rgba(185,172,146,0.2);
}
.blog-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 48px 16px;
  border-bottom: 1px solid rgba(185,172,146,0.2);
  gap: 24px;
}
.blog-item-left { display: flex; flex-direction: column; gap: 8px; }
.blog-date {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  line-height: 16px;
}
.blog-item-title {
  font-size: 30px;
  font-weight: 700;
  color: var(--dark);
  line-height: 36px;
}
.blog-arrow { flex-shrink: 0; }

/* ══════════════════════════════════════════════════════════
   TESTIMONIALS
   ══════════════════════════════════════════════════════════ */
.section-testimonials {
  background: var(--red);
  padding: 0 80px;
}
.testimonials-inner {
  padding: 64px 32px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.testimonials-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}
.testimonials-header-left { display: flex; flex-direction: column; gap: 8px; }
.eyebrow-light {
  font-size: 16px;
  font-weight: 700;
  color: rgba(255,230,178,0.75);
  letter-spacing: 1.6px;
}
.testimonials-title {
  font-family: 'Urbanist', sans-serif;
  font-size: clamp(48px, 6.7vw, 96px);
  font-weight: 900;
  color: var(--white);
  letter-spacing: -4.8px;
  line-height: 1;
  text-transform: capitalize;
}
.testimonials-header-right {
  max-width: 448px;
  font-size: 20px;
  color: var(--white);
  line-height: 28px;
}

/* Main row: featured + side */
.testimonials-main-row {
  display: flex;
  gap: 32px;
  height: 506px;
  align-items: flex-start;
  padding-top: 24px;
  overflow: visible;
}
.test-card {
  background: rgba(255,255,255,0.8);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(199,196,215,0.3);
  border-radius: 32px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.03);
  padding: 65px;
  position: relative;
  color: inherit;
  text-decoration: none;
}
.test-featured {
  width: 696px;
  height: 100%;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.test-side-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 32px;
  height: 100%;
}
.test-small {
  flex: 1 1 0;        /* equal heights — both fill the column to match the featured card */
  min-height: 0;
  padding: 36px;
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}
.test-quote-large {
  font-size: 32px;
  font-weight: 600;
  font-style: italic;
  color: #0d1c2d;
  letter-spacing: -0.32px;
  line-height: 44px;
  quotes: none;
}
.test-quote-small {
  font-size: 16px;
  font-weight: 400;
  font-style: italic;
  color: #464554;
  line-height: 24px;
  quotes: none;
}
.test-person {
  display: flex;
  align-items: center;
  gap: 24px;
}
.test-person-top { gap: 16px; }
.test-name {
  font-size: 24px;
  font-weight: 600;
  color: #0d1c2d;
  line-height: 32px;
}
.test-name-sm {
  font-size: 14px;
  font-weight: 600;
  color: #0d1c2d;
  letter-spacing: 0.28px;
  line-height: 20px;
}
.test-role { font-size: 14px; font-weight: 600; color: #5c5f61; letter-spacing: 0.28px; line-height: 20px; }
.test-role-sm { font-size: 12px; font-weight: 400; color: #5c5f61; line-height: 16px; }
.verified-badge {
  position: absolute;
  top: 24px;
  right: 24px;
  display: flex;
  align-items: center;
  gap: 4px;
  background: #f0fdf4;
  border-radius: 9999px;
  padding: 4px 12px;
  font-size: 10px;
  font-weight: 700;
  color: #15803d;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.verified-badge .vb-in { flex-shrink: 0; }
/* Lower cards lead with the quote (text starts at the top edge), so nudge it
   down to clear the top-right badge. Featured/small cards already have the
   badge sitting in their top padding, above the content. */
.test-lower .test-quote-small { padding-top: 22px; }

/* Lower row */
.testimonials-lower-row {
  display: flex;
  gap: 32px;
}
/* Carousel is tablet/mobile only — hidden on desktop */
.test-carousel,
.test-dots { display: none; }
.test-lower {
  flex: 1;
  padding: 25px;
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-height: 210px;
}
.test-avatar-initials {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════
   CONTACT
   ══════════════════════════════════════════════════════════ */
.section-contact {
  background: var(--cream);
  padding: 128px 60px;
  position: relative;
  overflow: hidden;
}
.contact-bg-text {
  position: absolute;
  top: 0; right: 48px;
  font-family: 'Epilogue', sans-serif;
  font-size: 320px;
  font-weight: 900;
  color: var(--dark);
  opacity: 0.05;
  line-height: 1;
  pointer-events: none;
  white-space: nowrap;
  user-select: none;
}
.contact-inner {
  display: flex;
  gap: 80px;
  align-items: flex-start;
  position: relative;
  z-index: 1;
}
.contact-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding-bottom: 87px;
}
.contact-title {
  font-family: 'Urbanist', sans-serif;
  font-size: clamp(56px, 6.7vw, 96px);
  font-weight: 900;
  color: var(--red-dark);
  letter-spacing: -4.8px;
  line-height: 1;
}
.contact-desc {
  font-size: 24px;
  color: var(--muted);
  line-height: 1.625;
}
.contact-links { display: flex; flex-direction: column; gap: 24px; }
.contact-email {
  font-family: 'Epilogue', sans-serif;
  font-size: 30px;
  font-weight: 700;
  color: var(--dark);
}
.contact-social {
  display: flex;
  gap: 32px;
  padding-top: 16px;
}
.contact-social-link {
  font-size: 18px;
  font-weight: 700;
  color: var(--dark);
  letter-spacing: 1.8px;
  text-transform: uppercase;
}
.contact-right {
  flex: 1;
}
.contact-form {
  background: var(--cream-bg);
  border-radius: 16px;
  padding: 48px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  box-shadow: 0 20px 25px rgba(54,46,27,0.08);
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.form-group label {
  font-family: 'Urbanist', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  line-height: 16px;
}
.form-group input,
.form-group textarea {
  background: var(--white);
  border: none;
  border-radius: 6px;
  padding: 17px 16px;
  font-family: 'Urbanist', sans-serif;
  font-size: 16px;
  color: #6b7280;
  outline: none;
  width: 100%;
  resize: vertical;
}
.form-group textarea { padding-top: 16px; min-height: 120px; }
.form-submit {
  background: var(--red-dark);
  color: var(--light-red);
  border: none;
  border-radius: 8px;
  padding: 24px;
  font-family: 'Urbanist', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  cursor: pointer;
  width: 100%;
  box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);
}

/* ══════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════ */
.footer {
  background: var(--tan);
  padding: 45px 71px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 20px;
  font-weight: 500;
  color: var(--red);
  letter-spacing: -0.3px;
  flex-wrap: wrap;
  gap: 16px;
}

/* ══════════════════════════════════════════════════════════
   SECTION SPACING (gaps between sections on red bg)
   ══════════════════════════════════════════════════════════ */
.section-about-experience { padding-bottom: 0; }
.section-projects    { padding-top: 80px; padding-bottom: 80px; }
.section-gallery     { padding-top: 80px; padding-bottom: 80px; }
.section-blog        { padding-top: 80px; padding-bottom: 80px; }
.section-testimonials{ padding-top: 80px; padding-bottom: 80px; }

/* ══════════════════════════════════════════════════════════
   TESTIMONIALS — swipe carousel for everything below 1440px
   The desktop bento (fixed 696px featured + side column) only fits at its
   1440 design width; below that the side cards overflow. So show the single-
   card swipe carousel for ≤1439px and the bento only at ≥1440px.
   ══════════════════════════════════════════════════════════ */
@media (max-width: 1439px) {
  .testimonials-main-row,
  .testimonials-lower-row { display: none; }

  .test-carousel {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-behavior: smooth;
    margin-top: 24px;
    gap: 16px;
    padding: 0 4px; /* small side padding so shadows aren't clipped */
    scroll-padding-inline: 4px;
  }
  .test-carousel::-webkit-scrollbar { display: none; }
  .test-slide {
    flex: 0 0 calc(100% - 8px); /* account for side padding so slide fills the view */
    scroll-snap-align: start;
    background: var(--light-red);
    border-radius: 24px;
    padding: clamp(28px, 4vw, 56px);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 20px;
    min-height: 220px;
  }
  /* normalise the cloned card variants into one consistent slide look */
  /* Keep the verified badge visible in the carousel (matches the Figma design). */
  .test-slide .verified-badge { display: flex; top: 20px; right: 20px; }
  /* Reserve space so the centred quote never sits under the top-right badge. */
  .test-slide { padding-top: clamp(48px, 7vw, 72px); }
  .test-slide .test-quote-large,
  .test-slide .test-quote-small {
    font-size: clamp(17px, 1.6vw, 22px);
    line-height: 1.6;
    font-style: italic;
    color: var(--dark);
    order: 0;
  }
  .test-slide .test-person { margin-top: auto; }

  /* Dots match the site's design-system pagination (same as Path & Practice):
     15px #e4e7ec inactive, 60px cream pill active, 10px gap. */
  .test-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 24px;
  }
  .test-dot {
    width: 15px; height: 15px;
    border-radius: 20px;
    border: none;
    background: #e4e7ec;
    padding: 0;
    flex-shrink: 0;
    cursor: pointer;
    transition: width 0.3s ease, background 0.3s ease;
  }
  .test-dot.active { width: 60px; background: var(--cream); }
}

/* ══════════════════════════════════════════════════════════
   TABLET — 768px to 991px  (Figma node 59-2, 768px frame)
   Block spans ≤991px; the mobile block (≤767px) overrides within it.
   ══════════════════════════════════════════════════════════ */
@media (max-width: 991px) {

  /* ── Navbar ── */
  .navbar { padding: 16px 20px; }
  .navbar-inner { padding: 10px 16px; position: relative; }
  .nav-links {
    display: none;
    flex-direction: column;
    gap: 24px;
    position: absolute;
    top: calc(100% + 8px);
    left: 0; right: 0;
    background: var(--red);
    border-radius: 12px;
    padding: 24px;
    z-index: 200;
  }
  .nav-links.open { display: flex; }
  .nav-links a { font-size: 20px; }
  .hamburger { display: flex; }

  /* Hero is now ONE fluid system in the base rules (applies to all widths),
     so there are no per-breakpoint hero overrides here — that's what makes
     the avatar & type scale continuously with the window (no 992 jump). */

  /* ── About & Experience ── */
  .section-about-experience {
    padding: 0 20px 24px;
    position: static;
    display: block;            /* block flow so margin-top controls the overlap */
    min-height: unset;
  }
  .about-card {
    position: relative;
    z-index: 1;
    left: auto; right: auto; top: auto;
    margin: 0;
    border-radius: 20px;
    padding: 40px 24px 72px;
  }
  /* Path & Practice: red rounded card pulled up to overlap the white card (like desktop) */
  .experience-card {
    position: relative;
    z-index: 2;
    left: auto; right: auto; top: auto;
    margin: -48px 0 0;          /* overlap the bottom of the about card */
    background: var(--red);
    border: none;
    border-bottom: 2px solid var(--cream);
    border-radius: 24px;
    padding: 32px 24px;
    overflow: hidden;
  }
  .exp-inner { gap: 32px; }
  .about-heading { font-size: clamp(48px, calc(2.35vw + 42.7px), 66px); letter-spacing: -2px; }
  .exp-heading { font-size: clamp(32px, calc(0.54vw + 31.9px), 37px); }
  .about-profile { width: 100%; }
  .profile-photo-wrap { width: 68px; height: 77px; }

  /* ── Projects — 2×2 equal grid ── */
  .section-projects { padding: 24px 20px; }
  .projects-inner { padding: 40px 24px; gap: 32px; }
  .section-title { font-size: clamp(44px, calc(3.02vw + 36.1px), 66px); letter-spacing: -2px; }
  .section-header { flex-direction: column; gap: 16px; align-items: flex-start; }
  .section-header-right { max-width: 100%; font-size: 16px; }
  .projects-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    gap: 16px;
  }
  .proj-card:nth-child(1) { grid-column: span 1; grid-row: auto; }
  .proj-card:nth-child(2) { grid-column: span 1; grid-row: auto; padding-top: 0; }
  .proj-card:nth-child(3) { grid-column: span 1; grid-row: auto; }
  .proj-card:nth-child(4) { grid-column: span 1; grid-row: auto; }
  .proj-card:nth-child(1) .proj-img-wrap,
  .proj-card:nth-child(4) .proj-img-wrap { height: 208px; flex: none; }
  .proj-img-wrap { min-height: 180px; }
  .proj-name { font-size: 18px; line-height: 1.2; }
  .proj-card:nth-child(2) .proj-name,
  .proj-card:nth-child(3) .proj-name { font-size: 18px; line-height: 1.2; }
  .proj-num,
  .proj-small .proj-num { display: block; }

  /* ── Gallery — clean 3×2 equal grid (Figma: 3col × 223px rows, 17px gap) ── */
  .section-gallery { padding: 24px 20px; }
  .gallery-inner { padding: 40px 24px; gap: 24px; }
  .gallery-header { flex-direction: column; align-items: flex-start; gap: 4px; }
  .gallery-eyebrow { font-size: 13px; letter-spacing: 6px; order: -1; }
  .gallery-title { font-size: clamp(32px, calc(2.61vw + 23.7px), 50px); letter-spacing: -1px; }
  .gallery-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 200px 200px;
    gap: 17px;
    height: auto;
  }
  .gallery-row { display: contents; }
  /* All 6 images equal — undo any desktop spanning */
  .gallery-row:first-child .gallery-img-wrap:first-child { grid-column: auto; grid-row: auto; }
  .gallery-row:last-child .gallery-img-wrap:last-child { display: block; }

  /* ── Blog ── */
  .section-blog { padding: 24px 20px; }
  .blog-inner { flex-direction: column; padding: 40px 24px; gap: 32px; }
  .blog-sidebar { width: 100%; }
  .blog-title { font-size: clamp(36px, calc(42.64px - 0.67vw), 40px); }
  .blog-item { padding: 24px 8px; }
  .blog-item-title { font-size: 18px; line-height: 1.4; }

  /* ── Testimonials — swipeable single-card carousel (matches Figma) ── */
  .section-testimonials { padding: 24px 20px; }
  .testimonials-inner { padding: 32px 20px; gap: 32px; }
  .testimonials-title { font-size: clamp(42px, calc(3.69vw + 29.5px), 66px); letter-spacing: -2px; }
  .testimonials-header { flex-direction: column; gap: 12px; align-items: flex-start; }
  .testimonials-header-right { font-size: 15px; max-width: 100%; }

  /* Testimonials carousel switch + styling now lives in the ≤1439px block
     below (the bento only fits at its 1440 design width). */

  /* ── Contact ── */
  .section-contact { padding: 40px 20px; }
  .contact-inner { flex-direction: column; align-items: stretch; gap: 32px; }
  .contact-left { padding-bottom: 0; width: 100%; }
  .contact-right { width: 100%; }
  .contact-title { font-size: clamp(54px, calc(1.68vw + 49.4px), 66px); letter-spacing: -2px; }
  .contact-desc { font-size: 16px; }
  .contact-email { font-size: 20px; }
  .contact-bg-text { font-size: 160px; }
  .form-row { grid-template-columns: 1fr; }
  /* Figma tablet: the three social links spread across the full width */
  .contact-social { justify-content: space-between; }

  /* ── Footer ── */
  .footer { padding: 32px 24px; font-size: 14px; }
}

/* ══════════════════════════════════════════════════════════
   MOBILE — 320px to 767px  (Figma node 27-51, 394px frame)
   ══════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* ── Navbar ── */
  .navbar { padding: 12px 16px; }
  .navbar-inner { padding: 8px 12px; }
  .logo { font-size: 22px; padding: 5px 10px; }
  .nav-links a { font-size: 18px; }

  /* Hero is handled by the fluid ≤991 system above — it already scales
     down to 320px and passes through the approved 394px mobile look,
     so no fixed mobile overrides are needed here (avoids the 767/768 snap). */

  /* ── About + Path & Practice (layered overlap, smaller type) ── */
  .section-about-experience { padding: 0 16px 20px; }
  .about-card { padding: 32px 20px 64px; border-radius: 18px; }
  .about-profile { flex-direction: row; }
  .profile-name { font-size: 19px; letter-spacing: 0.8px; }
  .profile-title { font-size: 13px; }
  .about-bio { font-size: 16px; }
  .experience-card { margin-top: -44px; padding: 28px 20px; border-radius: 20px; }
  .exp-row { flex-direction: row; }
  .exp-role { font-size: 18px; }
  .exp-date { font-size: 13px; }
  .exp-company { font-size: 16px; }
  .exp-desc { font-size: 15px; }

  /* ── Projects — single column ── */
  .section-projects { padding: 16px; }
  .projects-inner { padding: 32px 20px; gap: 28px; }
  .projects-grid { grid-template-columns: 1fr; gap: 28px; }
  .proj-card:nth-child(1),
  .proj-card:nth-child(4) { grid-column: 1; }
  .proj-card .proj-img-wrap,
  .proj-card:nth-child(1) .proj-img-wrap,
  .proj-card:nth-child(4) .proj-img-wrap { height: 190px; min-height: 0; flex: none; }
  .proj-name { font-size: 20px; line-height: 1.2; }

  /* ── Gallery — 3×2 small grid ── */
  .section-gallery { padding: 16px; }
  .gallery-inner { padding: 32px 20px; gap: 24px; }
  .gallery-eyebrow { font-size: 11px; letter-spacing: 4px; }
  .gallery-grid { grid-template-rows: 100px 100px; gap: 10px; }

  /* ── Blog — stacked list, arrow stays on the right ── */
  .section-blog { padding: 16px; }
  .blog-inner { padding: 32px 20px; gap: 24px; }
  .blog-item {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 24px 4px;
  }
  .blog-item-title { font-size: 18px; line-height: 1.35; }
  .blog-arrow img { width: 26px; height: 26px; }

  /* ── Testimonials — carousel inherits ≤900 styles ── */
  .section-testimonials { padding: 16px; }
  .testimonials-inner { padding: 28px 18px; gap: 24px; }
  .test-slide { padding: 52px 20px 24px; }
  .test-slide .test-quote-large,
  .test-slide .test-quote-small { font-size: 16px; line-height: 25px; }

  /* ── Contact ── */
  .section-contact { padding: 32px 16px; }
  .contact-desc { font-size: 16px; }
  .contact-email { font-size: 22px; }
  .contact-social { gap: 18px; justify-content: flex-start; }
  .contact-social-link { font-size: 14px; letter-spacing: 1px; }
  .contact-form { padding: 24px 18px; }
  .contact-bg-text { font-size: 90px; }

  /* ── Footer — centred ── */
  .footer {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    font-size: 13px;
    padding: 24px 16px;
  }
}

/* ══════════════════════════════════════════════════════════
   TABLET-LANDSCAPE / LAPTOP — 992px to 1440px  (web design, fluid)
   The fixed-px absolute About/Experience layout only lines up at
   the 1440 design width; below it the About card grows taller and
   the Experience card (pinned at top:870px) would cover the bio.
   Use a fluid centred-overlap layout here instead, so the bio is
   never hidden at any laptop / small-desktop size.
   ══════════════════════════════════════════════════════════ */
@media (min-width: 992px) and (max-width: 1440px) {
  .section-about-experience {
    position: static;
    min-height: 0;
    padding: 0 40px 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .about-card {
    position: relative;
    z-index: 1;
    left: auto; right: auto; top: auto;
    width: 100%;
    max-width: 980px;
    margin-top: 0;
    padding: 80px 60px 130px;
  }
  .experience-card {
    position: relative;
    z-index: 2;
    left: auto; right: auto; top: auto;
    width: 100%;
    max-width: 900px;
    margin: -80px 0 0;          /* overlap the bottom of the About card */
    padding: 40px 60px;
  }
}


/* ══════════════════════════════════════════════════════════
   ULTRA-WIDE — ≥1441px
   Cap content at 1440px (matches navbar/hero & the 1440 Figma)
   so the absolute About/Experience overlap is preserved and the
   whole page stays consistent on large monitors.
   ══════════════════════════════════════════════════════════ */
@media (min-width: 1441px) {
  /* Section stays full-width so red fills edge-to-edge on ultra-wide screens.
     Cards shift inward using calc() to stay visually centred on 1440px. */
  .about-card {
    left:  calc((100% - 1440px) / 2 + 268px);
    right: calc((100% - 1440px) / 2 + 196px);
  }
  .experience-card {
    left:  calc((100% - 1440px) / 2 + 291px);
    right: calc((100% - 1440px) / 2 + 247px);
  }
  /* Inner content wrappers of full-bleed sections: cap & centre */
  .projects-inner,
  .gallery-inner,
  .blog-inner,
  .testimonials-inner,
  .contact-inner {
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ══════════════════════════════════════════════════════════
   ULTRA-NARROW PHONES — ≤378px
   At this width the avatar's torso is too wide to leave room for
   "Follow me" beside it. Drop the follow block to the bottom (the
   avatar's narrow legs level) and pull the button/follow to the
   edges, so they flank the thin legs with no overlap.
   ══════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  /* Fitts's Law min-width:44px inflates the icons row to 194px → avatar
     overlap. Reset to natural icon size. */
  .social-icons a { min-width: unset; min-height: unset; }

  /* The clamp bottom value (~55px) places Follow me at the avatar's CHEST
     level on mobile — overlap. Force bottom:26px so both the Download
     button and Follow me sit at the avatar's LEGS level where the figure
     is narrow and there is no visual overlap. */
  .hero-main   { bottom: 26px; }
  .hero-follow { bottom: 26px; right: 12px; }
}

@media (max-width: 378px) {
  /* On ultra-narrow phones keep button low and tight */
  .hero-main { padding-left: 12px; padding-right: 10px; bottom: 26px; }
  /* Raise button above avatar (z-index 4) and shrink it to fit narrow screen */
  .hero-resume-col { position: relative; z-index: 5; }
  .btn-resume {
    height: 26px;
    font-size: 8px;
    padding: 0 8px;
    gap: 4px;
    letter-spacing: 0;
  }
  .btn-resume img { width: 10px; height: 10px; }
}

/* ── 300–324px: icon-only download button ── */
@media (max-width: 324px) {
  /* Shift icon button away from the left edge, raise above avatar */
  .hero-resume-col { position: relative; z-index: 5; margin-left: 16px; }
  /* Hide text, keep only the download icon in a small circle */
  .btn-resume {
    font-size: 0;          /* hides "DOWNLOAD RESUME" text */
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50%;
    justify-content: center;
    gap: 0;
  }
  .btn-resume img { width: 16px; height: 16px; }
}

/* ══════════════════════════════════════════════════════════
   MOTION & POLISH  (progressive enhancement)
   Hero entrance · scroll-reveal · hover lifts · animated nav.
   All disabled under prefers-reduced-motion (see bottom).
   ══════════════════════════════════════════════════════════ */

/* --- Smooth interaction transitions --- */
.btn-resume, .form-submit, .proj-card, .gallery-img-wrap, .blog-item, .blog-arrow,
.social-icons a, .contact-social-link, .nav-links a, .blog-see-all,
.logo, .section-header-right, .test-dot, .test-card {
  transition: transform .4s cubic-bezier(.16,1,.3,1),
              box-shadow .4s ease, background-color .25s ease,
              color .25s ease, gap .3s ease;
}
/* `scale` (independent property) zooms the image without disturbing the
   parallax `transform` it carries on desktop. */
.proj-img-wrap img, .gallery-img-wrap img { transition: filter .4s ease, scale .5s cubic-bezier(.16,1,.3,1); }
.test-card { transition: scale .5s cubic-bezier(.16,1,.3,1), box-shadow .4s ease, background-color .25s ease, border-color .25s ease; }
.btn-resume img { transition: transform .3s ease; }
.blog-item-title { transition: color .25s ease; }

/* --- Base setups (needed regardless of pointer type) --- */
.proj-img-wrap, .gallery-img-wrap { overflow: hidden; }
.contact-social-link { position: relative; }
.contact-social-link::after {
  content: ''; position: absolute; left: 0; bottom: -4px;
  height: 2px; width: 0; background: var(--red-dark); transition: width .3s ease;
}
.nav-links a { position: relative; }
.nav-links a::after {
  content: ''; position: absolute; left: 0; bottom: -6px;
  height: 2px; width: 0; background: var(--cream); transition: width .3s ease;
}

/* --- Touch / press feedback (works on tap AND mouse-down) --- */
.btn-resume:active, .form-submit:active { transform: translateY(0) scale(.98); }
.proj-card:active { transform: scale(.99); }
.social-icons a:active { transform: scale(.92); }

/* --- HOVER effects: only on real pointer devices (mouse/trackpad). ---
   @media(hover:hover) stops "sticky hover" on touchscreens, where a tap
   would otherwise lock an element into its hover state. */
@media (hover: hover) and (pointer: fine) {
  .btn-resume:hover { background: rgba(255,255,255,0.10); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,0.20); }
  .btn-resume:hover img { transform: translateY(3px); }
  .form-submit:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(193,18,31,0.35); filter: brightness(1.06); }

  /* Selected Cases — gentle contained zoom only (no highlight/lift). */
  .proj-card:hover .proj-img-wrap img { scale: 1.05; }

  /* Digital Playgrounds — gentle contained zoom only. */
  .gallery-img-wrap:hover img { scale: 1.06; }

  /* Peer Testimonials — same zoom feel as gallery. */
  .test-card:hover { scale: 1.03; box-shadow: 0 24px 56px rgba(0,0,0,0.15); }

  /* Random Thoughts — warm tint, nudge in, title + arrow respond. */
  .blog-item:hover { background: rgba(185,172,146,0.14); transform: translateX(6px); }
  .blog-item:hover .blog-item-title { color: var(--red-dark); }
  .blog-item:hover .blog-arrow { transform: translateX(8px); }
  .blog-see-all:hover { gap: 14px; }

  .social-icons a:hover { transform: translateY(-4px) scale(1.10); }
  .contact-social-link:hover::after { width: 100%; }
  .nav-links a:hover::after { width: 100%; }
  .logo:hover { transform: scale(1.06) rotate(-2deg); }
}

/* --- Scroll reveal (classes added by script.js → safe if JS is off) ---
   Directional variants give each section its own entrance character. */
.reveal {
  opacity: 0;
  transition: opacity .7s ease, transform .9s cubic-bezier(.16,1,.3,1);
  will-change: opacity, transform;
}
.reveal.r-up    { transform: translateY(42px); }
.reveal.r-left  { transform: translateX(-52px); }
.reveal.r-right { transform: translateX(52px); }
.reveal.r-zoom  { transform: scale(.9); }
.reveal.r-fade  { transform: none; }   /* pure fade — used where the title masks */
.reveal.is-visible { opacity: 1; transform: none; }

/* --- Signature: masked line reveal for the big headlines ---
   Each line rises from behind its own clipping mask when the section reveals
   (driven by the .is-visible class the scroll-reveal observer already adds). */
.line-mask  { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.line-inner { display: block; transform: translateY(110%); transition: transform 1s cubic-bezier(.19,1,.22,1); }
.is-visible .line-inner { transform: translateY(0); }
.line-mask:nth-child(2) .line-inner { transition-delay: 0.11s; }
.line-mask:nth-child(3) .line-inner { transition-delay: 0.22s; }

/* --- Parallax-depth layer (scroll-driven by script.js) --- */
[data-parallax] { will-change: transform; }

/* --- Hero entrance (pure CSS, runs on load) --- */
@keyframes heroRise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
@keyframes heroFade { from { opacity: 0; } to { opacity: 1; } }
/* Fade-only entrance (no transform) so it never fights the sticky show/hide transform. */
.navbar         { opacity: 0; animation: heroFade .7s ease .05s forwards; }
.hero-sub       { opacity: 0; animation: heroRise .8s cubic-bezier(.16,1,.3,1) .18s forwards; min-height: 1.4em; }
.hero-resume-col{ opacity: 0; animation: heroRise .8s cubic-bezier(.16,1,.3,1) .62s forwards; }
.hero-follow    { opacity: 0; animation: heroRise .8s cubic-bezier(.16,1,.3,1) .76s forwards; }

/* HEADLINE — letters cascade up into focus (rise + de-blur), not a flat fade.
   JS splits "SATHISH S" into .char spans; pre-split it's hidden (no flash). */
.js-anim .hero-name { visibility: hidden; }
.hero-name .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(48px);
  filter: blur(8px);
  animation: charRise .9s cubic-bezier(.2,.75,.25,1) forwards;
}
@keyframes charRise {
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* AVATAR — rises onto the stage, then JS takes over with float + 3D parallax. */
@keyframes avatarEnter {
  0%   { opacity: 0; transform: translateX(calc(-50% + clamp(0px, 12.3vw - 31.5px, 40px))) translateY(60px) scale(.94); }
  100% { opacity: 1; transform: translateX(calc(-50% + clamp(0px, 12.3vw - 31.5px, 40px))) translateY(0)    scale(1);   }
}
.hero-avatar {
  opacity: 0;
  transform-origin: center center;
  animation: avatarEnter 1.1s cubic-bezier(.16,1,.3,1) .2s forwards;
}
/* 3D perspective on the hero so rotateX/Y look real */
.hero-content { perspective: 1400px; perspective-origin: 50% 40%; }

/* Typewriter caret for the welcome line */
.type-cursor {
  display: inline-block;
  margin-left: 2px;
  font-weight: 300;
  animation: caretBlink 1s steps(1) infinite;
}
@keyframes caretBlink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

/* --- Respect reduced-motion --- */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .navbar, .hero-sub, .hero-name, .hero-avatar, .hero-resume-col, .hero-follow {
    animation: none !important; opacity: 1 !important;
  }
  .js-anim .hero-name { visibility: visible !important; }
  .hero-name .char {
    animation: none !important; opacity: 1 !important;
    transform: none !important; filter: none !important;
  }
  .line-inner { transform: none !important; }
  *, *::before, *::after { transition: none !important; }
}


/* ══════════════════════════════════════════════════════════
   TABLET / PHONE (≤991px): continuous image parallax is OFF (JS-gated for
   smooth native touch scrolling), so the images fill their boxes normally
   instead of the oversized-for-parallax crop used on desktop.
   ══════════════════════════════════════════════════════════ */
@media (max-width: 991px) {
  .proj-img,
  .gallery-img-wrap img { top: 0; height: 100%; transform: none !important; }
}

/* ── Toast notifications ── */
.site-toast {
  position: fixed;
  top: 32px;
  left: 50%;
  transform: translateX(-50%) translateY(-24px);
  opacity: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-radius: 14px;
  font-family: 'Urbanist', sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.2px;
  box-shadow: 0 12px 40px rgba(54,46,27,0.18);
  transition: opacity .35s ease, transform .35s cubic-bezier(.16,1,.3,1);
  pointer-events: none;
  white-space: nowrap;
}
.site-toast.toast-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.site-toast--success { background: var(--dark); color: var(--cream); }
.site-toast--error   { background: var(--red-dark); color: var(--light-red); }
.site-toast--network { background: var(--cream); color: var(--dark); border: 1.5px solid rgba(54,46,27,0.15); }
.toast-icon {
  font-size: 16px;
  flex-shrink: 0;
}
.toast-msg { flex: 1; }
.toast-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  opacity: 0.6;
  color: inherit;
  padding: 0 0 0 8px;
  flex-shrink: 0;
}
.toast-close:hover { opacity: 1; }
@media (max-width: 767px) {
  .site-toast { top: 16px; font-size: 14px; padding: 14px 16px; max-width: calc(100vw - 32px); white-space: normal; }
}

/* ── Focus styles (WCAG 2.1 AA) ── */
.form-group input:focus,
.form-group textarea:focus {
  outline: 2px solid var(--red-dark);
  outline-offset: 2px;
}
.form-submit:focus-visible,
.btn-resume:focus-visible,
.nav-links a:focus-visible {
  outline: 2px solid var(--cream);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── See all work CTA wrapper ── */
.see-all-work-wrap {
  display: flex;
  justify-content: flex-end;
  margin-top: -32px;
}

/* ── See all work CTA (after projects grid) ── */
.see-all-work {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.6px;
  color: var(--muted);
  text-transform: uppercase;
  padding-bottom: 2px;
  border-bottom: 1.5px solid var(--muted);
  transition: color .25s ease, border-color .25s ease, gap .25s ease;
}
@media (hover: hover) and (pointer: fine) {
  .see-all-work:hover { color: var(--red-dark); border-color: var(--red-dark); gap: 14px; }
}

/* ── Active nav link (set by JS on scroll) ── */
.nav-links a.nav-active::after { width: 100%; }

/* ── Dot buttons — reset browser button styles ── */
.dot {
  border: none;
  cursor: pointer;
  padding: 0;
  /* Fitts's Law: invisible hit area expansion so tap target is ~44px */
  position: relative;
}
.dot::before {
  content: '';
  position: absolute;
  inset: -14px;
}