/* ==========================================================================
   SignWave Hub — interpreter booking portal (book.signwavehub.co.uk)
   Tokens, base styles, buttons, header and footer are copied from the main website
   stylesheet (SignWave Hub Redesign/assets/css/main.css). Keep the two in step.
   1. Fonts
   2. Design tokens
   3. Base
   4. Layout and labels
   5. Buttons
   6. Header (white)
   7. Page hero (navy)
   8. Booking form
   9. Confirmation
   10. Information panel
   11. Footer (navy)
   12. Reduced motion
   ========================================================================== */

/* 1. Fonts — self-hosted, SIL Open Font License 1.1 (see assets/fonts/README.md)
   ========================================================================== */

@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-sans-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-sans-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("../fonts/atkinson-hyperlegible-next-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("../fonts/atkinson-hyperlegible-next-latin-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("../fonts/atkinson-hyperlegible-next-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* 2. Design tokens
   Contrast (WCAG 2.2): white on navy 15.97, soft white on navy 10.22, pink on navy 6.39,
   navy on pink 6.39, muted on white 7.61, muted on soft grey 7.08, input border on white 3.81,
   error red on white 6.5. Never used for text: pink on white.
   ========================================================================== */

:root {
  /* Brand */
  --navy: #14213d;
  --pink: #ff7a8a;
  --magenta: #ff38a6;
  --pink-deep: #d6336c;     /* pink for text on white: 4.62:1 */
  --gradient: linear-gradient(120deg, var(--pink), var(--magenta));

  /* Neutrals */
  --white: #ffffff;
  --grey: #f6f7f9;
  --line: #e3e6ec;
  --line-strong: #cfd4de;
  --field-border: #7a8396;
  --muted: #4a5468;
  --pink-tint: #fff5f6;
  --pink-tint-line: #ffdfe4;
  --on-navy: #ffffff;
  --on-navy-soft: #c9cfdb;
  --on-navy-line: rgb(255 255 255 / 0.14);

  /* Status */
  --error: #b42318;
  --error-bg: #fef3f2;
  --success: #05603a;
  --success-bg: #ecfdf3;

  /* Typography */
  --font-heading: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Atkinson Hyperlegible Next", "Helvetica Neue", Arial, sans-serif;

  --text-xs: 0.8125rem;                                    /* 13px */
  --text-sm: 0.9375rem;                                    /* 15px */
  --text-base: 1.0625rem;                                  /* 17px */
  --text-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);  /* 17–19px */
  --text-h3: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);   /* 17–19px */
  --text-h2: clamp(1.75rem, 1.4rem + 1.3vw, 2.5rem);       /* 28–40px */
  --text-page-title: clamp(2.125rem, 1.6rem + 2.2vw, 3.25rem);

  /* Spacing — 8px base */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4rem;

  --section-pad: clamp(3.25rem, 2.25rem + 3.2vw, 5.5rem);  /* 52–88px */
  --gutter: clamp(1rem, 0.6rem + 1.6vw, 2rem);             /* 16–32px */
  --container: 72rem;                                      /* 1152px */

  /* Shape */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgb(20 33 61 / 0.05);
  --shadow: 0 1px 2px rgb(20 33 61 / 0.04), 0 12px 32px -16px rgb(20 33 61 / 0.18);

  /* Header */
  --header-height: 4.25rem;
}

@media (min-width: 60rem) {
  :root {
    --header-height: 4.75rem;
  }
}

/* 3. Base
   ========================================================================== */

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

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--navy);
  background: var(--white);
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 600;
  color: inherit;
  text-wrap: balance;
}

h2 {
  font-size: var(--text-h2);
  line-height: 1.15;
  letter-spacing: -0.015em;
}

h3 {
  font-size: var(--text-h3);
  line-height: 1.3;
}

p {
  margin: 0;
  text-wrap: pretty;
}

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

img {
  height: auto;
}

ul,
ol {
  margin: 0;
  padding: 0;
}

a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-color: var(--magenta);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

a:hover {
  text-decoration-color: currentColor;
}

:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 3px;
}

/* Dark surfaces use a pink focus ring (6.39:1 on navy) */
.on-navy :focus-visible {
  outline-color: var(--pink);
}

/* Headings that receive focus from script do not need a ring */
[tabindex="-1"]:focus:not(:focus-visible) {
  outline: none;
}

[id] {
  scroll-margin-top: calc(var(--header-height) + var(--space-4));
}

[hidden] {
  display: none !important;
}

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

.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 200;
  padding: var(--space-2) var(--space-3);
  font-weight: 600;
  color: var(--navy);
  background: var(--white);
  border: 2px solid var(--navy);
  border-radius: var(--radius-sm);
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

/* 4. Layout and labels
   ========================================================================== */

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

/* Small label with a short gradient rule; navy text on light, pink on navy */
.section-label {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 0.75rem;
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.section-label::before {
  content: "";
  flex: none;
  width: 1.5rem;
  height: 3px;
  background: var(--gradient);
  border-radius: 2px;
}

.on-navy .section-label {
  color: var(--pink);
}

/* 5. Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.875rem;
  padding: 0.6875rem 1.375rem;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* Pink with navy text (6.39:1); hover inverts to navy */
.btn-primary {
  color: var(--navy);
  background: var(--pink);
  border-color: var(--pink);
}

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

/* Outline button on light surfaces */
.btn-secondary {
  color: var(--navy);
  background: transparent;
  border-color: var(--navy);
}

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

/* Text link with a trailing arrow */
.text-link {
  display: inline-block;
  padding-block: 0.625rem;
  font-family: var(--font-heading);
  font-weight: 600;
}

.text-link::after {
  content: "\2192";
  display: inline-block;
  margin-left: var(--space-2);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem var(--space-4);
}

/* 6. Header (white)
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  color: var(--navy);
  background: var(--white);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 0.75rem var(--space-4);
  min-height: var(--header-height);
}

.brand {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  margin-right: auto;
}

.brand img {
  width: 9.5rem;
}

.header-label {
  display: none;
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--muted);
}

@media (min-width: 48rem) {
  .header-label {
    display: block;
  }
}

.header-back {
  min-height: 2.75rem;
  padding: 0.5rem 1rem;
  font-size: 0.9375rem;
  gap: 0.375rem;
}

/* Below 640px the button reads "Back"; "to website" stays available to screen readers */
@media (max-width: 39.99rem) {
  .header-back .back-rest {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* 7. Page hero (navy, compact)
   ========================================================================== */

.page-hero {
  padding-block: clamp(2.5rem, 1.75rem + 2.6vw, 4rem);
  color: var(--on-navy);
  background:
    radial-gradient(45% 90% at 90% 20%, rgb(255 56 166 / 0.14), transparent 70%),
    radial-gradient(35% 60% at 0% 100%, rgb(255 122 138 / 0.07), transparent 70%),
    var(--navy);
}

.page-hero h1 {
  max-width: 20ch;
  font-size: var(--text-page-title);
  line-height: 1.08;
  letter-spacing: -0.022em;
}

.page-lead {
  max-width: 40rem;
  margin-top: var(--space-3);
  font-size: var(--text-lead);
  line-height: 1.55;
  color: var(--on-navy-soft);
}

.hero-note {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding: 0.375rem 0.875rem;
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--on-navy);
  border: 1px solid var(--on-navy-line);
  border-radius: 999px;
  background: rgb(255 255 255 / 0.06);
}

.hero-note::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  background: var(--pink);
  border-radius: 50%;
}

/* 8. Booking form
   ========================================================================== */

.booking-section {
  padding-block: clamp(2rem, 1.25rem + 3vw, 4rem) var(--section-pad);
  background: var(--grey);
}

.booking-grid {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 60rem) {
  .booking-grid {
    /* Fixed-width sidebar so the form takes the extra space (about 775px at 1440px) */
    grid-template-columns: minmax(0, 1fr) clamp(18.5rem, 12rem + 9vw, 21rem);
    column-gap: clamp(2rem, 1rem + 1.5vw, 2.5rem);
    align-items: start;
  }
}

.form-card {
  padding: clamp(1.25rem, 0.75rem + 2vw, 2.5rem);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.form-heading h2 {
  font-size: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);
}

.form-hint,
.field-hint {
  font-size: var(--text-sm);
  color: var(--muted);
}

.form-hint {
  margin-top: var(--space-1);
}

/* Error summary: listed problems link to their fields */
.error-summary {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  color: var(--navy);
  background: var(--error-bg);
  border: 2px solid var(--error);
  border-radius: var(--radius);
}

.error-summary h3 {
  font-size: 1.125rem;
  color: var(--error);
}

.error-summary ul {
  display: grid;
  gap: var(--space-1);
  margin-top: var(--space-2);
  padding-left: 1.25rem;
}

.error-summary a {
  font-weight: 600;
  color: var(--error);
  text-decoration-color: var(--error);
}

.booking-form {
  display: grid;
}

.form-section {
  display: grid;
  gap: 1.125rem;
  min-width: 0;
  margin: 0;
  padding: var(--space-5) 0 0;
  border: 0;
}

.form-section + .form-section {
  margin-top: var(--space-5);
  border-top: 1px solid var(--line);
}

.form-section:first-child {
  margin-top: var(--space-2);
}

.form-section > legend {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  float: left;            /* lets the legend sit inside the grid like any other row */
  width: 100%;
  padding: 0;
  font-family: var(--font-heading);
  font-size: 1.1875rem;
  font-weight: 600;
}

.form-section > legend + * {
  clear: both;
}

.step {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--navy);
  background: var(--pink-tint);
  border: 1px solid var(--pink-tint-line);
  border-radius: 50%;
}

.section-hint {
  margin-top: -0.375rem;
}

/* Two fields side by side on wider screens */
.form-row {
  display: grid;
  gap: 1.125rem;
}

@media (min-width: 40rem) {
  .form-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }

  .field--half {
    max-width: calc(50% - 0.5625rem);
  }
}

.field {
  display: grid;
  gap: 0.375rem;
  align-content: start;
}

.field label {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 600;
}

.optional {
  font-weight: 500;
  color: var(--muted);
}

.field input:not([type="checkbox"]),
.field select,
.field textarea {
  width: 100%;
  min-width: 0;
  min-height: 3rem;
  padding: 0.5rem 0.75rem;
  font: inherit;
  font-size: 1rem;
  color: var(--navy);
  background: var(--white);
  border: 1px solid var(--field-border);
  border-radius: var(--radius-sm);
}

/* iOS Safari renders empty date and time inputs collapsed without these */
.field input[type="date"],
.field input[type="time"] {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  line-height: 1.9;
}

.field input::-webkit-date-and-time-value {
  text-align: left;
}

.field select {
  appearance: none;
  padding-right: 2.5rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--navy) 50%), linear-gradient(-45deg, transparent 50%, var(--navy) 50%);
  background-position: right 1.125rem center, right 0.75rem center;
  background-size: 0.375rem 0.375rem;
  background-repeat: no-repeat;
}

.field textarea {
  min-height: 8rem;
  resize: vertical;
}

.field input:not([type="checkbox"]):focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline-offset: 0;
  border-color: var(--navy);
}

.field-error {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--error);
}

.field [aria-invalid="true"] {
  border-color: var(--error);
  box-shadow: 0 0 0 1px var(--error);
}

/* Date rows: a light card per date. Date full width and times side by side on phones,
   all three in one row from 640px. */
.date-list {
  display: grid;
  gap: 0.75rem;
}

.date-entry {
  display: grid;
  gap: 0.75rem;
  min-width: 0;
  margin: 0;
  padding: var(--space-3);
  background: var(--grey);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.date-legend {
  float: left;
  width: 100%;
  padding: 0;
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.02em;
}

.date-legend + * {
  clear: both;
}

.date-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.75rem 1rem;
  align-items: start;
}

.field--date {
  grid-column: 1 / -1;
}

@media (min-width: 40rem) {
  .date-fields {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
  }

  .field--date {
    grid-column: auto;
  }
}

.remove-date {
  justify-self: start;
  min-height: 2.75rem;
  padding: 0.375rem 0.25rem;
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--navy);
  background: none;
  border: 0;
  text-decoration: underline;
  text-decoration-color: var(--magenta);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.remove-date:hover {
  text-decoration-color: currentColor;
}

.add-date {
  justify-self: start;
}

/* Confirmation checkbox in a soft pink panel */
.confirm-field {
  padding: var(--space-3);
  background: var(--pink-tint);
  border: 1px solid var(--pink-tint-line);
  border-radius: var(--radius);
}

.checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.checkbox input {
  flex: none;
  width: 1.375rem;
  height: 1.375rem;
  margin: 0.125rem 0 0;
  accent-color: var(--navy);
  cursor: pointer;
}

.checkbox label {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  cursor: pointer;
}

.checkbox input[aria-invalid="true"] {
  outline: 2px solid var(--error);
  outline-offset: 2px;
}

/* Privacy notice above a centred submit button; full width on phones */
.form-actions {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
  text-align: center;
}

.form-submit {
  width: 100%;
  min-height: 3.25rem;
  font-size: 1.0625rem;
}

@media (min-width: 40rem) {
  .form-submit {
    width: auto;
    min-width: 20rem;
    padding-inline: 2.5rem;
  }
}

.form-submit[disabled] {
  cursor: progress;
  opacity: 0.75;
}

.form-privacy {
  font-size: var(--text-xs);
  color: var(--muted);
}

.form-privacy a {
  color: var(--navy);
}

.form-status {
  margin-top: var(--space-4);
  padding: 0.75rem 1rem;
  font-weight: 600;
  border-left: 4px solid currentColor;
  border-radius: 4px;
}

.form-status.is-error {
  color: var(--error);
  background: var(--error-bg);
}

.form-status.is-success {
  color: var(--success);
  background: var(--success-bg);
}

/* 9. Confirmation
   ========================================================================== */

.confirmation {
  display: grid;
  justify-items: start;
  gap: var(--space-3);
  padding-block: var(--space-3);
}

.confirmation-icon {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  color: var(--success);
  background: var(--success-bg);
  border-radius: 50%;
}

.confirmation h2 {
  font-size: clamp(1.5rem, 1.3rem + 0.8vw, 2rem);
}

.confirmation-message {
  max-width: 38rem;
  font-size: var(--text-lead);
}

.confirmation .actions {
  margin-top: var(--space-2);
}

/* 10. Information panel
   ========================================================================== */

.info-panel {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 60rem) {
  .info-panel {
    position: sticky;
    top: calc(var(--header-height) + var(--space-4));
  }
}

.info-card {
  padding: var(--space-4);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.info-card h2 {
  font-size: 1.25rem;
  letter-spacing: -0.01em;
}

.steps {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-4);
  list-style: none;
  counter-reset: step;
}

.steps li {
  position: relative;
  padding-left: 2.75rem;
  counter-increment: step;
}

.steps li::before {
  content: counter(step);
  position: absolute;
  top: -0.125rem;
  left: 0;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--navy);
  background: var(--pink);
  border-radius: 50%;
}

/* Thin connector between step numbers */
.steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 2.25rem;
  bottom: calc(var(--space-4) * -1 + 0.25rem);
  left: calc(1rem - 1px);
  width: 2px;
  background: var(--pink-tint-line);
}

.steps h3 {
  font-size: 1rem;
}

.steps p {
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  color: var(--muted);
}

.info-card--contact {
  color: var(--on-navy);
  background: var(--navy);
  border-color: var(--navy);
}

.contact-methods {
  display: grid;
  gap: 0.625rem;
  margin-top: var(--space-3);
  list-style: none;
}

.contact-methods li {
  display: grid;
  gap: 0.125rem;
  padding: 0.75rem 1rem;
  background: rgb(255 255 255 / 0.06);
  border: 1px solid var(--on-navy-line);
  border-radius: var(--radius);
}

.contact-methods span {
  font-size: var(--text-xs);
  color: var(--pink);
}

.contact-methods a {
  justify-self: start;
  font-family: var(--font-heading);
  font-weight: 600;
  text-decoration-color: var(--pink);
  overflow-wrap: anywhere;
}

/* 11. Footer (navy) — matches the main website
   ========================================================================== */

.site-footer {
  padding-block: clamp(2.75rem, 2rem + 2vw, 3.75rem) var(--space-4);
  color: var(--on-navy);
  background: var(--navy);
}

.footer-grid {
  display: grid;
  gap: var(--space-5);
}

.footer-brand img {
  width: 10rem;
}

.footer-brand p {
  max-width: 24rem;
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--on-navy-soft);
}

.footer-brand .footer-tagline {
  margin-top: var(--space-2);
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--pink);
}

.site-footer h2 {
  margin-bottom: 0.75rem;
  font-size: var(--text-sm);
  letter-spacing: 0.02em;
}

.site-footer ul {
  display: grid;
  gap: 0.375rem;
  list-style: none;
}

.site-footer li {
  font-size: var(--text-sm);
  color: var(--on-navy-soft);
}

.site-footer a {
  color: var(--on-navy-soft);
  text-decoration-line: none;
  text-decoration-color: var(--pink);
  text-decoration-thickness: 2px;
}

.site-footer a:hover,
.site-footer a:focus-visible {
  color: var(--on-navy);
  text-decoration-line: underline;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 var(--space-5);
  min-height: 2.75rem;
  margin-top: var(--space-5);
  padding-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--on-navy-soft);
  border-top: 1px solid var(--on-navy-line);
}

@media (min-width: 40rem) {
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (min-width: 60rem) {
  .footer-grid {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
  }

  .footer-brand {
    grid-column: auto;
  }
}

/* 12. Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
  }
}