/* NA website: base styles and components. Values come from tokens.css; this file holds no raw colours.
   Selectors are single classes where possible, so components do not fight each other. */

@import url("tokens.css");

@font-face {
  font-family: "NA Roboto";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/roboto-latin-wght-normal.woff2") format("woff2-variations"),
    url("../fonts/roboto-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Base ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-white);
  color: var(--color-graphite);
  font-family: var(--font-text);
  font-size: var(--step-18);
  font-weight: var(--weight-text);
  line-height: var(--leading-text);
  font-kerning: normal;
  overflow-wrap: break-word;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  text-wrap: balance;
}

p,
ul,
ol {
  margin: 0;
}

img,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Type roles ---------- */

.display,
.h1,
.h2,
.h3,
.h4 {
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  text-wrap: balance;
}

.display {
  font-size: clamp(var(--step-36), 3.2vw + 1.2rem, var(--step-60));
  line-height: 1.05;
}

.h1 {
  font-size: clamp(var(--step-36), 1.6vw + 1.6rem, var(--step-48));
}

.h2 {
  font-size: clamp(var(--step-24), 1.6vw + 1rem, var(--step-36));
}

.h3 {
  font-size: var(--step-24);
}

.h4 {
  font-size: var(--step-21);
  line-height: 1.3;
}

.lead {
  font-size: var(--step-21);
  line-height: 1.5;
  max-width: var(--measure);
}

.prose {
  max-width: var(--measure);
}

.prose > * + * {
  margin-top: var(--space-4);
}

.small {
  font-size: var(--step-16);
  line-height: 1.5;
}

.caption {
  font-size: var(--step-14);
  line-height: 1.45;
  color: var(--color-steel);
}

.link,
.prose a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--color-red);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.22em;
}

.link:hover,
.prose a:hover {
  color: var(--color-red);
}

/* ---------- Page frame ---------- */

.page {
  width: 100%;
  max-width: calc(var(--page-max) + 2 * var(--page-margin));
  margin-inline: auto;
  padding-inline: var(--page-margin);
}

.page--narrow {
  max-width: calc(44rem + 2 * var(--page-margin));
  padding-block: var(--space-8);
}

.section {
  padding-block: var(--space-8);
}

.section + .section {
  padding-top: 0;
}

.stack > * + * {
  margin-top: var(--space-5);
}

/* Header: logo at the left, the page names at the right; they wrap under the logo on phones. */
.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4) var(--space-6);
  padding-block: var(--space-5);
}

.brand {
  display: block;
  flex: none;
}

.brand img {
  width: auto;
  height: 3.25rem;
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  padding: 0;
  list-style: none;
}

.site-nav a {
  display: inline-block;
  padding-block: var(--space-1);
  color: var(--color-graphite);
  font-size: var(--step-16);
  font-weight: var(--weight-strong);
  text-decoration: none;
}

.site-nav a:hover {
  color: var(--color-red);
}

.site-nav a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-color: var(--color-red);
  text-decoration-thickness: 3px;
  text-underline-offset: 0.45em;
}

/* Footer: a silver band; contact lines on every page (content plan v2 section 4). */
.site-footer {
  margin-top: var(--space-9);
  background: var(--color-silver);
  padding-block: var(--space-7);
  font-size: var(--step-16);
  line-height: 1.5;
}

.site-footer__grid {
  display: grid;
  gap: var(--space-5) var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

.site-footer__title {
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-size: var(--step-16);
  letter-spacing: var(--tracking-heading);
  margin-bottom: var(--space-2);
}

/* ---------- Buttons ---------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--control-height);
  padding: var(--space-3) var(--space-5);
  border: 2px solid var(--color-red);
  border-radius: var(--radius-control);
  background: var(--color-red);
  color: var(--color-white);
  font: inherit;
  font-size: var(--step-18);
  font-weight: var(--weight-strong);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}

.button:hover,
.button.is-hover {
  background: var(--color-red-pressed);
  border-color: var(--color-red-pressed);
}

.button:active {
  background: var(--color-red-pressed);
}

.button.is-focus {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.button--secondary {
  background: var(--color-white);
  border-color: var(--color-graphite);
  color: var(--color-graphite);
}

.button--secondary:hover,
.button--secondary.is-hover {
  background: var(--color-silver);
  border-color: var(--color-graphite);
}

.button:disabled,
.button[aria-disabled="true"] {
  background: var(--color-silver);
  border-color: var(--color-silver);
  color: var(--color-steel);
  cursor: not-allowed;
}

@media (max-width: 479px) {
  .button--block-phone {
    width: 100%;
  }
}

/* ---------- Form controls ---------- */

.form {
  max-width: 40rem;
}

.field + .field {
  margin-top: var(--space-5);
}

.field__label {
  display: block;
  margin-bottom: var(--space-1);
  font-size: var(--step-16);
  font-weight: var(--weight-strong);
  line-height: 1.4;
}

.field__optional {
  color: var(--color-steel);
  font-weight: var(--weight-text);
}

.field__hint {
  margin-bottom: var(--space-2);
  color: var(--color-steel);
  font-size: var(--step-16);
  line-height: 1.45;
}

.field__error {
  margin-bottom: var(--space-2);
  color: var(--color-red);
  font-size: var(--step-16);
  font-weight: var(--weight-strong);
  line-height: 1.45;
}

.field__error[hidden] {
  display: none;
}

.field.is-invalid {
  padding-left: var(--space-4);
  border-left: 4px solid var(--color-red);
}

.control {
  display: block;
  width: 100%;
  min-height: var(--control-height);
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-control);
  background: var(--color-white);
  color: var(--color-graphite);
  font: inherit;
  font-size: var(--step-18);
  line-height: 1.4;
}

.control:hover {
  border-color: var(--color-graphite);
}

.control:focus-visible,
.control.is-focus {
  outline: var(--focus-ring);
  outline-offset: 0;
  border-color: var(--color-graphite);
}

.control[aria-invalid="true"] {
  border: 2px solid var(--color-red);
}

.control--select {
  appearance: none;
  padding-right: var(--space-8);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%231D1F22' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
}

.control--textarea {
  min-height: 10rem;
  resize: vertical;
}

.form__check {
  margin-top: var(--space-6);
}

.form__actions {
  margin-top: var(--space-5);
}

/* ---------- Messages ---------- */

.message {
  max-width: 40rem;
  padding: var(--space-4) var(--space-5);
  border-left: 6px solid var(--color-graphite);
  background: var(--color-silver);
}

.message--error {
  border-left-color: var(--color-red);
}

.message__title {
  font-weight: var(--weight-strong);
}

.message[hidden] {
  display: none;
}

/* The notice block: the privacy notice beside the form. */
.notice {
  max-width: 40rem;
  padding: var(--space-5);
  background: var(--color-silver);
  font-size: var(--step-16);
  line-height: 1.5;
}

/* A visible gap in the words, waiting for its owner. Never shipped. It keeps the colour, face and weight of
   the text it stands in for, so a review build still shows the real design; the tint, the dashed red
   underline and the brackets mark it. */
.placeholder {
  background: var(--color-red-tint);
  color: inherit;
  font-weight: inherit;
  text-decoration: underline dashed var(--color-red);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding-inline: 0.1em;
}

/* ---------- The shield grid ----------
   Four silver panels divided by a red cross: the logo's own geometry. The red is the grid's background,
   showing only through the gaps, so the cross is exact whatever the panels hold. On load the panels part and
   the cross opens out from nothing; with reduced motion it is simply there. */

.shield-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--cross);
  background: var(--color-red);
  animation: shield-open var(--motion-open) cubic-bezier(0.2, 0.7, 0.2, 1) 150ms both;
}

@media (min-width: 520px) {
  .shield-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.shield-grid__panel {
  min-height: 11rem;
  padding: var(--space-6) var(--space-5);
  background: var(--color-silver);
}

@media (min-width: 900px) {
  .shield-grid__panel {
    min-height: 14rem;
    padding: var(--space-7) var(--space-6);
  }
}

.shield-grid__panel > * + * {
  margin-top: var(--space-3);
}

@keyframes shield-open {
  from {
    gap: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .shield-grid {
    animation: none;
  }
}

/* ---------- Sequence: a real order of steps, so it is numbered ---------- */

.sequence {
  display: grid;
  gap: var(--space-5);
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.sequence__step {
  position: relative;
  padding-left: calc(2.5rem + var(--space-4));
  counter-increment: step;
}

.sequence__step::before {
  content: counter(step);
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 2px solid var(--color-graphite);
  background: var(--color-white);
  font-weight: var(--weight-strong);
  font-size: var(--step-16);
  font-variant-numeric: tabular-nums;
}

/* the line joining the steps */
.sequence__step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 2.5rem;
  bottom: calc(-1 * var(--space-5));
  left: calc(1.25rem - 1px);
  width: 2px;
  background: var(--color-graphite);
}

.sequence__title {
  font-weight: var(--weight-strong);
  line-height: 1.4;
  padding-top: 0.4rem;
}

@media (min-width: 900px) {
  .sequence {
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: var(--space-5);
  }

  .sequence__step {
    padding-left: 0;
    padding-top: calc(2.5rem + var(--space-4));
  }

  .sequence__step:not(:last-child)::after {
    top: calc(1.25rem - 1px);
    bottom: auto;
    left: 2.5rem;
    right: calc(-1 * var(--space-5));
    width: auto;
    height: 2px;
  }

  .sequence__title {
    padding-top: 0;
  }
}

/* ---------- Page sections ----------
   Moved, rule for rule and in the same order, from the approved preview's own style block
   (preview/preview.template.html, sha256 86ff592c, built into the preview Joe approved, sha256 152358f1), so the
   site pages and the preview share one source. .page-body stands in for the preview's .view spacing. */

.page-body { padding-bottom: var(--space-4); }
.hero { padding-block: var(--space-8) var(--space-7); }
.hero .lead, .hero .registration { margin-top: var(--space-5); }
.hero__actions { margin-top: var(--space-6); }
.registration { max-width: var(--measure); font-size: var(--step-16); line-height: 1.5; color: var(--color-steel); }
.registration strong { color: var(--color-graphite); font-weight: var(--weight-strong); }
.facts { display: grid; gap: var(--space-5) var(--space-6); grid-template-columns: 1fr; padding: 0; list-style: none; margin-top: var(--space-6); }
@media (min-width: 900px) { .facts { grid-template-columns: repeat(3, 1fr); } }
.facts li { padding-top: var(--space-4); border-top: 2px solid var(--color-graphite); }
.block + .block { margin-top: var(--space-7); }
.block > * + * { margin-top: var(--space-3); }
.page-head { padding-block: var(--space-8) var(--space-6); }
.page-head .lead { margin-top: var(--space-4); }
.meta-line { margin-top: var(--space-3); color: var(--color-steel); font-size: var(--step-16); }
.ref-table { width: 100%; border-collapse: collapse; font-size: var(--step-16); line-height: 1.45; }
.ref-table th, .ref-table td { text-align: left; vertical-align: top; padding: var(--space-3) var(--space-4) var(--space-3) 0; border-bottom: 1px solid var(--color-silver); }
.ref-table th { font-weight: var(--weight-strong); }
.table-scroll { max-width: 100%; overflow-x: auto; }
.table-scroll .ref-table { min-width: 36rem; }
.site-footer__list { padding: 0; list-style: none; }
.site-footer__list li + li { margin-top: var(--space-1); }
.site-nav a.nav-enquire { color: var(--color-red); }