/* NGD homepage styles
   Started in Task 6 with the hero, extended by later tasks (about,
   featured work, services teaser, etc). Depends on tokens.css, base.css
   and components.css being loaded first. */

/* Hero, the brand thesis: full-viewport-height, dark, interchanging
   full-bleed images behind a scrim, crop marks in the corners. */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hero-slides {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.4s cubic-bezier(.16,1,.3,1);
}

.hero-slide.is-active { opacity: 1; }

.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Dark scrim, keeps the headline and copy legible over any slide */
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(120% 90% at 25% 15%, transparent 0%, rgba(26, 15, 25, .35) 65%),
    linear-gradient(180deg, rgba(26, 15, 25, .68) 0%, rgba(26, 15, 25, .5) 42%, rgba(26, 15, 25, .92) 100%);
}

.hero-content {
  position: relative;
  z-index: 2;
  padding-top: var(--sp-7);
  padding-bottom: var(--sp-7);
}

.hero-title {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -.02em;
  line-height: .92;
  font-size: clamp(40px, 7vw, 108px);
  max-width: 15ch;
}

.hero-title .grad {
  background: linear-gradient(92deg, var(--brand), var(--teal) 32%, var(--secondary) 66%, var(--coral));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  background-size: 220% 100%;
  animation: hero-grad-pan 14s linear infinite;
}

@keyframes hero-grad-pan {
  to { background-position: 220% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-title .grad { animation: none !important; }
}

.hero-lead {
  margin-top: var(--sp-4);
  max-width: 52ch;
  font-size: clamp(16px, 2.2vw, 19px);
  color: var(--paper-dim);
}

.hero-cta {
  margin-top: var(--sp-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

@media (max-width: 560px) {
  .hero-cta { flex-direction: column; align-items: flex-start; }
  .hero-cta .btn { width: 100%; justify-content: center; }
}

/* Shared section rhythm for everything after the hero (about, featured
   work, services, and later sections from Task 8). Scoped to each
   section's id so it can never leak onto unrelated markup. */
#about,
#work,
#services,
#blog,
#clients,
#contact {
  padding-top: clamp(64px, 9vw, 120px);
  padding-bottom: clamp(64px, 9vw, 120px);
  border-top: 1px solid var(--hair-soft);
  position: relative;
}

/* Section heading and lead paragraph, the brand-guidelines h2.sec / .lead
   idiom, shared by every homepage section. */
.sec {
  font-family: var(--display);
  font-weight: 400;
  line-height: .98;
  font-size: clamp(34px, 6vw, 68px);
  letter-spacing: -.01em;
  margin-bottom: var(--sp-4);
}

.lead {
  max-width: 62ch;
  color: var(--paper-dim);
  font-size: clamp(16px, 2.2vw, 19px);
}

/* Generic responsive grid utility, the brand-guidelines .grid/.g2/.g3/.g4
   idiom, shared by every homepage section. */
.grid { display: grid; gap: var(--sp-4); }
.grid.g2 { grid-template-columns: repeat(2, 1fr); }
.grid.g3 { grid-template-columns: repeat(3, 1fr); }
.grid.g4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 900px) {
  .grid.g3, .grid.g4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .grid.g2, .grid.g3, .grid.g4 { grid-template-columns: 1fr; }
}

/* About, two-column studio intro sitting under the brand statement. */
.about-grid { margin-top: var(--sp-5); }
.about-grid h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 20px;
  margin-bottom: var(--sp-2);
}
.about-grid p { color: var(--paper-dim); font-size: 15px; }

/* Featured projects, grid of .project-card tiles (component defined in
   components.css). These rules only add behaviour the component doesn't
   already own: the anchor wrapper, the hover lift, and the thumbnail
   photo layered under the existing gradient wash. */
.projects-grid { margin-top: var(--sp-5); }

a.project-card {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform .3s cubic-bezier(.16,1,.3,1), border-color .3s cubic-bezier(.16,1,.3,1), box-shadow .3s cubic-bezier(.16,1,.3,1);
}

a.project-card:hover,
a.project-card:focus-visible {
  transform: translateY(-6px);
  border-color: var(--brand);
  box-shadow: 0 24px 48px -28px rgba(0, 0, 0, .6);
}

.project-card .thumb { overflow: hidden; }
.project-card .thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Services, .card tiles with a .reg marker next to the service name. */
.services-grid { margin-top: var(--sp-5); }

a.service-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  text-decoration: none;
  color: inherit;
  transition: transform .3s cubic-bezier(.16,1,.3,1), border-color .3s cubic-bezier(.16,1,.3,1);
}

a.service-card:hover,
a.service-card:focus-visible {
  transform: translateY(-4px);
  border-color: var(--brand);
}

.service-card__top {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.service-card__top h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 20px;
}

.service-card p { color: var(--paper-dim); font-size: 15px; }

/* Latest blog, .post-card grid tiles (image, category chip, title,
   excerpt, date). Mirrors the .project-card component but stays under
   its own namespace so the two never collide. */
.posts-grid { margin-top: var(--sp-5); }

a.post-card {
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--hair);
  background: var(--ink-2);
  text-decoration: none;
  color: inherit;
  transition: transform .3s cubic-bezier(.16,1,.3,1), border-color .3s cubic-bezier(.16,1,.3,1), box-shadow .3s cubic-bezier(.16,1,.3,1);
}

a.post-card:hover,
a.post-card:focus-visible {
  transform: translateY(-6px);
  border-color: var(--brand);
  box-shadow: 0 24px 48px -28px rgba(0, 0, 0, .6);
}

.post-card__thumb {
  height: 190px;
  overflow: hidden;
}

.post-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.post-card__body { padding: 22px; }

.post-card__body .chip-tag {
  display: inline-block;
  margin-bottom: var(--sp-3);
}

.post-card__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: 21px;
  line-height: 1.15;
  margin-bottom: var(--sp-2);
}

.post-card__excerpt {
  font-size: 14.5px;
  color: var(--paper-dim);
  margin-bottom: var(--sp-3);
}

.post-card__date {
  display: block;
  font-size: 12.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  /* paper-dim, not paper-faint, to hold WCAG AA contrast on the ink-2
     card surface at this size */
  color: var(--paper-dim);
}

.blog-more { margin-top: var(--sp-5); }

/* Client marquee, full-bleed strip that escapes the .wrap container so
   the belt of names can scroll edge to edge under the section heading. */
#clients .marquee { margin-top: var(--sp-5); }

.marquee {
  position: relative;
  overflow: hidden;
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee-inner {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  width: max-content;
}

.marquee-track {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  width: max-content;
  padding: var(--sp-3) 0;
}

.marquee-item {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(18px, 2.4vw, 26px);
  color: var(--paper-faint);
  white-space: nowrap;
  letter-spacing: -.01em;
}

/* CTA, closing "start a project" form block. */
.cta-form {
  margin-top: var(--sp-5);
  max-width: 640px;
}

/* Honeypot field, kept in the DOM and in the tab order's blind spot so
   bots that auto-fill still populate it, but sighted and screen-reader
   users never encounter it. */
.cta-hp {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.cta-form .btn-primary { margin-top: var(--sp-4); }