/* 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, .1) 65%),
    linear-gradient(180deg, rgba(26, 15, 25, .18) 0%, rgba(26, 15, 25, .3) 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: 1.18;
  font-size: clamp(34px, 6vw, 68px);
  letter-spacing: -.01em;
  margin-bottom: var(--sp-4);
}

/* Highlighter-pen treatment on the section headings: a marker swipe of
   brand rose behind the text, cloned per line so a heading that wraps reads
   like a real highlighter rather than one solid block. The font colour is
   left untouched (paper on dark sections, ink inside the white contact
   panel). The .hl span is added around each h2.sec heading's text. */
.hl {
  background-color: #c6355c;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 0.02em 0.22em;
  border-radius: 0.06em;
}

.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 intro, the headline and lead beside a studio image, sitting above
   the two story cards. */
.about-intro {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}
.about-intro__media {
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--hair);
  aspect-ratio: 5 / 4;
  background: var(--ink-2);
}
.about-intro__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 820px) {
  .about-intro { grid-template-columns: 1fr; }
  .about-intro__media { aspect-ratio: 16 / 9; }
}

/* 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); }
/* Each project is a card plus a separate "view more" service button below
   it. The cell stretches to the grid row height and the card grows to fill,
   so the buttons line up across the row. */
.projects-grid .project-cell {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.projects-grid .project-cell > .project-card { flex: 1 1 auto; }
.project-cell__more {
  width: 100%;
  justify-content: center;
  text-align: center;
}

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;
}

/* Real logo artwork, shown as supplied (full colour) at a uniform height so
   the row scans as one belt. SVG is preferred with a raster fallback; provide
   artwork that reads on the dark strip. */
.marquee-item--logo,
.marquee-item--logo picture {
  display: inline-flex;
  align-items: center;
}

.marquee-item--logo img {
  height: clamp(30px, 4vw, 46px);
  width: auto;
  max-width: 240px;
  object-fit: contain;
}

/* 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); }

/* Contact lifted into a paper-white panel for contrast against the dark
   page, with the enquiry form beside a studio image. Type is inverted to
   ink inside the panel. */
.cta-panel {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: stretch;
  background: var(--paper);
  border-radius: 24px;
  padding: clamp(28px, 4vw, 56px);
  box-shadow: 0 30px 80px -40px rgba(0, 0, 0, .6);
  margin-top: var(--sp-4);
}
.cta-panel .sec { color: var(--ink); font-size: clamp(34px, 6vw, 65px); }
.cta-panel .lead { color: rgba(26, 15, 25, .66); max-width: 46ch; }
.cta-panel .eyebrow { color: var(--brand); }
.cta-panel .cta-form { margin-top: var(--sp-4); max-width: none; }
.cta-panel .field label { color: rgba(26, 15, 25, .58); }
.cta-panel .field input,
.cta-panel .field textarea {
  background: #fff;
  border-color: rgba(26, 15, 25, .18);
  color: var(--ink);
}
.cta-panel .field input::placeholder,
.cta-panel .field textarea::placeholder { color: rgba(26, 15, 25, .4); }
.cta-panel .field input:focus,
.cta-panel .field textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(41, 161, 221, .22);
}
.cta-panel__media {
  border-radius: 16px;
  overflow: hidden;
  min-height: 280px;
  background: var(--ink-2);
}
.cta-panel__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The studio photo is a tall portrait running from the paper aeroplane at
     the top down to the shoulders, so anchor the crop to the top. That keeps
     the plane and the face whatever height the column stretches to. */
  object-position: center top;
  display: block;
}
@media (max-width: 860px) {
  .cta-panel { grid-template-columns: 1fr; padding: clamp(22px, 6vw, 40px); }
  /* Portrait rather than the old landscape band: a wide crop of this photo
     would cut the aeroplane off entirely. */
  .cta-panel__media { min-height: 0; aspect-ratio: 4 / 5; }
}