/* Hallmark · page: EPDM service detail · shares the homepage system (tokens.css + styles.css)
 * structure: split hero with interactive sample → uses list → CSS cross-section on dark → spec list → steps → projects → FAQ → quote
 */

/* ---------- Hero ---------- */
.p-hero { padding: clamp(6.5rem, 13vh, 8.5rem) 0 var(--space-3xl); }
.p-hero__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-2xl) var(--space-3xl); align-items: center; }
.p-hero__title { margin-top: var(--space-lg); font-size: clamp(2.4rem, 1.3rem + 3.8vw, 4.6rem); font-weight: 700; line-height: 0.98; letter-spacing: -0.045em; max-width: 13ch; }
.p-hero__lead { margin-top: var(--space-lg); max-width: 40ch; font-size: var(--text-lg); line-height: 1.5; color: var(--color-muted); }
.p-hero__actions { margin-top: var(--space-xl); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-lg); }

.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-xs); font-size: var(--text-sm); color: var(--color-neutral); }
.crumbs li + li::before { content: "/"; margin-inline-end: var(--space-xs); color: var(--color-rule); }
.crumbs a { text-decoration: none; white-space: nowrap; }
.crumbs a:hover { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent-text); }
.crumbs [aria-current="page"] { color: var(--color-ink); font-weight: 500; }

/* ---------- Viewer ---------- */
.viewer { display: grid; gap: var(--space-md); min-width: 0; }
.viewer__stage { position: relative; margin: 0; aspect-ratio: 5 / 4; border-radius: var(--radius-md); background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-rule); overflow: hidden; }
.viewer__stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; }
.viewer__stage canvas:active { cursor: grabbing; }
.viewer__hint { position: absolute; inset-inline-start: var(--space-md); bottom: var(--space-sm); font-size: var(--text-xs); color: var(--color-neutral); pointer-events: none; }

.viewer__controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-lg); }
.choice { margin: 0; padding: 0; border: 0; min-width: 0; }
.choice legend { padding: 0; margin-bottom: var(--space-xs); font-size: var(--text-sm); font-weight: 600; }
.choice__row { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }

.swatch, .chip { position: relative; display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 2.4rem; padding-block: 0; padding-inline: var(--space-xs) var(--space-sm); border: 1.5px solid var(--color-rule); border-radius: var(--radius-pill); background: var(--color-paper); font-size: var(--text-sm); white-space: nowrap; cursor: pointer; transition: border-color var(--dur-short) var(--ease-out); }
.chip { padding: 0 var(--space-md); }
.swatch input, .chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.swatch span { width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--sw); border: 1px solid var(--color-rule); }
.swatch:hover, .chip:hover { border-color: var(--color-neutral); }
.swatch:has(input:checked), .chip:has(input:checked) { border-color: var(--color-ink); font-weight: 600; }
.swatch:has(input:focus-visible), .chip:has(input:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 2px; }

.btn--ghost { background: transparent; color: var(--color-ink); min-height: 2.4rem; padding: 0 var(--space-md); font-size: var(--text-sm); }
.btn--ghost[aria-pressed="true"] { background: var(--color-ink); color: var(--color-paper); }

.no-webgl .viewer__stage { display: none; }
.no-webgl .viewer__controls { display: none; }

@media (max-width: 899px) {
  .p-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .viewer__stage { aspect-ratio: 1 / 1; }
}

/* ---------- Uses ---------- */
.uses { padding: var(--space-3xl) 0 var(--space-4xl); }
/* Where it goes: one seamless pour split into coloured zones, the way a
   wet-pour site is laid out. The zones touch; there are no gaps or tiles. */
.pour {
  list-style: none; margin: var(--space-2xl) 0 0; padding: 0;
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr) minmax(0, 5fr) minmax(0, 6fr);
  border-radius: 2.5rem 0.75rem 3rem 1rem; overflow: hidden;
}
.pour li {
  --flecks: radial-gradient(var(--mat-fleck-a) 0.8px, transparent 1.2px), radial-gradient(var(--fleck-2) 0.8px, transparent 1.2px);
  min-height: 17rem; padding: var(--space-xl) var(--space-lg); display: flex; flex-direction: column; justify-content: flex-end; gap: var(--space-xs);
  background-color: var(--zone); background-image: var(--flecks); background-size: 17px 15px, 23px 19px; background-position: 0 0, 7px 5px; color: var(--mat-line);
}
.pour li:nth-child(1) { --zone: var(--mat-epdm-yellow); --fleck-2: var(--mat-epdm); color: var(--color-ink); }
.pour li:nth-child(2) { --zone: var(--mat-epdm-deep); --fleck-2: var(--mat-epdm-2); }
.pour li:nth-child(3) { --zone: var(--mat-green-deep); --fleck-2: var(--mat-epdm-yellow); }
.pour li:nth-child(4) { --zone: var(--mat-red-deep); --fleck-2: var(--mat-epdm-yellow); }
.pour h3 { font-size: var(--text-xl); line-height: 1.1; max-width: 12ch; }
.pour p { max-width: 30ch; font-size: var(--text-sm); line-height: 1.5; }
@media (max-width: 1023px) { .pour { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pour li { min-height: 13rem; } }
@media (max-width: 559px) { .pour { grid-template-columns: minmax(0, 1fr); border-radius: 1.75rem 0.75rem 2rem 1rem; } .pour li { min-height: 0; padding-top: var(--space-2xl); } }

/* ---------- Cross-section ---------- */
.layers { background: var(--color-ink); color: var(--color-paper); padding: var(--space-4xl) 0; border-top: var(--rule-thick) solid var(--color-accent); }
.layers .section__lead { color: var(--color-ink-muted); }
.layers__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-2xl) var(--space-3xl); align-items: center; }
.section-cut { list-style: none; margin: 0; padding: 0; border-radius: var(--radius-md); overflow: hidden; }
.section-cut__layer { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); gap: var(--space-lg); align-items: center; padding: var(--space-lg); }
.section-cut__layer h3 { font-size: var(--text-lg); }
.section-cut__layer p { font-size: var(--text-sm); }
.section-cut__layer--wear { background: var(--mat-epdm); color: var(--mat-line); min-height: 5rem; }
.section-cut__layer--pad { background: var(--mat-sbr); color: var(--mat-line); min-height: 8rem; background-image: radial-gradient(var(--color-ink-rule) 1px, transparent 1.4px); background-size: 7px 7px; }
.section-cut__layer--base { background: var(--mat-base); color: var(--color-ink); min-height: 6rem; }
@media (max-width: 899px) { .layers__grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 479px) { .section-cut__layer { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); } }

/* ---------- Spec ---------- */
/* What you choose: set out like the colour card we bring to the site visit,
   a navy board with a punched sample strip and dashed cut lines. */
.choose { padding: var(--space-4xl) 0; background: var(--color-ink); color: var(--color-paper); }
.choose .section__title { color: var(--color-paper); }
.card-spec { margin: var(--space-2xl) 0 0; border-top: 2px solid var(--color-accent); }
.card-spec div { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: var(--space-xl); padding-block: var(--space-lg); border-bottom: 1.5px dashed var(--color-ink-rule); }
.card-spec dt { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; line-height: 1.1; color: var(--color-accent); }
.card-spec dd { margin: 0; max-width: 56ch; color: var(--color-ink-muted); }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-md); }
.chips i {
  width: 3.25rem; height: 3.25rem; border-radius: 50%; background-color: var(--c);
  background-image: radial-gradient(var(--mat-fleck-a) 1px, transparent 1.5px); background-size: 7px 6px;
  box-shadow: inset 0 0 0 2px var(--color-ink), 0 0 0 1.5px var(--color-ink-rule);
}
@media (max-width: 767px) { .card-spec div { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); } .chips i { width: 2.6rem; height: 2.6rem; } }

/* From survey to first play: the five steps painted as a hopscotch court
   on blue EPDM, played left to right, with 3 and 4 side by side. */
.method { padding: var(--space-4xl) 0; background: var(--color-paper-2); }
.hopscotch {
  list-style: none; margin: var(--space-2xl) 0 0; padding: var(--space-md); counter-reset: hop;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, auto));
  border-radius: var(--radius-md);
  background-color: var(--mat-court-deep); background-image: radial-gradient(var(--mat-epdm) 1px, transparent 1.5px); background-size: 8px 7px;
}
.hopscotch li {
  counter-increment: hop; position: relative; padding: 4.75rem var(--space-lg) var(--space-lg); min-height: 11rem;
  display: flex; flex-direction: column; justify-content: flex-end; color: var(--mat-line);
  outline: 3px solid var(--mat-line); outline-offset: -1.5px;
}
.hopscotch li::before {
  content: counter(hop); position: absolute; inset-block-start: var(--space-sm); inset-inline-start: var(--space-md);
  font-family: var(--font-outlier); font-size: 3.4rem; font-weight: 600; line-height: 1; color: var(--mat-line);
}
.hopscotch li:nth-child(1) { grid-row: 1 / 3; grid-column: 1; }
.hopscotch li:nth-child(2) { grid-row: 1 / 3; grid-column: 2; }
.hopscotch li:nth-child(3) { grid-row: 1; grid-column: 3; }
.hopscotch li:nth-child(4) { grid-row: 2; grid-column: 3; }
.hopscotch li:nth-child(5) { grid-row: 1 / 3; grid-column: 4; background: var(--color-accent); color: var(--color-ink); }
.hopscotch li:nth-child(5)::before { color: var(--color-ink); }
.hopscotch h3 { font-size: var(--text-xl); line-height: 1.1; }
.hopscotch li:nth-child(3), .hopscotch li:nth-child(4) { min-height: 0; }
.hopscotch p { margin-top: var(--space-xs); font-size: var(--text-sm); line-height: 1.5; max-width: 30ch; }
@media (max-width: 899px) {
  /* stand the court up the page: 1, 2, then 3|4, then 5 */
  .hopscotch { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; }
  .hopscotch li { min-height: 0; }
  .hopscotch li:nth-child(1), .hopscotch li:nth-child(2), .hopscotch li:nth-child(5) { grid-column: 1 / -1; grid-row: auto; }
  .hopscotch li:nth-child(3) { grid-column: 1; grid-row: auto; }
  .hopscotch li:nth-child(4) { grid-column: 2; grid-row: auto; }
}
@media (max-width: 479px) { .hopscotch li:nth-child(3), .hopscotch li:nth-child(4) { grid-column: 1 / -1; } }

/* ---------- Projects ---------- */
.p-projects { padding: var(--space-4xl) 0; }
.p-projects__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl) var(--space-3xl); }
.p-projects__figure { grid-column: 1 / -1; }
@media (max-width: 899px) { .p-projects__grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- FAQ ---------- */
.faq { padding: var(--space-3xl) 0 var(--space-4xl); background: var(--color-paper-2); }
.faq__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl) var(--space-3xl); align-items: start; }
.faq__list details { border-top: var(--rule-hair) solid var(--color-rule); }
.faq__list details:last-child { border-bottom: var(--rule-hair) solid var(--color-rule); }
.faq__list summary { display: flex; justify-content: space-between; gap: var(--space-md); padding-block: var(--space-md); font-weight: 600; font-size: var(--text-lg); cursor: pointer; list-style: none; }
.faq__list summary::-webkit-details-marker { display: none; }
.faq__list summary::after { content: "+"; font-family: var(--font-outlier); color: var(--color-accent-text); transition: transform var(--dur-short) var(--ease-out); }
.faq__list details[open] summary::after { transform: rotate(45deg); }
.faq__list summary:hover { color: var(--color-muted); }
.faq__list details p { padding-bottom: var(--space-lg); max-width: 60ch; color: var(--color-muted); }
@media (max-width: 899px) { .faq__grid { grid-template-columns: minmax(0, 1fr); } }