/* Inner pages: book a service, coolroom hire, thanks */

.page-intro { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5.5rem) var(--section-y); }
.page-intro__label { color: var(--color-cyan-text); margin-bottom: var(--space-4); }
.page-intro h1 { font-size: var(--fs-h1); max-width: 16ch; }
.page-intro__phone {
  display: inline-block;
  margin-top: var(--space-6);
  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;
}
.page-intro__phone:hover { text-decoration: underline; }

/* ---------- Intro + form layout ---------- */
.form-layout { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--space-5); row-gap: var(--space-7); }
.form-layout__intro { grid-column: 1 / 5; align-self: start; position: sticky; top: calc(var(--header-h) + var(--space-6)); }
.form-layout__intro > p { margin-top: var(--space-5); color: var(--color-muted); max-width: 30ch; }
.form-layout .form { grid-column: 6 / -1; }
.form-panel {
  position: relative;
  background: var(--color-surface);
  padding: clamp(1.5rem, 1rem + 2.5vw, 3rem);
  border: 1px solid var(--color-line);
}
.form-panel::before {
  content: "";
  position: absolute;
  inset: -1px -1px auto -1px;
  height: 4px;
  background: var(--hot-cold);
}
.form__legend--small { font-size: var(--fs-small); margin-bottom: var(--space-2); }

/* ---------- Coolroom hire ---------- */
.page-intro--hire { padding-bottom: var(--space-8); overflow: hidden; }
.hire-intro { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--space-5); align-items: center; }
.hire-intro__copy { grid-column: 1 / 6; }
.hire-intro__copy p:not(.label) { margin-top: var(--space-5); color: var(--color-muted); max-width: 36ch; font-size: var(--fs-lead); }
.hire-intro__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-5); margin-top: var(--space-7); }
.hire-intro__media {
  grid-column: 7 / -1;
  margin-right: calc(var(--gutter) * -1 - max(0px, (100vw - var(--max-w)) / 2));
  aspect-ratio: 4 / 3.3;
  clip-path: polygon(var(--slant) 0, 100% 0, 100% 100%, 0 100%);
}
.hire-intro__media img { width: 100%; height: 100%; object-fit: cover; }

.hire-sizes {
  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%);
}
.size-table { width: 100%; margin-top: var(--space-7); border-collapse: collapse; }
.size-table th,
.size-table td { text-align: left; padding: var(--space-5) var(--space-4) var(--space-5) 0; border-bottom: 1px solid #2f3943; vertical-align: baseline; }
.size-table thead th { font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--color-on-ink-muted); padding-block: var(--space-3); }
.size-table tbody th { font-size: var(--fs-small); font-weight: 600; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--color-on-ink-muted); width: 9rem; }
.size-table__dim { font-family: var(--font-display); font-size: clamp(1.75rem, 1.2rem + 2.2vw, 3.25rem); line-height: 1; color: #fff; white-space: nowrap; }
.size-table__dim small { font-size: 0.45em; margin-left: 0.2em; color: var(--color-cyan); }
.size-table td:last-child { text-align: right; padding-right: 0; }
.size-table td:nth-child(4) { color: var(--color-on-ink-muted); }
.size-table__type { font-size: var(--fs-small); font-weight: 600; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--color-cyan); white-space: nowrap; }
.hire-sizes__note { margin-top: var(--space-5); color: var(--color-on-ink-muted); font-size: var(--fs-small); }

.hire-steps { padding-block: var(--section-y); }
.hire-steps__grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--space-5); }
.hire-steps__grid h2 { grid-column: 1 / 5; }
.hire-steps__list { grid-column: 5 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.hire-steps__list li { border-top: 3px solid var(--color-cyan); padding-top: var(--space-5); }
.hire-steps__list li:last-child { border-color: var(--color-red); }
.hire-steps__num { font-family: var(--font-display); font-size: var(--fs-small); color: var(--color-cyan-text); }
.hire-steps__list h3 { font-family: var(--font-body); font-weight: 600; letter-spacing: -0.01em; margin-block: var(--space-3) var(--space-2); }
.hire-steps__list p { color: var(--color-muted); }

.enquire-strip { background: var(--color-surface); border-top: 1px solid var(--color-line); padding-block: var(--section-y); }
.enquire-strip .form-panel { background: var(--color-bg); }

/* ---------- Thanks ---------- */
.page-intro--thanks { padding-block: var(--space-10); }
.thanks p:not(.label) { margin-top: var(--space-5); color: var(--color-muted); }
.thanks__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-5); margin-top: var(--space-7); }

@media (max-width: 56em) {
  .form-layout__intro, .form-layout .form,
  .hire-intro__copy, .hire-intro__media,
  .hire-steps__grid h2, .hire-steps__list { grid-column: 1 / -1; }
  .form-layout__intro { position: static; }
  .form-layout { row-gap: var(--space-6); }
  .form-layout .form-panel { margin-inline: calc(var(--gutter) * -1); border-inline: 0; }

  .hire-intro { row-gap: var(--space-6); }
  .hire-intro__media { order: -1; 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%); }
  .page-intro--hire { padding-top: 0; }

  .size-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .size-table tr { display: grid; grid-template-columns: 1fr auto; gap: var(--space-2) var(--space-4); padding-block: var(--space-5); border-bottom: 1px solid #2f3943; }
  .size-table th, .size-table td { padding: 0; border: 0; width: auto; }
  .size-table td:nth-child(4) { grid-column: 1 / -1; }
  .size-table td:last-child { grid-column: 1 / -1; text-align: left; }
  .size-table tbody th { grid-column: 1 / -1; }

  .hire-steps__grid { row-gap: var(--space-6); }
  .hire-steps__list { grid-template-columns: 1fr; }
}

/* ---------- 3D trailer viewer ---------- */
.hire-intro { isolation: isolate; }
.hire-intro__model { grid-column: 7 / -1; position: relative; }
.hire-intro__model::before {
  content: "";
  position: absolute;
  inset: 12% calc(var(--gutter) * -1 - max(0px, (100vw - var(--max-w)) / 2)) 0 6%;
  background: var(--color-surface);
  clip-path: polygon(var(--slant) 0, 100% 0, 100% 100%, 0 100%);
  z-index: -1;
}
.viewer__stage { position: relative; aspect-ratio: 16 / 10.5; }
.viewer__poster,
.viewer__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.viewer__poster { object-fit: contain; padding: 6% 4%; transition: opacity var(--dur) var(--ease); }
.viewer__canvas { opacity: 0; cursor: grab; transition: opacity var(--dur) var(--ease); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.viewer__canvas:active { cursor: grabbing; }
.viewer.is-ready .viewer__canvas { opacity: 1; }
.viewer.is-ready .viewer__poster { opacity: 0; }
.viewer__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: 0 var(--space-5) var(--space-5) 12%; }
.viewer__sizes { display: flex; border: 1.5px solid var(--color-text); border-radius: var(--radius); }
.viewer__sizes button { min-height: 2.75rem; padding-inline: var(--space-4); font-weight: 600; font-size: var(--fs-small); transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.viewer__sizes button + button { border-left: 1.5px solid var(--color-text); }
.viewer__sizes button[aria-pressed="true"] { background: var(--color-ink); color: var(--color-on-ink); }
.viewer__sizes button:hover:not([aria-pressed="true"]) { background: var(--color-bg); }
.viewer__hint { font-size: var(--fs-small); color: var(--color-muted); display: none; }
.viewer.is-ready .viewer__hint { display: block; }
.viewer.is-touched .viewer__hint { visibility: hidden; }
.viewer__hint::before { content: "\2194"; margin-right: var(--space-2); }
.viewer:not(.is-ready) .viewer__sizes { display: none; }

.hire-sizes__sub { margin-top: var(--space-3); color: var(--color-on-ink-muted); }
.hire-sizes .lineup { margin-top: var(--space-7); gap: var(--space-7); }
.hire-sizes .lineup__name { color: var(--color-on-ink-muted); }
.hire-sizes .lineup__dim { color: #fff; }
.lineup__img { width: 100%; height: auto; }
@media (max-width: 56em) {
  .hire-intro__model { grid-column: 1 / -1; order: -1; margin-inline: calc(var(--gutter) * -1); }
  .hire-intro__model::before { inset: 14% 0 0 0; clip-path: polygon(0 var(--slant), 100% 0, 100% 100%, 0 100%); }
  .viewer__stage { aspect-ratio: 4 / 3.2; }
  .viewer__bar { padding: 0 var(--gutter) var(--space-5); }
  .page-intro--hire { padding-top: var(--space-4); }
  .hire-sizes .lineup { flex-direction: column; align-items: flex-start; gap: var(--space-6); }
  .hire-sizes .lineup__item { width: calc(var(--w) * 0.19px); max-width: 100%; flex: none !important; }
}

/* Hire page hero: the real signwritten trailer photo (polar bear) instead of the 3D render */
.hire-intro__photo { grid-column: 7 / -1; margin: 0; align-self: center; }
@media (max-width: 56em) { .hire-intro__photo { grid-column: 1 / -1; order: -1; } }
.hire-intro__photo img { width: 100%; height: auto; display: block; }