/* ==========================================================================
   Page layout — index.html
   ========================================================================== */

/* Full-bleed like the artboard: content always spans the viewport minus the
   20px gutter. Above 1440px all sizes scale via --px (see tokens.css). */
.wrap {
  width: 100%;
  padding-inline: var(--page-gutter);
}

/* ---- Hero ---------------------------------------------------------------- */
.hero {
  background: linear-gradient(to bottom, var(--color-black) 55%, var(--color-bg));
  padding-bottom: var(--space-5);
}

.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  padding-top: var(--space-10);
}
/* Header buttons, slider arrows and "Get in touch": white label, accent
   outline; the hover fill still turns it dark. */
.site-header .button,
.slider__controls .button,
.site-footer .button { color: var(--color-text); }
/* Service numbers: white on the accent fill. */
.service-card__meta .tag--filled { color: var(--color-text); }

.hero__head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: var(--space-5);
  margin-top: calc(var(--space-32) + var(--space-10));
}
.hero__title {
  max-width: 6.6em; /* three lines: "Building digital / experiences / that click." */
  text-align: center;
}
.hero__aside { margin-top: calc(var(--space-20) + var(--space-2)); }
.hero__aside--end { justify-self: end; text-align: right; }

.hero__intro {
  max-width: calc(404 * var(--px));
  margin: var(--space-32) auto 0;
  text-align: center;
}

/* ---- Testimonial slider -------------------------------------------------- */
.hero .slider {
  margin-top: var(--space-18);
  /* #services jumps land with the header (label + arrows) above still in view */
  scroll-margin-top: var(--space-26);
}
/* Header sits in the gap above the cards so the cards keep their artboard position. */
.hero .slider__header {
  position: absolute;
  inset-inline: var(--page-gutter);
  bottom: calc(100% + var(--space-4));
}
.hero .slider__track > * {
  flex-basis: min(calc(927 * var(--px)), calc(100vw - 2 * var(--page-gutter) - var(--space-8)));
}

/* ---- Features ------------------------------------------------------------ */
.features { padding: var(--space-26) 0 calc(var(--space-32) - var(--space-2)); }
.features__grid {
  display: grid;
  grid-template-columns: repeat(3, calc(216 * var(--px)));
  justify-content: center;
  column-gap: calc(139 * var(--px));
  row-gap: var(--space-8);
}

/* ---- About --------------------------------------------------------------- */
.about {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-block: var(--space-32);
  background: var(--color-black);
  text-align: center;
}
/* Eyebrow + heading read as one group; the image gets more air below.
   text-box trims the line boxes to cap height and baseline, so the margin
   is exactly the visible gap (browsers without support keep a bit more air). */
.about > .t-label,
.about__heading { text-box: trim-both cap alphabetic; }
.about__heading { margin-top: var(--space-4); }
.about__media {
  position: relative;
  margin-top: var(--space-16);
  overflow: hidden; /* the portrait drifts inside its frame (parallax) */
}
/* Darken the bottom edge so the overlapping statement stays readable. */
.about__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 62%, rgb(0 0 0 / 0.6));
}
.about__portrait {
  display: block;
  width: calc(288 * var(--px));
  height: auto; /* the width/height attributes only reserve the 4:5 space */
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
@media (prefers-reduced-motion: no-preference) {
  .about__portrait { scale: 1.2; } /* headroom for the in-frame parallax */
}
/* The statement's first line overlaps the bottom edge of the portrait. */
.about__statement {
  position: relative;
  max-width: 11em;
  margin-top: -0.55em;
  text-wrap: balance;
}
.about .process {
  align-self: stretch;
  margin-top: var(--space-26);
  text-align: left;
}

/* ---- Footer -------------------------------------------------------------- */
.site-footer {
  padding-top: var(--space-28);
  padding-bottom: var(--space-16);
}
.site-footer__row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-5);
}
.site-footer__row > :last-child { justify-self: end; }

.site-footer__claim {
  margin-bottom: var(--space-16);
  text-align: center;
  text-wrap: balance;
}

/* Reveal footer: it sits stuck to the bottom *behind* the page; the sections
   above (opaque backgrounds) scroll away and uncover it. js/footer-reveal.js
   feeds --reveal (0 → 1) for a slight parallax of the footer content. */
.site-footer--reveal {
  position: sticky;
  bottom: 0;
  z-index: 0;
  background: var(--color-bg);
}
/* A quiet echo of the hero's ASCII field behind the footer. */
.site-footer .ascii-field { opacity: 0.35; }

body:has(.site-footer--reveal) > section {
  position: relative;
  z-index: 1;
}
@media (prefers-reduced-motion: no-preference) {
  .site-footer--reveal > * {
    opacity: calc(0.2 + 0.8 * var(--reveal, 1));
    translate: 0 calc((1 - var(--reveal, 1)) * -48 * var(--px));
  }
}

/* Copy-email button: hover only fills (like every button). After a click the
   label rolls up to "Copied ✓" for a moment, then back. */
.copy-email__roll {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 1.3em;
  overflow: hidden;
  line-height: 1.3;
}
.copy-email__line {
  display: block;
  transition: translate 0.3s var(--ease-out);
}
.copy-email.is-copied .copy-email__line { translate: 0 -100%; }
@media (prefers-reduced-motion: reduce) {
  .copy-email__line { transition: none; }
}

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 900px) {
  .hero__head {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "start end" "title title";
    margin-top: var(--space-20);
  }
  .hero__aside { margin-top: 0; grid-area: start; }
  .hero__aside--end { grid-area: end; }
  .hero__title { grid-area: title; justify-self: center; margin-top: var(--space-8); }
  .hero__intro { margin-top: var(--space-16); }

  .features__grid { grid-template-columns: minmax(0, 216px); }

  .cta-block br { display: none; }
}

@media (max-width: 600px) {
  /* Button on top; place/time and © share the line below (each unbroken),
     and stack only if the screen is too narrow for both. */
  .site-footer__row { display: flex; flex-wrap: wrap; justify-content: space-between; }
  .site-footer__row > .t-label { white-space: nowrap; }
  .site-footer__row > .button { order: -2; margin-inline: auto; }
  .site-footer__row::before { content: ""; order: -1; flex-basis: 100%; } /* line break after the button */
}