/* =====================================================================
   bhavitverma.com v4 — Home
   ===================================================================== */

/* ---------- Hero ---------- */
.hero { position: relative; z-index: var(--z-section); padding-top: var(--hero-pt); }
.hero::after {
  content: ""; position: absolute; inset: 0 0 -1rem 0; z-index: -1;
  background: linear-gradient(180deg, transparent 50%, var(--bg) 95%);
  pointer-events: none;
}
.hero__title { grid-column: 1 / 13; }
.hero__aside {
  grid-column: 14 / 19; align-self: end;
  display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem;
}
.hero__aside p { color: var(--text-2); text-wrap: pretty; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* Tools marquee (text, not logos) */
.marquee {
  margin-top: var(--hero-gap);
  overflow: clip;
}
.marquee__track { display: flex; width: max-content; animation: marquee 60s linear infinite; }
.marquee__group { display: flex; align-items: center; gap: 5rem; padding-inline: 2.5rem; }
.marquee__item {
  display: flex; align-items: center; gap: 5rem;
  font-size: var(--h-2xs); line-height: 1; color: var(--text-2); white-space: nowrap; letter-spacing: -0.01em;
}
.marquee__item .icon { color: var(--text-subtle); width: 1rem; height: 1rem; }
.marquee__label { margin-bottom: 1.5rem; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Featured work ---------- */
.worksec { overflow: clip; } /* keeps the sticky title inside this section (clip ≠ scroll container, sticky still works) */
.statement { grid-column: 8 / 19; }
.worklist { margin-top: 8rem; }
.worklist__left { grid-column: 1 / 8; position: relative; }
.worklist__sticky {
  position: sticky; top: 0;
  height: 100svh; margin-top: -40svh; /* title rides in with the first card, then pins at 40svh */
  padding-top: 40svh; padding-bottom: var(--gutter);
  display: flex; flex-direction: column;
}
.worklist__label { font-size: var(--h-2xs); line-height: 1; color: var(--text-subtle); }
.worklist__titles { position: relative; height: calc(var(--h-lg) * 1.1); margin-top: 1rem; }
.worklist__title {
  position: absolute; left: 0; top: 0;
  font-size: var(--h-lg); line-height: 1;
  opacity: 0; visibility: hidden;
}
.worklist__title.is-active { opacity: 1; visibility: visible; }
.worklist__chips { position: relative; margin-top: auto; height: 3rem; }
.chip {
  position: absolute; left: 0; bottom: 0;
  display: flex; align-items: center; gap: 1rem;
  opacity: 0; visibility: hidden;
}
.chip.is-active { opacity: 1; visibility: visible; }
.chip__tile {
  width: 3rem; height: 3rem; border-radius: var(--r-sm);
  display: grid; place-items: center;
  background: var(--surface); font-family: var(--font-display); font-size: 1.25rem;
}
.chip__text { display: flex; flex-direction: column; gap: 0.375rem; }

.worklist__media { grid-column: 8 / 19; margin-right: calc(var(--gutter) * -0.5); display: flex; flex-direction: column; }
.wcard { display: block; padding-block: 0.25rem; }
.wcard__media { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-sm); overflow: clip; }
.wcard__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.wcard__caption { display: none; }
.worklist.is-live .wcard:not(.is-active) .wcard__media img { opacity: 0.25; transform: scale(1.05); }
.wcard__tag { position: absolute; left: 0.75rem; top: 0.75rem; z-index: 1; }

.ctabar {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 0.25rem; padding: 2rem;
  border-radius: var(--r-sm);
  background: var(--accent-fill); color: var(--fg);
  transition: background-color var(--t-bg);
}
.ctabar:hover { background: var(--accent-hover); }

@media (max-width: 767px) {
  .statement { grid-column: 1 / 19; }
  .worklist { display: block; margin-top: 4rem; }
  .worklist__left { display: none; }
  .worklist__media { margin-right: 0; }
  .wcard__caption { display: flex; justify-content: space-between; gap: 1rem; padding: 0.75rem 0 1rem; }
  .ctabar { padding: 1.5rem; }
}

/* ---------- Services (What I do) ---------- */
.svc-intro .split__body { text-wrap: pretty; }
.svc-list { margin-top: 8rem; margin-inline: calc(var(--gutter) * -1); border-bottom: 1px solid var(--hairline); position: relative; }
.svc { border-top: 1px solid var(--hairline); }
.svc__head, .svc__row-inner { padding-inline: var(--gutter); }
.svc__head { padding-block: 2rem; align-items: baseline; }
.svc__num { grid-column: 1 / 6; font-size: var(--h-lg); line-height: 1; color: var(--text-ghost); }
.svc__title { grid-column: 6 / 19; font-size: var(--h-lg); line-height: 1; letter-spacing: -0.02em; }
.svc__rows { position: relative; }
.svc__row {
  position: relative; display: block;
  border-top: 1px solid var(--hairline);
}
.svc__row-inner { padding-block: 1rem; align-items: center; min-height: 3.5rem; }
.svc__label { grid-column: 6 / 19; position: relative; z-index: 2; transition: opacity 0.25s; }
.svc__row.is-hover .svc__label { opacity: 0; }
.svc__marquee {
  position: absolute; inset: 0 0 0 calc(5 / 18 * 100%); z-index: 2; overflow: clip;
  display: flex; align-items: center;
  opacity: 0; transition: opacity 0.25s; pointer-events: none;
}
.svc__row.is-hover .svc__marquee { opacity: 1; }
.svc__marquee-track { display: flex; width: max-content; animation: marquee 60s linear infinite; animation-play-state: paused; }
.svc__row.is-hover .svc__marquee-track { animation-play-state: running; }
.svc__marquee-group { display: flex; align-items: center; gap: 1rem; padding-right: 1rem; }
.svc__marquee-group span {
  font-size: var(--h-sm); line-height: 1; text-transform: uppercase; color: var(--bg); white-space: nowrap; letter-spacing: -0.01em;
}
.svc__marquee-group .icon { color: var(--bg); width: 1.25rem; height: 1.25rem; }
.svc__bar {
  position: absolute; left: 0; right: 0; top: 0; z-index: 1;
  background: var(--fg); transform-origin: top; transform: scaleY(0);
  pointer-events: none;
}

/* Cursor image trail */
.trail { position: fixed; inset: 0; z-index: var(--z-trail); pointer-events: none; }
.trail__img {
  position: absolute; left: 0; top: 0;
  width: 12rem; aspect-ratio: 4 / 3; overflow: clip;
  border-radius: var(--r-sm); opacity: 0;
}
.trail__img img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 991px) {
  .svc__marquee, .svc__bar { display: none; }
}
@media (max-width: 767px) {
  .svc-list { margin-top: 4rem; }
  .svc__head, .svc__row-inner { display: flex; gap: 1rem; }
  .svc__title { font-size: var(--h-md); }
}
@media (max-width: 479px) {
  .svc__num { display: none; }
}

/* ---------- Stats ---------- */
.stats__list { border-bottom: 1px solid var(--hairline-solid); }
.stat {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem;
  padding-block: 4rem; border-top: 1px solid var(--hairline-solid);
}
.stat__value { font-size: var(--h-lg); line-height: 1; letter-spacing: -0.02em; }
.stat__caption { max-width: 22ch; text-align: right; line-height: 1.3; color: var(--text-2); }
@media (max-width: 767px) {
  .stat { flex-direction: column; align-items: flex-start; padding-block: 2rem; gap: 1rem; }
  .stat__caption { text-align: left; }
}

/* ---------- Row list (journal-row component, used for "Start here") ---------- */
.rows { margin-top: 4rem; }
.row {
  position: relative; display: grid;
  grid-template-columns: repeat(18, minmax(0, 1fr)); column-gap: var(--gap);
  align-items: center;
  min-height: 5.5rem; padding: 1rem var(--gutter);
  margin-inline: calc(var(--gutter) * -1);
  transition: background-color var(--t-bg) ease;
}
.row:hover, .row:focus-visible { background: var(--surface); }
.row__main { grid-column: 1 / 9; display: flex; align-items: center; gap: 1rem; }
.row__thumb { width: 3.5rem; height: 3.5rem; border-radius: var(--r-sm); object-fit: cover; flex: none; }
.row__title { font-size: var(--b-xl); line-height: 1.2; }
.row__meta { grid-column: 9 / 12; color: var(--text-muted); }
.row__media { grid-column: 12 / 16; position: relative; align-self: stretch; }
.row__preview {
  position: absolute; left: 50%; top: 50%;
  width: 18.75rem; aspect-ratio: 16 / 12; border-radius: var(--r-sm); object-fit: cover;
  opacity: 0; transform: translate(-52%, -50%);
  transition: opacity 0.23s ease-out, transform 0.35s ease-out;
  pointer-events: none; z-index: 3;
}
.row:hover .row__preview { opacity: 1; transform: translate(-50%, -50%); }
.row__end { grid-column: 16 / 19; display: flex; justify-content: flex-end; }
.row:hover .iconbtn .icon, .row:focus-visible .iconbtn .icon { transform: rotate(0); }

@media (max-width: 991px) {
  .row { display: flex; justify-content: space-between; gap: 1rem; }
  .row__media { display: none; }
  .row__main { flex: 1; }
}
@media (max-width: 767px) {
  .row__end { display: none; }
}
@media (max-width: 479px) {
  .row__meta { display: none; }
}

/* ---------- Who we help ---------- */
.who { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); margin-top: 4rem; }
.who__card {
  display: flex; flex-direction: column; justify-content: space-between; gap: 2.5rem;
  min-height: 18rem; padding: 1.5rem; border-radius: var(--r-sm); background: var(--surface);
}
.who__card:nth-child(even) { background: transparent; border: 1px solid var(--hairline-solid); }
.who__title { font-size: var(--h-2xs); line-height: 1.1; }
.who__desc { margin-top: 0.75rem; color: var(--text-2); text-wrap: pretty; }

/* ---------- How we work ---------- */
.how { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); border-top: 1px solid var(--hairline); }
.how__step { display: flex; flex-direction: column; gap: 0.75rem; padding: 1.5rem 1rem 0 0; }
.how__title { font-size: var(--b-xl); line-height: 1.2; }
.how__step p { color: var(--text-2); text-wrap: pretty; }
.how__link { display: inline-flex; align-items: center; gap: 0.75rem; margin-top: 2.5rem; padding-block: 0.5rem; color: var(--fg); }
.how__link .icon { transition: transform 0.25s var(--ease-featured); }
.how__link:hover .icon { transform: translateX(0.25rem); }

@media (max-width: 991px) {
  .who { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 2.5rem; }
  .who__card { min-height: 14rem; }
  .how { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .who { grid-template-columns: 1fr; }
  .who__card { min-height: 0; gap: 1.5rem; }
  .how { grid-template-columns: 1fr; border-top: 0; }
  .how__step { padding: 1.25rem 0 0; border-top: 1px solid var(--hairline); }
}