/* ==========================================================================
   Components
   ========================================================================== */

/* ---- buttons ---- */
.cryo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .7rem 1.35rem;
  border: 2px solid transparent;
  border-radius: var(--cryo-radius);
  font-family: var(--cryo-font-sans);
  font-size: var(--cryo-fs-sm);
  font-weight: 600;
  letter-spacing: var(--cryo-track-mid);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--cryo-dur) var(--cryo-ease),
              border-color var(--cryo-dur) var(--cryo-ease),
              color var(--cryo-dur) var(--cryo-ease),
              transform var(--cryo-dur) var(--cryo-ease);
}
.cryo-btn--lg { padding: .95rem 1.75rem; font-size: var(--cryo-fs-base); }

/* Uses teal-deep, not teal. White on --cryo-teal measures 3.32:1, and a 15px 600-weight
   button label is "normal" text under WCAG, not large — so it needs 4.5:1, not 3:1.
   Caught by measuring the rendered page rather than by eye. */
.cryo-btn--primary { background: var(--cryo-teal-deep); border-color: var(--cryo-teal-deep); color: var(--cryo-white); }
.cryo-btn--primary:hover, .cryo-btn--primary:focus-visible {
  background: var(--cryo-navy-mid); border-color: var(--cryo-navy-mid); color: var(--cryo-white);
}

.cryo-btn--secondary { background: var(--cryo-navy); border-color: var(--cryo-navy); color: var(--cryo-white); }
.cryo-btn--secondary:hover { background: var(--cryo-navy-mid); border-color: var(--cryo-navy-mid); }

.cryo-btn--outline { background: transparent; border-color: var(--cryo-slate); color: var(--cryo-navy); }
.cryo-btn--outline:hover, .cryo-btn--outline:focus-visible {
  background: var(--cryo-navy); border-color: var(--cryo-navy); color: var(--cryo-white);
}

/* For use on the navy band, where teal-on-navy would be too quiet. */
.cryo-btn--oncontrast { background: var(--cryo-white); border-color: var(--cryo-white); color: var(--cryo-navy); }
.cryo-btn--oncontrast:hover, .cryo-btn--oncontrast:focus-visible {
  background: var(--cryo-teal-light); border-color: var(--cryo-teal-light); color: var(--cryo-navy);
}

.cryo-btn--quiet { background: none; border-color: transparent; color: var(--cryo-slate); text-decoration: underline; }
.cryo-btn--quiet:hover { color: var(--cryo-navy); }

.cryo-linkbutton {
  background: none; border: 0; padding: 0;
  font: inherit; font-size: var(--cryo-fs-xs);
  color: inherit; text-decoration: underline; cursor: pointer;
}

.cryo-actions { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ---- icons ---- */
.cryo-icon { display: inline-block; vertical-align: middle; flex: 0 0 auto; }

/* ---- pillars ---- */
.cryo-pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--cryo-s3);
  list-style: none;
  margin: 0; padding: 0;
}
.cryo-pillar {
  padding: var(--cryo-s3);
  background: var(--cryo-white);
  border: 1px solid var(--cryo-line);
  border-radius: var(--cryo-radius-lg);
  box-shadow: var(--cryo-shadow-sm);
}
.cryo-pillar__icon {
  display: inline-grid;
  place-items: center;
  width: 52px; height: 52px;
  margin-bottom: var(--cryo-s2);
  border: 1.5px solid var(--cryo-teal);
  border-radius: 50%;
  color: var(--cryo-teal);   /* icon, not text — 3:1 is the bar and teal clears it */
}
.cryo-pillar__title { font-size: var(--cryo-fs-h3); margin-bottom: .5rem; }
.cryo-pillar__text  { margin: 0; color: var(--cryo-navy-mid); }

/* ---- steps ---- */
.cryo-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--cryo-s3);
  list-style: none;
  margin: 0; padding: 0;
  counter-reset: cryo-step;
}
.cryo-step { position: relative; padding-top: var(--cryo-s3); border-top: 3px solid var(--cryo-teal-light); }
.cryo-step__num {
  display: block;
  font-family: var(--cryo-font-display);
  font-size: 2.25rem;
  font-weight: 300;
  line-height: 1;
  /* teal measured 2.86:1 on the tint background — just under the 3:1 large-text floor, and the
     number carries meaning (the order of the steps), so it is text, not decoration. */
  color: var(--cryo-teal-deep);
}
.cryo-step__icon { display: block; margin: .5rem 0; color: var(--cryo-slate); }
.cryo-step__title { font-size: var(--cryo-fs-lg); margin-bottom: .4rem; }
.cryo-step__text  { margin: 0; color: var(--cryo-navy-mid); font-size: var(--cryo-fs-sm); }

/* ---- closing CTA ---- */
.cryo-cta__inner { text-align: center; }
.cryo-cta__mark .cryo-logo { width: 76px; height: auto; margin: 0 auto var(--cryo-s2); }
.cryo-cta__title { margin-bottom: var(--cryo-s2); }
.cryo-cta__text { max-width: 46ch; margin: 0 auto var(--cryo-s3); color: rgba(255, 255, 255, .85); }

/* ---- cards ---- */
.cryo-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: var(--cryo-s3);
}
.cryo-card {
  display: flex;
  flex-direction: column;
  background: var(--cryo-white);
  border: 1px solid var(--cryo-line);
  border-radius: var(--cryo-radius-lg);
  overflow: hidden;
  box-shadow: var(--cryo-shadow-sm);
  transition: box-shadow var(--cryo-dur) var(--cryo-ease), transform var(--cryo-dur) var(--cryo-ease);
}
.cryo-card:hover { box-shadow: var(--cryo-shadow-md); transform: translateY(-2px); }
.cryo-card__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.cryo-card__body { padding: var(--cryo-s3); display: flex; flex-direction: column; flex: 1; }
.cryo-card__title { font-size: var(--cryo-fs-h3); margin-bottom: .4rem; }
.cryo-card__title a { color: var(--cryo-navy); text-decoration: none; }
.cryo-card__title a:hover { text-decoration: underline; }
.cryo-card__excerpt { color: var(--cryo-navy-mid); font-size: var(--cryo-fs-sm); flex: 1; }
.cryo-card__more { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; font-size: var(--cryo-fs-sm); text-decoration: none; }
.cryo-card__more:hover { text-decoration: underline; }

.cryo-meta { margin: 0 0 .6rem; color: var(--cryo-text-muted); font-size: var(--cryo-fs-xs); }

/* ---- prose ---- */
.cryo-prose > :first-child { margin-top: 0; }
.cryo-prose > :last-child  { margin-bottom: 0; }
.cryo-prose :is(h2, h3) { margin-top: var(--cryo-s4); }
.cryo-prose ul, .cryo-prose ol { padding-left: 1.35rem; }
.cryo-prose li + li { margin-top: .35rem; }
.cryo-prose--wide { max-width: none; }

.cryo-featured img { width: 100%; max-height: 460px; object-fit: cover; }

/* ---- breadcrumbs ---- */
.cryo-breadcrumbs ol { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0 0 var(--cryo-s2); padding: 0; font-size: var(--cryo-fs-xs); }
.cryo-breadcrumbs li + li::before { content: "/"; margin-right: .4rem; color: var(--cryo-line-strong); }
.cryo-breadcrumbs a { color: var(--cryo-slate); text-decoration: none; }
.cryo-breadcrumbs a:hover { text-decoration: underline; }
.cryo-breadcrumbs [aria-current] { color: var(--cryo-text-muted); }

/* ---- search ---- */
.cryo-search__label { display: block; font-size: var(--cryo-fs-sm); font-weight: 600; margin-bottom: .35rem; }
.cryo-search__row { display: flex; gap: .5rem; }
.cryo-search__input {
  flex: 1;
  padding: .65rem .8rem;
  border: 1px solid var(--cryo-line-strong);
  border-radius: var(--cryo-radius);
  font: inherit;
  background: var(--cryo-white);
  color: var(--cryo-text);
}

/* ---- forms ---- */
.cryo-field { margin-bottom: var(--cryo-s3); }
.cryo-field label { display: block; font-weight: 600; font-size: var(--cryo-fs-sm); margin-bottom: .3rem; }
.cryo-field input, .cryo-field select, .cryo-field textarea {
  width: 100%;
  padding: .65rem .8rem;
  border: 1px solid var(--cryo-line-strong);
  border-radius: var(--cryo-radius);
  font: inherit;
  background: var(--cryo-white);
  color: var(--cryo-text);
}
.cryo-field__hint { display: block; margin-top: .3rem; font-size: var(--cryo-fs-xs); color: var(--cryo-text-muted); }
.cryo-field--error input { border-color: #B32D2E; }

/* ---- notices ---- */
.cryo-notice {
  padding: var(--cryo-s2) var(--cryo-s3);
  border-left: 4px solid var(--cryo-slate);
  border-radius: 0 var(--cryo-radius) var(--cryo-radius) 0;
  background: var(--cryo-bg-tint);
  font-size: var(--cryo-fs-sm);
}
.cryo-notice--info    { border-left-color: var(--cryo-teal); }
.cryo-notice--warning { border-left-color: #BD8600; background: #FDF6E3; }
.cryo-notice--error   { border-left-color: #B32D2E; background: #FBEAEA; }

/* ---- pagination / post nav ---- */
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: var(--cryo-s4); }
.pagination .page-numbers {
  display: inline-grid; place-items: center;
  min-width: 2.4rem; padding: .45rem .6rem;
  border: 1px solid var(--cryo-line-strong);
  border-radius: var(--cryo-radius);
  text-decoration: none; color: var(--cryo-slate); background: var(--cryo-white);
}
.pagination .page-numbers.current { background: var(--cryo-navy); border-color: var(--cryo-navy); color: var(--cryo-white); }

.cryo-postnav .nav-links { display: grid; gap: var(--cryo-s2); grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); margin-top: var(--cryo-s4); }
.cryo-postnav a { display: block; padding: var(--cryo-s2); border: 1px solid var(--cryo-line); border-radius: var(--cryo-radius); text-decoration: none; }
.cryo-postnav__label { display: block; font-size: var(--cryo-fs-xs); text-transform: uppercase; letter-spacing: var(--cryo-track-wide); color: var(--cryo-text-muted); }

/* ---- consent banner ---- */
.cryo-consent {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 60;
  background: var(--cryo-white);
  border-top: 3px solid var(--cryo-teal);
  box-shadow: 0 -6px 28px rgba(4, 31, 65, .16);
}
.cryo-consent[hidden] { display: none; }

/* Reserve space so the fixed bar never permanently covers the footer. Uses :has() with a
   media-query-free fallback of nothing — if :has() is unsupported the bar still works, it
   just overlaps, which is the pre-existing behaviour rather than a regression. */
body:has(.cryo-consent[data-open="true"]) { padding-bottom: 16rem; }
@media (min-width: 48rem) {
  body:has(.cryo-consent[data-open="true"]) { padding-bottom: 12rem; }
}
.cryo-consent__inner {
  max-width: calc(var(--cryo-wide) + var(--cryo-gutter) * 2);
  margin-inline: auto;
  padding: var(--cryo-s3) var(--cryo-gutter);
}
.cryo-consent__title { font-size: var(--cryo-fs-lg); margin-bottom: .4rem; }
.cryo-consent__body { max-width: 70ch; font-size: var(--cryo-fs-sm); margin-bottom: var(--cryo-s2); }

/* Accept and Reject are the same size, weight and colour, side by side, at the first layer.
   The ICO has been explicit that making reject harder than accept is a dark pattern. */
.cryo-consent__actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }

.cryo-consent__detail {
  margin-top: var(--cryo-s3);
  padding-top: var(--cryo-s3);
  border-top: 1px solid var(--cryo-line);
  display: grid;
  gap: var(--cryo-s2);
}
.cryo-consent__detail[hidden] { display: none; }
.cryo-consent__cat p { margin: .2rem 0 0 1.7rem; font-size: var(--cryo-fs-xs); color: var(--cryo-text-muted); }
.cryo-consent__cat label { display: flex; align-items: center; gap: .6rem; font-size: var(--cryo-fs-sm); }
.cryo-consent__cat--fixed { opacity: .8; }
.cryo-consent__cat--fixed p { margin-left: 0; }

/* ==========================================================================
   Icon-led content blocks
   --------------------------------------------------------------------------
   These exist to break up long-form pages. The evidence, suitability and
   conditions pages are deliberately text-heavy — that is what makes them
   defensible — but a wall of 900 words does not get read, and an unread
   safety page protects nobody.

   Every one of these is icon + text. None of them is icon-only: the icon is
   decoration and is hidden from screen readers, so the meaning must survive
   with the icon removed. Check that before adding a new one.
   ========================================================================== */

/* ---- icon-led list: one point per row, icon in the margin ---- */
.cryo-iconlist { list-style: none; margin: var(--cryo-s3) 0; padding: 0; display: grid; gap: var(--cryo-s3); }
.cryo-iconlist__item { display: grid; grid-template-columns: 2.75rem 1fr; gap: var(--cryo-s2); align-items: start; }
.cryo-iconlist__icon {
  display: inline-grid; place-items: center;
  width: 2.75rem; height: 2.75rem;
  border-radius: 50%;
  background: var(--cryo-bg-tint);
  color: var(--cryo-teal-deep);
}
.cryo-iconlist__title { font-size: var(--cryo-fs-base); font-weight: 700; margin: .35rem 0 .2rem; }
.cryo-iconlist__text  { margin: 0; color: var(--cryo-navy-mid); }
.cryo-section--dark .cryo-iconlist__icon { background: rgba(255, 255, 255, .1); color: var(--cryo-teal-light); }
.cryo-section--dark .cryo-iconlist__text { color: rgba(255, 255, 255, .85); }

/* Tight variant for lists of many short items (the "see a doctor instead" list). */
.cryo-iconlist--tight { gap: var(--cryo-s2); }
.cryo-iconlist--tight .cryo-iconlist__item { grid-template-columns: 1.75rem 1fr; gap: .75rem; align-items: start; }
.cryo-iconlist--tight .cryo-iconlist__icon { width: 1.75rem; height: 1.75rem; background: none; }
.cryo-iconlist--tight .cryo-iconlist__text { margin: 0; }

/* ---- tiles: compact icon + label grid ---- */
.cryo-tiles {
  list-style: none; margin: var(--cryo-s3) 0; padding: 0;
  display: grid; gap: var(--cryo-s2);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.cryo-tile {
  display: flex; flex-direction: column; align-items: center; gap: .6rem;
  padding: var(--cryo-s2) .6rem;
  text-align: center;
  background: var(--cryo-white);
  border: 1px solid var(--cryo-line);
  border-radius: var(--cryo-radius-lg);
  font-size: var(--cryo-fs-xs);
  font-weight: 600;
  line-height: 1.3;
  color: var(--cryo-navy-mid);
}
.cryo-tile .cryo-icon { color: var(--cryo-teal); }
.cryo-section--dark .cryo-tile { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16); color: var(--cryo-white); }
.cryo-section--dark .cryo-tile .cryo-icon { color: var(--cryo-teal-light); }

/* ---- callout: an icon'd panel for the things people skim past ---- */
.cryo-callout {
  display: grid; grid-template-columns: 2rem 1fr; gap: var(--cryo-s2);
  margin: var(--cryo-s3) 0;
  padding: var(--cryo-s3);
  border: 1px solid var(--cryo-line);
  border-left: 4px solid var(--cryo-slate);
  border-radius: 0 var(--cryo-radius-lg) var(--cryo-radius-lg) 0;
  background: var(--cryo-bg-tint);
  font-size: var(--cryo-fs-sm);
}
.cryo-callout > .cryo-icon { margin-top: .1rem; color: var(--cryo-slate); }
.cryo-callout__body > :first-child { margin-top: 0; }
.cryo-callout__body > :last-child { margin-bottom: 0; }
.cryo-callout__title { font-size: var(--cryo-fs-base); margin-bottom: .3rem; }

.cryo-callout--info    { border-left-color: var(--cryo-teal-deep); }
.cryo-callout--info > .cryo-icon { color: var(--cryo-teal-deep); }
.cryo-callout--check   { border-left-color: #1E7A44; background: #EDF7F0; }
.cryo-callout--check > .cryo-icon { color: #1A6B3C; }
/* Amber, not red. This marks "read this before you book", not "danger" — and the
   contraindications list is long enough that a page of red panels stops registering. */
.cryo-callout--caution { border-left-color: #BD8600; background: #FDF6E3; }
.cryo-callout--caution > .cryo-icon { color: #8A6200; }
.cryo-callout--stop    { border-left-color: #B32D2E; background: #FBEAEA; }
.cryo-callout--stop > .cryo-icon { color: #962627; }

/* ---- key point: a single statement, given room ---- */
.cryo-keypoint {
  display: grid; justify-items: center; gap: var(--cryo-s2);
  margin: var(--cryo-s4) auto;
  padding: var(--cryo-s3) var(--cryo-s3) var(--cryo-s4);
  max-width: 34rem;
  text-align: center;
  border-top: 1px solid var(--cryo-line);
  border-bottom: 1px solid var(--cryo-line);
}
.cryo-keypoint .cryo-icon { color: var(--cryo-teal); }
.cryo-keypoint p {
  margin: 0;
  font-family: var(--cryo-font-display);
  font-size: var(--cryo-fs-lg);
  line-height: var(--cryo-lh-snug);
  color: var(--cryo-navy);
}
.cryo-section--dark .cryo-keypoint p { color: var(--cryo-white); }

/* ---- divider: the snowflake rule from the supplied artwork ---- */
.cryo-divider {
  display: flex; align-items: center; gap: var(--cryo-s2);
  margin: var(--cryo-s4) 0;
  color: var(--cryo-teal);
  border: 0;
}
.cryo-divider::before, .cryo-divider::after {
  content: ""; flex: 1; height: 1px; background: var(--cryo-line-strong);
}
.cryo-section--dark .cryo-divider { color: var(--cryo-teal-light); }
.cryo-section--dark .cryo-divider::before,
.cryo-section--dark .cryo-divider::after { background: rgba(255, 255, 255, .22); }

/* ---- stages: the four-stage row, numbered and icon'd ---- */
.cryo-stages {
  list-style: none; margin: var(--cryo-s3) 0; padding: 0;
  display: grid; gap: var(--cryo-s3);
  grid-template-columns: repeat(1, minmax(0, 1fr));
  counter-reset: cryo-stage;
}
.cryo-stage { counter-increment: cryo-stage; padding-top: var(--cryo-s2); border-top: 3px solid var(--cryo-teal-light); }
.cryo-stage__head { display: flex; align-items: center; gap: .6rem; margin-bottom: .4rem; color: var(--cryo-teal-deep); }
.cryo-stage__head::before {
  content: counter(cryo-stage);
  font-family: var(--cryo-font-display); font-size: 1.5rem; font-weight: 300; line-height: 1;
}
.cryo-stage__title { font-size: var(--cryo-fs-base); font-weight: 700; margin: 0 0 .25rem; }
.cryo-stage__text { margin: 0; font-size: var(--cryo-fs-sm); color: var(--cryo-navy-mid); }

@media (min-width: 34rem) {
  .cryo-tiles  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cryo-stages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Four across only where there is genuinely room for it -- inside the 40rem prose measure
   there is not, and 2x2 beats four cramped columns. */
@media (min-width: 62rem) {
  .cryo-stages--wide { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 32rem) {
  .cryo-iconlist__item { grid-template-columns: 2.25rem 1fr; }
  .cryo-iconlist__icon { width: 2.25rem; height: 2.25rem; }
}

/* ===========================================================================
   Front-page columns — the client's three, 24/09/2026
   Explicit 3-up rather than auto-fit: these are a set of three and a stray
   2 + 1 wrap reads as a mistake. Two up at tablet, one up on a phone.
   =========================================================================== */
.cryo-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--cryo-s4);
  list-style: none;
  margin: 0; padding: 0;
}
.cryo-column {
  display: flex;
  flex-direction: column;
  background: var(--cryo-white);
  border: 1px solid var(--cryo-line);
  border-radius: var(--cryo-radius-lg);
  box-shadow: var(--cryo-shadow-sm);
  overflow: hidden;   /* clips the photograph to the card's rounded corners */
}
.cryo-column__media {
  aspect-ratio: 5 / 3;   /* all three are cropped to this, so the row lines up */
  background: var(--cryo-bg-tint);
}
.cryo-column__img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
}
.cryo-column__title {
  font-size: var(--cryo-fs-h3);
  margin: var(--cryo-s3) var(--cryo-s3) .5rem;
}
.cryo-column__text {
  margin: 0 var(--cryo-s3) var(--cryo-s3);
  color: var(--cryo-navy-mid);
}

@media (max-width: 60rem) {
  .cryo-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 38rem) {
  .cryo-columns { grid-template-columns: minmax(0, 1fr); }
}

/* ===========================================================================
   "Is this right for me?" self-check
   =========================================================================== */
.cryo-check { margin-top: var(--cryo-s4); }
.cryo-check__q {
  border: 0;
  border-top: 1px solid var(--cryo-line);
  margin: 0; padding: var(--cryo-s3) 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--cryo-s2);
}
.cryo-check__q:first-of-type { border-top: 0; }
.cryo-check__legend {
  flex: 1 1 20rem;
  padding: 0;
  font-weight: 600;
  color: var(--cryo-text);
}
.cryo-check__opt {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .45rem .9rem;
  border: 1px solid var(--cryo-line-strong);
  border-radius: var(--cryo-radius);
  background: var(--cryo-white);
  cursor: pointer;
}
.cryo-check__opt:hover { border-color: var(--cryo-teal); }
.cryo-check__opt:focus-within {
  outline: var(--cryo-focus);
  outline-offset: var(--cryo-focus-offset);
}
.cryo-check__opt input { accent-color: var(--cryo-teal-deep); }

.cryo-check__actions { margin: var(--cryo-s3) 0 0; }
.cryo-check__error {
  margin: var(--cryo-s2) 0 0;
  color: #9b1c1c;      /* not a token: this is the only error colour in the theme */
  font-weight: 600;
}

.cryo-check__result {
  margin-top: var(--cryo-s4);
  padding: var(--cryo-s4);
  background: var(--cryo-white);
  border: 1px solid var(--cryo-line);
  border-left: 4px solid var(--cryo-teal);
  border-radius: var(--cryo-radius-lg);
}
.cryo-check__result:focus { outline: var(--cryo-focus); outline-offset: var(--cryo-focus-offset); }
.cryo-check__result-title { font-size: var(--cryo-fs-h3); margin: 0 0 .6rem; }
.cryo-check__result-text  { margin: 0 0 var(--cryo-s3); color: var(--cryo-navy-mid); }
.cryo-check__result-actions { margin: 0; }

.cryo-check__disclaimer,
.cryo-check__noscript {
  margin: var(--cryo-s3) 0 0;
  font-size: var(--cryo-fs-sm);
  color: var(--cryo-text-muted);
}

/* ===========================================================================
   Contact — details and form side by side
   =========================================================================== */
.cryo-contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: var(--cryo-s5);
  align-items: start;
  margin-top: var(--cryo-s4);
}
@media (max-width: 52rem) {
  .cryo-contact { grid-template-columns: minmax(0, 1fr); gap: var(--cryo-s4); }
}

.cryo-contact__line {
  display: flex;
  align-items: flex-start;
  gap: var(--cryo-s2);
  margin: 0 0 var(--cryo-s3);
}
.cryo-contact__icon { color: var(--cryo-teal-deep); flex: 0 0 auto; line-height: 0; }
.cryo-contact__value { font-size: var(--cryo-fs-lg); }

.cryo-form__row { margin: 0 0 var(--cryo-s3); display: grid; gap: .35rem; }
.cryo-form__row label { font-weight: 600; }
.cryo-form__opt { font-weight: 400; color: var(--cryo-text-muted); }
.cryo-form__row input,
.cryo-form__row textarea {
  width: 100%;
  padding: .6rem .75rem;
  font: inherit;
  color: var(--cryo-text);
  background: var(--cryo-white);
  border: 1px solid var(--cryo-line-strong);
  border-radius: var(--cryo-radius);
}
.cryo-form__row input:focus,
.cryo-form__row textarea:focus {
  outline: var(--cryo-focus);
  outline-offset: var(--cryo-focus-offset);
  border-color: var(--cryo-teal);
}
.cryo-form__note {
  margin: 0 0 var(--cryo-s3);
  font-size: var(--cryo-fs-sm);
  color: var(--cryo-text-muted);
}
.cryo-form__actions { margin: 0; }

/* Honeypot: off-screen rather than display:none, which some bots detect. */
.cryo-form__hp {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.cryo-notice {
  margin: 0 0 var(--cryo-s3);
  padding: var(--cryo-s3);
  border-radius: var(--cryo-radius);
  border: 1px solid var(--cryo-line);
}
.cryo-notice--ok  { background: var(--cryo-bg-tint); border-left: 4px solid var(--cryo-teal); }
.cryo-notice--bad { background: #fdf2f2; border-left: 4px solid #9b1c1c; }

/* Titles balance across lines so a two-word overhang does not shove one column's
   body copy a line lower than its neighbours. */
.cryo-column__title { text-wrap: balance; }

/* Align the three cards row by row — programme name, image, title, body — so a title
   that wraps to two lines does not push its body copy below its neighbours'. Subgrid
   where supported; the flex fallback above still stacks correctly everywhere else.

   FOUR rows, and the count matters: it has to equal the number of children a card
   renders. It was three, and adding the programme name above the image made it four,
   which pushed every child down a row and dropped the body copy on top of the title.
   A card with more children than the span does not wrap or scroll — it overlaps.

   All three columns carry a programme name or none of them do, so they stay aligned
   either way. A filter that gave one column a name and not the others would not. */
@supports (grid-template-rows: subgrid) {
  .cryo-columns { grid-template-rows: auto auto auto 1fr; }
  .cryo-column {
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
    row-gap: 0;          /* subgrid inherits the parent's gap; the card sets its own spacing */
  }
}

/* ===========================================================================
   Accordion — native <details>, used for the self-check at the top of
   Is it suitable for me?
   =========================================================================== */
.cryo-accordion {
  margin: 0 0 var(--cryo-s4);
  background: var(--cryo-bg-tint);
  border: 1px solid var(--cryo-line);
  border-radius: var(--cryo-radius-lg);
}
.cryo-accordion__summary {
  display: flex;
  align-items: center;
  gap: var(--cryo-s2);
  padding: var(--cryo-s3);
  font-size: var(--cryo-fs-lg);
  font-weight: 600;
  color: var(--cryo-navy);
  cursor: pointer;
  list-style: none;          /* Firefox */
}
.cryo-accordion__summary::-webkit-details-marker { display: none; }
.cryo-accordion__summary:focus-visible {
  outline: var(--cryo-focus);
  outline-offset: calc(var(--cryo-focus-offset) * -1);
  border-radius: var(--cryo-radius-lg);
}
.cryo-accordion__summary > svg { color: var(--cryo-teal-deep); flex: 0 0 auto; }
.cryo-accordion__label { flex: 1; }

/* Chevron drawn in CSS so there is no second icon to keep in step with the set. */
.cryo-accordion__summary::after {
  content: "";
  flex: 0 0 auto;
  width: .55rem; height: .55rem;
  margin-inline-start: auto;
  border-right: 2px solid var(--cryo-slate);
  border-bottom: 2px solid var(--cryo-slate);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--cryo-dur) var(--cryo-ease);
}
.cryo-accordion[open] .cryo-accordion__summary::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}

.cryo-accordion__body {
  padding: 0 var(--cryo-s3) var(--cryo-s3);
  border-top: 1px solid var(--cryo-line);
  padding-top: var(--cryo-s3);
}
.cryo-check__intro { margin: 0 0 var(--cryo-s2); color: var(--cryo-text-muted); }

@media (prefers-reduced-motion: reduce) {
  .cryo-accordion__summary::after { transition: none; }
}

/* ===========================================================================
   Public call-back booking — markup comes from cryo-booking's [cryo_callback]
   =========================================================================== */
.cryo-callback { max-width: 44rem; }
.cryo-callback__day {
  margin: var(--cryo-s4) 0 var(--cryo-s2);
  font-size: var(--cryo-fs-base);
  font-weight: 600;
  color: var(--cryo-navy);
}
.cryo-callback__times {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0; padding: 0;
  list-style: none;
}
/* Times are a grid of targets, not prose: give them a consistent width so the
   rows line up and a thumb has something predictable to aim at. */
.cryo-callback__times .cryo-btn {
  min-width: 5.5rem;
  justify-content: center;
  font-variant-numeric: tabular-nums;
}
.cryo-callback__privacy { margin-top: var(--cryo-s3); }
.cryo-callback__when {
  margin: 0 0 var(--cryo-s2);
  font-size: var(--cryo-fs-lg);
  font-weight: 600;
  color: var(--cryo-teal-deep);
}

/*
 * The programme name over each column.
 *
 * Above the photograph rather than over it: laid across the image it would need
 * a scrim to stay legible against three pictures with different exposures, and a
 * scrim over Mark's own photographs is a poor trade for a single word.
 */
.cryo-column__pillar {
  margin: 0;
  padding: var(--cryo-s2) var(--cryo-s3) calc(var(--cryo-s2) - .15rem);
  font-size: var(--cryo-fs-sm);
  font-weight: 700;
  letter-spacing: var(--cryo-track-wide);
  text-transform: uppercase;
  color: var(--cryo-teal);
  border-bottom: 1px solid var(--cryo-line);
  background: var(--cryo-white);
}