/* ==========================================================================
   Layout — shell, header, sections, footer
   ========================================================================== */

.cryo-shell {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--cryo-gutter);
}
.cryo-shell--content { max-width: calc(var(--cryo-content) + var(--cryo-gutter) * 2); }
.cryo-shell--wide    { max-width: calc(var(--cryo-wide)    + var(--cryo-gutter) * 2); }
.cryo-shell--full    { max-width: none; padding-inline: 0; }

.cryo-main { display: block; }
.cryo-main:focus { outline: none; }

/* ---- sections ---- */
.cryo-section { padding-block: var(--cryo-s5); }
.cryo-section--light { background: var(--cryo-bg); }
.cryo-section--tint  { background: var(--cryo-bg-tint); }
.cryo-section--dark  { background: var(--cryo-navy); color: var(--cryo-text-invert); }
.cryo-section--dark :is(h1,h2,h3,h4) { color: var(--cryo-white); }
.cryo-section--dark a:not(.cryo-btn) { color: var(--cryo-teal-light); }

.cryo-section__title { margin-bottom: var(--cryo-s3); }
.cryo-pagehead { padding-block: var(--cryo-s4); }
.cryo-pagetitle { margin-bottom: 0; }
.cryo-pagetitle__term { color: var(--cryo-slate); }

/* ---- header ----
 *
 * Scoped to the element, not the class alone. `cryo-` is a shared prefix across
 * the theme and the booking plugin, and a bare `.cryo-header` claims the name
 * for anything either of them renders. The plugin used it for the card header
 * inside the client portal, which inherited position:sticky and pinned itself
 * over the page while everything scrolled behind it. The plugin's class has
 * been renamed, and this is scoped so the next collision cannot do it again.
 */
header.cryo-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--cryo-bg) 88%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--cryo-line);
}
@supports not (backdrop-filter: blur(10px)) {
  header.cryo-header { background: var(--cryo-bg); }
}

.cryo-header__inner {
  display: flex;
  align-items: center;
  gap: var(--cryo-s3);
  min-height: 72px;
  padding-block: .6rem;
}
.cryo-header__brand { flex: 0 0 auto; }
.cryo-logo-link { display: inline-block; line-height: 0; }
.cryo-logo--horizontal { width: auto; height: 44px; }
.cryo-logo--stacked    { width: auto; height: 52px; }
.cryo-logo--mark       { width: auto; height: 44px; }

@media (max-width: 30rem) {
  /* Below ~480px the wordmark stops being legible next to a hamburger, so trade it for
     more room rather than shrinking it further. */
  .cryo-logo--horizontal { height: 38px; }
}

/* ---- primary nav ---- */
.cryo-nav { margin-left: auto; display: flex; align-items: center; gap: var(--cryo-s3); }

.cryo-nav__list {
  --cryo-nav-gap: clamp(.75rem, 2vw, 1.6rem);
  display: flex;
  align-items: center;
  gap: var(--cryo-nav-gap);
  margin: 0; padding: 0;
  list-style: none;
}

/* Hairline divider between menu items, centred in the gap so the spacing either side
   stays even. Pseudo-element rather than a border, because a border would sit hard
   against the following link and push the row off-centre. Decorative only — it is not
   in the accessibility tree and screen readers never announce it. */
.cryo-nav__list > li { position: relative; }
.cryo-nav__list > li + li::before {
  content: "";
  position: absolute;
  left: calc(var(--cryo-nav-gap) / -2);
  top: 50%;
  width: 1px;
  height: 1em;
  transform: translateY(-50%);
  background: var(--cryo-line-strong);
}
.cryo-nav__list a {
  display: inline-block;
  padding: .4rem 0;
  color: var(--cryo-navy);
  font-size: var(--cryo-fs-sm);
  font-weight: 500;
  letter-spacing: var(--cryo-track-mid);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.cryo-nav__list a:hover,
.cryo-nav__list a:focus-visible { border-bottom-color: var(--cryo-teal); }
.cryo-nav__list .current-menu-item > a,
.cryo-nav__list a[aria-current="page"] { border-bottom-color: var(--cryo-teal); color: var(--cryo-navy); }
.cryo-nav__list--placeholder { opacity: .55; }

.cryo-nav__actions { display: flex; align-items: center; gap: .6rem; }

/*
 * Account button and its log-out, stacked as one unit so the log-out reads as
 * belonging to the button above it rather than as a third item in the row.
 */
.cryo-nav__account { display: flex; flex-direction: column; align-items: stretch; gap: .25rem; }
.cryo-nav__signout {
  color: var(--cryo-text-muted);
  font-size: var(--cryo-fs-xs);
  text-align: center;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  align-self: center;
}
.cryo-nav__signout:hover,
.cryo-nav__signout:focus-visible { border-bottom-color: var(--cryo-teal); }

/*
 * The signed-out route back to an existing account. Deliberately not a button
 * — it sits beside the booking call to action and must not compete with it.
 */
.cryo-nav__signin {
  color: var(--cryo-navy);
  font-size: var(--cryo-fs-sm);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  padding-block: .15rem;
}
.cryo-nav__signin:hover,
.cryo-nav__signin:focus-visible { border-bottom-color: var(--cryo-teal); }

/* ---- mobile nav ---- */
.cryo-navtoggle {
  display: none;
  margin-left: auto;
  align-items: center;
  gap: .55rem;
  padding: .55rem .8rem;
  background: none;
  border: 1px solid var(--cryo-line-strong);
  border-radius: var(--cryo-radius);
  color: var(--cryo-navy);
  font: inherit;
  font-size: var(--cryo-fs-sm);
  cursor: pointer;
}
.cryo-navtoggle__bars { display: grid; gap: 4px; }
.cryo-navtoggle__bars span {
  display: block; width: 20px; height: 2px;
  background: currentColor; border-radius: 2px;
  transition: transform var(--cryo-dur) var(--cryo-ease), opacity var(--cryo-dur) var(--cryo-ease);
}
.cryo-navtoggle[aria-expanded="true"] .cryo-navtoggle__bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.cryo-navtoggle[aria-expanded="true"] .cryo-navtoggle__bars span:nth-child(2) { opacity: 0; }
.cryo-navtoggle[aria-expanded="true"] .cryo-navtoggle__bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 60rem) {
  .cryo-header__inner { position: relative; flex-wrap: wrap; }
  .cryo-nav {
    width: 100%;
    margin-left: 0;
    flex-direction: column;
    align-items: stretch;
    gap: var(--cryo-s2);
    padding-block: var(--cryo-s2) var(--cryo-s3);
  }
  .cryo-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .cryo-nav__list li + li { border-top: 1px solid var(--cryo-line); }
  /* Stacked menu: the horizontal rule between rows does this job instead. */
  .cryo-nav__list > li + li::before { content: none; }
  .cryo-nav__list a { padding: .85rem 0; }
  .cryo-nav__actions { flex-direction: column; align-items: stretch; }

  /*
   * Stacked, it goes last. On the wide header it reads left of the booking
   * button, where the eye reaches it on the way in; in a vertical menu the
   * same position would put a quiet text link above the primary action.
   */
  .cryo-nav__signout { padding-block: .5rem; }

  .cryo-nav__signin {
    order: 99;
    padding-block: .85rem;
    border-top: 1px solid var(--cryo-line);
    border-bottom: 0;
    text-align: center;
  }
  .cryo-nav__signin:hover,
  .cryo-nav__signin:focus-visible { color: var(--cryo-teal); border-bottom-color: transparent; }

  /*
   * Progressive enhancement. WITHOUT JavaScript the toggle button is hidden and the menu simply
   * sits in the flow below the logo — long, but completely usable. Only once JS has confirmed it
   * is running (html.cryo-js) does the menu become a collapsible overlay.
   *
   * Doing it the other way round means a JS failure leaves the menu permanently expanded across
   * the hero, or worse, permanently hidden with no way to open it.
   */
  .cryo-navtoggle { display: none; }
  .cryo-js .cryo-navtoggle { display: inline-flex; }

  .cryo-js .cryo-nav {
    position: absolute;
    inset: 100% 0 auto 0;
    width: auto;
    padding: var(--cryo-s3) var(--cryo-gutter) var(--cryo-s4);
    background: var(--cryo-bg);
    border-bottom: 1px solid var(--cryo-line);
    box-shadow: var(--cryo-shadow-md);
    z-index: 5;
  }
  .cryo-nav[hidden] { display: none; }
}

/* ---- hero ---- */
.cryo-hero {
  position: relative;
  background-color: var(--cryo-bg-tint);
  background-image: url("../img/bg-hero.svg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /*
   * Asymmetric, and deliberately so. Equal padding top and bottom put about a
   * hundred pixels of empty gradient between the header and the first word on
   * the page — on a tall header, which this one is once the menu wraps, the
   * page appeared to open on nothing. The space below the hero is doing useful
   * work separating it from the columns; the space above it was not.
   */
  padding-block: clamp(.75rem, 1.5vw, 1.25rem) clamp(3rem, 8vw, 6.5rem);
}
/*
 * The copy column takes more of the width than it did. Measured against a
 * 1280×631 laptop window: the headline is the same size it was at this
 * breakpoint, but on a wider measure it sets in three lines rather than four,
 * and that one line is most of what was pushing the buttons under the fold.
 */
.cryo-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, .55fr);
  align-items: center;
  gap: var(--cryo-s4);
}
.cryo-hero__eyebrow {
  margin: 0 0 var(--cryo-s2);
  color: var(--cryo-slate);
  font-size: var(--cryo-fs-sm);
  font-weight: 600;
  letter-spacing: var(--cryo-track-wide);
  text-transform: uppercase;
}
/*
 * Sized so the call to action is on the first screen.
 *
 * The whole point of the hero is the two buttons under it, and on a laptop
 * they were 150px below the fold — a visitor had to scroll before being
 * offered anything. Set here rather than on the global h1: every other page's
 * heading is fine as it is, and this one is carrying a much longer sentence.
 *
 * 32ch is the measure that matters more than the size. At 16ch the headline
 * broke into four short lines; widening it sets the same words at the same
 * size in three, which is where most of the saved height comes from.
 */
.cryo-hero__title {
  margin-bottom: .75rem;
  max-width: 32ch;
  font-size: clamp(1.6rem, 2.9vw, 2.25rem);
}
/*
 * teal-deep, not teal. The hero sits on a gradient that runs into --cryo-bg-tint,
 * and #159BAE measures 2.86:1 against it — under the 3:1 bar even at this size.
 * #107684 is 4.58:1 on the tint and 5.18:1 at the light end, so it holds up
 * wherever on the gradient a given viewport happens to put the word.
 *
 * A little heavier than the 300 the headline is set in: capitals at 300 read as
 * thinner than the sentence around them, which is the opposite of emphasis.
 */
.cryo-hero__accent { color: var(--cryo-teal-deep); font-weight: 500; }

.cryo-hero__lede {
  max-width: 62ch;
  margin-bottom: .85rem;
  font-size: 1rem;
  color: var(--cryo-navy-mid);
}
.cryo-hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: .6rem; }
.cryo-hero__fineprint { margin: 0; color: var(--cryo-text-muted); font-size: var(--cryo-fs-sm); }
/*
 * Aligned to the top of the copy rather than to its middle. Centred against a
 * headline, a lede, two buttons and a line of small print, the logo sat level
 * with the buttons — a long way down a tall hero, and below the fold on a
 * laptop. It is the first thing on the page that says whose site this is, so
 * it belongs level with the first line of text.
 */
.cryo-hero__mark { justify-self: center; align-self: start; }
.cryo-hero__mark .cryo-logo { width: min(320px, 100%); height: auto; }

@media (max-width: 52rem) {
  .cryo-hero__inner { grid-template-columns: 1fr; }
  .cryo-hero__mark { display: none; }   /* decorative — no information lost */
}

/* ---- footer ---- */
.cryo-footer {
  background: var(--cryo-navy);
  color: var(--cryo-text-invert);
  padding-block: var(--cryo-s5) var(--cryo-s3);
}
.cryo-footer a:not(.cryo-btn) { color: var(--cryo-teal-light); }
.cryo-footer a:not(.cryo-btn):hover,
.cryo-footer a:not(.cryo-btn):focus-visible { color: var(--cryo-white); }

.cryo-footer__top {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--cryo-s4);
  padding-bottom: var(--cryo-s4);
  border-bottom: 1px solid rgba(255, 255, 255, .15);
}
.cryo-footer__brand .cryo-logo { height: 84px; width: auto; }
.cryo-footer__tagline {
  margin: var(--cryo-s2) 0 0;
  color: var(--cryo-teal-light);
  font-size: var(--cryo-fs-sm);
  letter-spacing: var(--cryo-track-wide);
  text-transform: uppercase;
}
.cryo-footer__heading { font-size: var(--cryo-fs-lg); margin-bottom: var(--cryo-s2); }
.cryo-footer__note { color: rgba(255, 255, 255, .78); font-size: var(--cryo-fs-sm); }
.cryo-footer__line {
  margin: 0 0 .35rem;
  color: rgba(255, 255, 255, .82);
  font-size: var(--cryo-fs-sm);
}
.cryo-footer__line a { color: inherit; }

.cryo-footer__list, .cryo-footer__legallist { list-style: none; margin: 0; padding: 0; }
.cryo-footer__list li { margin-bottom: .5rem; }
.cryo-footer__list a, .cryo-footer__legallist a { text-decoration: none; }
.cryo-footer__list a:hover, .cryo-footer__legallist a:hover { text-decoration: underline; }

.cryo-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--cryo-s2) var(--cryo-s3);
  padding-top: var(--cryo-s3);
}
/* Two rights holders, stacked: the client owns the brand and content, Eazi IT owns the
   design and code. The agency credit sits apart from both so it reads as a credit, not a
   claim over the client's material. */
.cryo-footer__rights { display: grid; gap: .2rem; }
.cryo-footer__copy { margin: 0; font-size: var(--cryo-fs-xs); color: rgba(255, 255, 255, .7); }
.cryo-footer__credit {
  margin: 0;
  font-size: var(--cryo-fs-xs);
  letter-spacing: var(--cryo-track-mid);
  color: rgba(255, 255, 255, .8);
}
.cryo-footer__credit a {
  color: var(--cryo-teal-light);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(132, 191, 202, .45);
}
.cryo-footer__credit a:hover,
.cryo-footer__credit a:focus-visible { color: var(--cryo-white); border-bottom-color: currentColor; }
.cryo-footer__legalnav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cryo-s2); }
.cryo-footer__legallist { display: flex; flex-wrap: wrap; gap: var(--cryo-s2); font-size: var(--cryo-fs-xs); }