/* Homepage sections */

/* ---------- What do you need? ---------- */
.needs { padding-block: var(--section-y); }
.needs__grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--space-5); }
.needs__intro { grid-column: 1 / 5; }
.needs__intro p { margin-top: var(--space-4); color: var(--color-muted); max-width: 26ch; }
.needs__list { grid-column: 6 / -1; border-top: 1.5px solid var(--color-text); }
.needs__row {
  position: relative;
  display: grid;
  grid-template-columns: 3.5rem 1fr auto;
  align-items: baseline;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-4) var(--space-6) 0;
  border-bottom: 1px solid var(--color-line);
  text-decoration: none;
  transition: padding var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.needs__row::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--color-cyan);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform var(--dur) var(--ease);
}
.needs__row:hover,
.needs__row:focus-visible { padding-left: var(--space-5); background: var(--color-surface); }
.needs__row:hover::before,
.needs__row:focus-visible::before { transform: scaleY(1); }
.needs__num { font-family: var(--font-display); font-size: var(--fs-small); color: var(--color-cyan-text); }
.needs__text { font-size: clamp(1.375rem, 1.1rem + 1.1vw, 2.125rem); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; }
.needs__go {
  display: inline-flex;
  gap: var(--space-2);
  font-size: var(--fs-small);
  font-weight: 600;
  white-space: nowrap;
  color: var(--color-muted);
}
.needs__go::after { content: "\2192"; transition: transform var(--dur-fast) var(--ease); }
.needs__row:hover .needs__go { color: var(--color-text); }
.needs__row:hover .needs__go::after { transform: translateX(4px); }

/* ---------- New builds & fitouts ---------- */
.projects { padding-bottom: var(--section-y); }
.projects__grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--space-5); align-items: center; }
.projects__media {
  grid-column: 1 / 8;
  margin-left: calc(var(--gutter) * -1 - max(0px, (100vw - var(--max-w)) / 2));
  aspect-ratio: 4 / 3;
  max-height: calc(100svh - var(--header-h) - var(--space-7));
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%);
}
.projects__media img,
.projects__media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.projects__copy { grid-column: 8 / -1; padding-block: var(--space-6); }
.projects__label { color: var(--color-cyan-text); margin-bottom: var(--space-4); }
.projects__lead { margin-top: var(--space-5); color: var(--color-muted); }
.steps { margin-block: var(--space-6) var(--space-7); border-top: 1px solid var(--color-line); }
.steps li {
  display: grid;
  grid-template-columns: 2.75rem 1fr;
  gap: var(--space-3);
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--color-line);
}
.steps__num { font-family: var(--font-display); font-size: var(--fs-small); color: var(--color-cyan-text); padding-top: 0.2em; }

/* ---------- Coolroom hire band ---------- */
.hire-band {
  position: relative;
  background: var(--color-ink);
  color: var(--color-on-ink);
  padding-block: calc(var(--section-y) + var(--slant) * 0.6) var(--section-y);
  clip-path: polygon(0 var(--slant), 100% 0, 100% 100%, 0 100%);
  margin-top: calc(var(--slant) * -0.4);
}
.hire-band__grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--space-5); align-items: end; }
.hire-band__copy { grid-column: 1 / 6; }
.hire-band__label { color: var(--color-cyan); margin-bottom: var(--space-4); }
.hire-band__copy p:not(.label) { margin-top: var(--space-5); color: var(--color-on-ink-muted); max-width: 34ch; }
.hire-band__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-5); margin-top: var(--space-7); }
.hire-band__phone { font-weight: 600; text-decoration: none; border-bottom: 1.5px solid currentColor; padding-block: var(--space-1); }
.sizes { grid-column: 7 / -1; list-style: none; padding: 0; border-top: 1px solid #2f3943; }
.sizes__row {
  display: grid;
  grid-template-columns: 9.5rem 1fr auto;
  align-items: baseline;
  gap: var(--space-4);
  padding-block: var(--space-5);
  border-bottom: 1px solid #2f3943;
}
.sizes__name { font-size: var(--fs-small); font-weight: 600; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--color-on-ink-muted); }
.sizes__dim { font-family: var(--font-display); font-size: clamp(1.75rem, 1.2rem + 2vw, 3rem); line-height: 1; color: #fff; white-space: nowrap; }
.sizes__dim small { font-size: 0.45em; margin-left: 0.2em; color: var(--color-cyan); }
.sizes__use { color: var(--color-on-ink-muted); font-size: var(--fs-small); text-align: right; }

/* ---------- Book a service + payment plans ---------- */
.service { padding-block: var(--section-y); }
.service__grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--space-5); row-gap: var(--space-8); align-items: center; }
.service__copy { grid-column: 2 / 7; }
.service__copy p { margin-block: var(--space-5) var(--space-6); color: var(--color-muted); max-width: 34ch; }
.service__media {
  grid-column: 8 / -1;
  margin-right: calc(var(--gutter) * -1 - max(0px, (100vw - var(--max-w)) / 2));
  aspect-ratio: 4 / 4.2;
  clip-path: polygon(var(--slant) 0, 100% 0, 100% 100%, 0 100%);
}
.service__media img { width: 100%; height: 100%; object-fit: cover; }
.finance {
  grid-column: 2 / 10;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-4) var(--space-6);
  padding: var(--space-5) var(--space-6);
  background: var(--color-surface);
  border-left: 4px solid var(--color-red);
}
.finance__label { color: var(--color-accent); }
.finance__text { font-weight: 500; }

/* ---------- Enquiry ---------- */
.enquire { background: var(--color-surface); padding-block: var(--section-y); border-top: 1px solid var(--color-line); }
.enquire__grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--space-5); row-gap: var(--space-7); }
.enquire__intro { grid-column: 1 / 5; align-self: start; position: sticky; top: calc(var(--header-h) + var(--space-6)); }
.enquire__intro > p:first-of-type { margin-top: var(--space-4); color: var(--color-muted); max-width: 30ch; }
.enquire__phone {
  display: inline-block;
  margin-top: var(--space-7);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
  color: var(--color-accent);
  text-decoration: none;
  white-space: nowrap;
}
.enquire__phone:hover { text-decoration: underline; }
.enquire__email { display: block; margin-top: var(--space-3); font-weight: 600; }
.enquire__area { margin-top: var(--space-5); color: var(--color-muted); font-size: var(--fs-small); }
.enquire .form { grid-column: 6 / -1; }

/* ---------- Responsive ---------- */
@media (max-width: 56em) {
  .needs__intro, .needs__list,
  .projects__media, .projects__copy,
  .hire-band__copy, .sizes,
  .service__copy, .service__media, .finance,
  .enquire__intro, .enquire .form { grid-column: 1 / -1; }

  .needs__list { margin-top: var(--space-6); }
  .needs__row { grid-template-columns: 2.5rem 1fr; padding-block: var(--space-5); }
  .needs__go { grid-column: 2; }

  .projects__media { margin-inline: calc(var(--gutter) * -1); aspect-ratio: 4 / 3; clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--slant) * 1.4), 0 100%); }
  .projects__copy { padding-block: var(--space-6) 0; }

  .hire-band__grid { row-gap: var(--space-7); }
  .sizes__row { grid-template-columns: 1fr auto; row-gap: var(--space-1); }
  .sizes__name { grid-column: 1 / -1; }
  .sizes__use { text-align: right; }

  .service__grid { row-gap: var(--space-6); }
  .service__media { order: -1; margin-inline: calc(var(--gutter) * -1); aspect-ratio: 4 / 3; clip-path: polygon(0 calc(var(--slant) * 1.4), 100% 0, 100% 100%, 0 100%); }
  .finance { grid-template-columns: 1fr; padding: var(--space-5); margin-top: var(--space-4); }

  .enquire__intro { position: static; }
  .enquire__phone { margin-top: var(--space-5); }
}

/* ---------- Trailer lineup in the hire band ---------- */
.hire-band__side { grid-column: 7 / -1; }
.hire-band__side .sizes { grid-column: auto; }
.lineup--band { margin-bottom: var(--space-6); gap: var(--space-4); }
@media (max-width: 56em) {
  .hire-band__side { grid-column: 1 / -1; }
}

/* About */
.about { padding-block: var(--section-y); border-top: 1px solid var(--color-line); }
.about__grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--space-5); row-gap: var(--space-7); align-items: start; }
.about__head { grid-column: 1 / 7; }
.about__label { color: var(--color-muted); margin-bottom: var(--space-4); }
.about__head h2 { font-size: var(--fs-h1); max-width: 14ch; }
.about__body { grid-column: 8 / -1; padding-top: var(--space-6); }
.about__body p { max-width: 52ch; }
.about__body p + p { margin-top: var(--space-4); }
.about__lead { font-size: var(--fs-lead); font-weight: 500; line-height: 1.5; }
.about__facts { margin-top: var(--space-7); border-top: 1.5px solid var(--color-text); }
.about__facts > div { display: grid; grid-template-columns: 7rem 1fr; gap: var(--space-4); padding-block: var(--space-4); border-bottom: 1px solid var(--color-line); }
.about__facts dt { font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-muted); padding-top: 0.2em; }
.about__facts dd { font-weight: 600; }
@media (max-width: 56em) {
  .about__head, .about__body { grid-column: 1 / -1; }
  .about__body { padding-top: 0; }
  .about__facts > div { grid-template-columns: 5.5rem 1fr; }
}

/* What we do */
.services { padding-bottom: var(--section-y); }
.services__head { max-width: 40rem; margin-bottom: var(--space-8); }
.services__label { color: var(--color-muted); margin-bottom: var(--space-4); }
.services__list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); column-gap: var(--space-6); row-gap: var(--space-8); }
.services__item { border-top: 1.5px solid var(--color-text); padding-top: var(--space-5); display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.services__item h3 { font-size: var(--fs-h3); max-width: 16ch; }
.services__item p { color: var(--color-muted); max-width: 36ch; margin-bottom: var(--space-2); }
.services__item .arrow-link { margin-top: auto; }
@media (max-width: 56em) {
  .services__head { margin-bottom: var(--space-6); }
  .services__list { grid-template-columns: 1fr; row-gap: var(--space-6); }
}
@media (min-width: 38em) and (max-width: 56em) {
  .services__list { grid-template-columns: 1fr 1fr; }
}

/* Tell us what you need */
.enquire__paths { list-style: none; padding: 0; margin-top: var(--space-6); display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); }
.enquire__finance { margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--color-line); color: var(--color-muted); font-size: var(--fs-small); max-width: 34ch; }
.enquire__finance strong { color: var(--color-text); }

/* Hire band trailer */
.hire-band__trailer { margin-bottom: var(--space-6); }
.hire-band__trailer img { width: 100%; height: auto; display: block; }

/* every hire size runs as a fridge or freezer */
.sizes__type { display: block; margin-top: var(--space-1); color: var(--color-cyan); white-space: nowrap; }

/* Short laptop screens: keep the fitout video and its steps on one screen */
@media (min-width: 56.01em) and (max-height: 860px) {
  .projects__copy { padding-block: var(--space-4); }
  .projects__copy h2 { font-size: clamp(1.5rem, .9rem + 1.8vw, 2.25rem); }
  .projects__lead { margin-top: var(--space-4); }
  .steps { margin-block: var(--space-5); }
  .steps li { padding-block: var(--space-3); }
}