/* Homepage sections, in the Figma order: hero, the card row (deck.css),
   other services on navy, the statement, the paper lead band, the reach
   wall, the paper client band and the CTA. */

/* ---- Hero, after strakes.io: a light ground with faint sweeping rules,
   the old hero's words on the left, the three Mini Cards on the right.
   Lined up with the floating nav, which is the same width. ---- */
.hero {
  position: relative;
  overflow: hidden;
  background: #f4f6f9;
  color: var(--ink);
}
.hero-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero-wrap {
  position: relative;
  width: min(var(--float-max), 100% - 2 * var(--pad));
  margin-inline: auto;
  min-height: min(100svh, 58rem);
  display: grid;
  align-items: center;
  gap: 3rem;
  padding: 8.5rem 0 4.5rem;
}
@media (min-width: 960px) {
  .hero-wrap { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 2rem; padding: 7rem 0 4rem; }
}

.hero-title { font-size: clamp(2.1rem, 3.75vw, 3.4rem); color: var(--ink); text-wrap: wrap; }
.hero-sub { margin-top: 1rem; font-size: clamp(1rem, 1.6vw, 1.3rem); color: var(--brand-deep); }
.hero-lede { margin-top: 1.5rem; max-width: 30rem; font-size: 1.125rem; line-height: 1.45; color: rgb(10 22 40 / 0.72); }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.25rem; }
.hbtn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 2.65rem; padding: 0 1.5rem; border-radius: 0; border: 1px solid transparent;
  font-size: 1rem; font-weight: 600; white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.hbtn-primary { background: var(--ink); color: #fff; }
.hbtn-primary:hover { background: #173863; }
.hbtn-ghost { background: #fff; border-color: rgb(10 22 40 / 0.14); color: rgb(10 22 40 / 0.72); }
.hbtn-ghost:hover { border-color: rgb(10 22 40 / 0.35); color: var(--ink); }
@media (max-width: 959px) {
  .hero-text { text-align: center; }
  .hero-lede { margin-inline: auto; }
  .hero-ctas { justify-content: center; }
}
@media (max-width: 559px) {
  .hero-ctas { flex-direction: column; }
  .hbtn { width: 100%; height: 3rem; }
}

/* ---- The three cards. Each is its own element so each reacts on its own:
   the stack fans out a touch when the pointer arrives, and the card under it
   lifts to the front with one small settle. Individual transform properties
   (translate, rotate, scale) carry the pose; the settle animates transform,
   which composes on top, so it never fights the pose. ---- */
.hero-cards { position: relative; width: 100%; max-width: 40rem; aspect-ratio: 5 / 4; margin-inline: auto; }
/* On a wide screen the stack runs a little past its column into the margin,
   as the reference does, so the cards can be large without squeezing the
   headline. */
@media (min-width: 960px) {
  .hero-cards { width: calc(100% + 5rem); max-width: 44rem; margin: 0 -3.5rem 0 -1.5rem; }
}
.hcard {
  position: absolute; width: 39%; aspect-ratio: 124 / 164;
  border-radius: 0;
  box-shadow: 0 18px 38px rgb(10 22 40 / 0.14), 0 2px 6px rgb(10 22 40 / 0.08);
  transition: translate 0.55s var(--ease), rotate 0.55s var(--ease), scale 0.55s var(--ease), box-shadow 0.55s var(--ease);
}
.hcard svg { display: block; width: 100%; height: 100%; }
.hcard--navy { left: 9%; top: 18%; rotate: -13deg; z-index: 1; }
.hcard--sky { left: 30.5%; top: 9%; rotate: 0deg; z-index: 2; }
.hcard--white { left: 52%; top: 19%; rotate: 12deg; z-index: 3; }

@media (hover: hover) {
  .hero-cards:hover .hcard--navy { translate: -6% 2%; rotate: -16deg; }
  .hero-cards:hover .hcard--sky { translate: 0 -2%; }
  .hero-cards:hover .hcard--white { translate: 6% 2%; rotate: 15deg; }

  .hero-cards .hcard:hover {
    z-index: 4; scale: 1.05;
    box-shadow: 0 30px 60px rgb(10 22 40 / 0.22), 0 4px 10px rgb(10 22 40 / 0.1);
    animation: hcard-settle 0.6s var(--ease);
  }
  .hero-cards .hcard--navy:hover { translate: -6% -6%; rotate: -11deg; }
  .hero-cards .hcard--sky:hover { translate: 0 -8%; rotate: 2deg; }
  .hero-cards .hcard--white:hover { translate: 6% -6%; rotate: 9deg; }
}
@keyframes hcard-settle {
  0% { transform: rotate(0deg); }
  30% { transform: rotate(-2deg); }
  55% { transform: rotate(1.4deg); }
  80% { transform: rotate(-0.6deg); }
  100% { transform: rotate(0deg); }
}

/* ---- Section heading with a link at the right, as on the old work wall ---- */
.section-head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem;
  padding-top: 4rem; padding-bottom: 2.5rem;
}
@media (min-width: 768px) { .section-head { padding-top: 6rem; padding-bottom: 3rem; } }
.section-head .display { font-size: clamp(2.2rem, 6vw, 5rem); max-width: 22ch; }

/* ---- Venues: a full-bleed ruled wall, every row full at 2, 4 and 5 across,
   with a band of navy under it so the light client wall does not cut in hard. ---- */
.reach { padding-bottom: clamp(4rem, 8vw, 7rem); }
.venues {
  display: grid; gap: 1px; background: var(--seam);
  border-block: 1px solid var(--hair);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 768px) { .venues { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1280px) { .venues { grid-template-columns: repeat(5, 1fr); } }
.venues li {
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 6.5rem; padding: 1.25rem; background: var(--ink);
  transition: background-color 0.3s ease;
}
@media (min-width: 768px) { .venues li { min-height: 10rem; padding: 2rem 1.75rem; } }
.venues li:hover { background: var(--coal); }
.venues .display-tight { font-size: clamp(1rem, 1.5vw, 1.4rem); color: var(--paper); transition: color 0.3s ease; }
.venues li:hover .display-tight { color: var(--brand); }
.venues small { display: block; margin-top: 0.5rem; font-size: 0.75rem; line-height: 1.4; color: rgb(242 244 247 / 0.55); }

/* ---- Client wall: a paper band with a dark hairline grid ---- */
.wall { background: var(--paper); color: var(--ink); }
.wall-inner { padding-block: 4rem; }
@media (min-width: 768px) { .wall-inner { padding-block: 6rem; } }
.wall .display { font-size: clamp(2rem, 5vw, 4rem); }
.wall-grid {
  margin-top: 2.5rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--hair-dark); border-left: 1px solid var(--hair-dark);
}
@media (min-width: 768px) { .wall-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.wall-grid li {
  display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; padding: 1rem;
  border-right: 1px solid var(--hair-dark); border-bottom: 1px solid var(--hair-dark);
  transition: background-color 0.3s ease;
}
.wall-grid li:hover { background: var(--bone); }
.wall-grid img { width: auto; max-width: 75%; max-height: 4.5rem; }
@media (min-width: 768px) { .wall-grid img { max-height: 7.5rem; } }

/* ---- Lead: paper band, copy on the left, heading on the right (as the
   Figma frame sets it). The heading comes first in the markup for readers
   and search; the grid moves it across. ---- */
.lead { background: var(--paper); color: var(--ink); }
.lead-grid { display: grid; gap: 2rem; padding-block: 4rem; align-items: center; }
@media (min-width: 768px) {
  .lead-grid { grid-template-columns: repeat(12, 1fr); gap: 3rem; padding-block: 6rem; }
  .lead-copy { grid-column: 1 / span 5; grid-row: 1; }
  .lead-head { grid-column: 7 / span 6; grid-row: 1; }
}
.lead .display { font-size: clamp(1.9rem, 4.6vw, 3.6rem); }
.lead-copy p { max-width: 34ch; font-size: 1rem; line-height: 1.625; color: rgb(10 22 40 / 0.8); }
@media (min-width: 768px) { .lead-copy p { font-size: 1.125rem; } }
.lead-copy p + p { margin-top: 1.25rem; }

/* ---- Other services: navy band, the three services in one white ruled
   box in the middle, and one yellow button under it ---- */
.services { background: var(--ink); }
.services-inner { padding-block: clamp(4.5rem, 8vw, 7rem); text-align: center; }
.services-title { font-size: clamp(2rem, 4.6vw, 3.75rem); color: var(--paper); }
.services-box {
  max-width: 64rem; margin: clamp(2.5rem, 4vw, 3.5rem) auto 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px; background: #d9dee6; border: 1px solid #d9dee6;
  text-align: left;
}
.service { background: #fff; color: var(--ink); padding: clamp(1.75rem, 2.6vw, 2.5rem); }
.service-icon { width: 1.75rem; height: 1.75rem; color: var(--brand); }
.service-name { margin-top: 1.75rem; font-size: clamp(1.05rem, 1.4vw, 1.25rem); line-height: 1.05; }
.service-text { margin-top: 0.9rem; font-size: 0.9375rem; line-height: 1.6; color: rgb(10 22 40 / 0.66); }
.services-cta { margin-top: clamp(2rem, 3.5vw, 2.75rem); }
.hbtn-sun { min-width: 15rem; background: var(--sun); color: var(--ink); }
.hbtn-sun:hover { background: #ffdf55; }
@media (max-width: 767px) {
  .services-box { grid-template-columns: 1fr; }
  .hbtn-sun { width: 100%; max-width: 22rem; }
}

/* ---- Statement ---- */
.statement { border-top: 1px solid var(--hair); padding-block: 4rem; }
@media (min-width: 768px) { .statement { padding-block: 6rem; } }
.statement-grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 768px) { .statement-grid { grid-template-columns: minmax(0, 1fr) auto; gap: 4rem; } }
.statement-line { max-width: 64rem; font-size: clamp(1.5rem, 4vw, 3rem); color: var(--paper); text-wrap: balance; }
.statement-sub { margin-top: 1.5rem; max-width: 60ch; line-height: 1.625; color: rgb(242 244 247 / 0.78); }
/* The stand itself, upright beside the line, as in the Figma. */
.statement-photo {
  width: clamp(10rem, 16vw, 14rem); aspect-ratio: 344 / 474; object-fit: cover;
  box-shadow: 0 18px 40px rgb(0 0 0 / 0.35);
}
@media (max-width: 767px) { .statement-photo { width: 100%; max-width: 14rem; } }

@media (prefers-reduced-motion: reduce) {
  .hcard { transition: none; }
  .hero-cards .hcard:hover { animation: none; }
}