/* ==========================================================================
   SignWave Hub — main stylesheet
   1. Fonts
   2. Design tokens
   3. Base
   4. Layout and section headings
   5. Components
   6. Header and navigation (white)
   7. Hero (navy)
   8. Services (light grey)
   9. About (white)
   10. How booking works (light grey)
   11. Convo partnership (white)
   12. Contact and form (soft blush)
   12b. Our ecosystem (brand pink)
   13. Footer (navy)
   14. Cookie consent banner
   15. Inner pages (policies, 404, form result)
   16. 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,
   bright pink on navy 4.84, navy on pink 6.39, muted on white 7.61, muted on soft grey 7.08,
   input border on white 3.81. Never used for text: pink or bright pink on white (2.5–3.3).
   ========================================================================== */

: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;          /* soft-grey sections */
  --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);

  /* 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-h1: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem);       /* 36–56px */
  --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;
}

h1 {
  font-size: var(--text-h1);
  line-height: 1.08;
  letter-spacing: -0.022em;
}

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);
}

/* Anchored sections land below the sticky header */
[id] {
  scroll-margin-top: var(--header-height);
}

/* Keeps hyphenated words such as "face-to-face" on one line */
.nowrap {
  white-space: nowrap;
}

.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 section headings
   ========================================================================== */

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

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

.section--grey {
  background: #f5f6f8;
}

/* Label and H2 on the left, intro or action on the right */
.section-head {
  display: grid;
  gap: var(--space-3);
  margin-bottom: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem);
}

.section-head h2 {
  max-width: 22ch;
}

.section-intro {
  max-width: 34rem;
  color: var(--muted);
}

@media (min-width: 60rem) {
  .section-head {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--space-6);
    align-items: end;
  }

  .section-head > :last-child:not(:first-child) {
    justify-self: end;
  }
}

/* Centred variant: headline over intro. The headline holds one line from 768px, where it
   fits at the standard H2 size; on phones it wraps naturally. */
.section-head--centred {
  justify-items: center;
  text-align: center;
}

.section-head--centred h2 {
  max-width: none;
}

@media (min-width: 48rem) {
  .section-head--centred h2 {
    white-space: nowrap;
  }
}

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

  .section-head--centred > :last-child:not(:first-child) {
    justify-self: center;
  }
}

/* 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. Components
   ========================================================================== */

.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, or white on dark surfaces */
.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);
}

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

/* Outline button on navy (border 5.7:1) */
.btn-outline {
  color: var(--on-navy);
  background: transparent;
  border-color: rgb(255 255 255 / 0.55);
}

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

/* 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; inline-block keeps the arrow out of the underline */
.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);
}

.on-navy .text-link {
  text-decoration-color: var(--pink);
}

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

/* 6. Header and navigation (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;
  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-cta {
  min-height: 2.75rem;
  padding: 0.5rem 1rem;
  font-size: 0.9375rem;
}

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

.menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.75rem;
  padding: 0.5rem 0.875rem;
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--navy);
  background: transparent;
  border: 1px solid var(--field-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.menu-icon {
  position: relative;
  width: 1rem;
  height: 2px;
  background: currentColor;
}

.menu-icon::before,
.menu-icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
}

.menu-icon::before { top: -5px; }
.menu-icon::after { top: 5px; }

.menu-toggle[aria-expanded="true"] .menu-icon { background: transparent; }
.menu-toggle[aria-expanded="true"] .menu-icon::before { top: 0; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-icon::after { top: 0; transform: rotate(-45deg); }

/* Mobile menu panel. Without JavaScript the panel is always shown. */
.menu-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: calc(100vh - var(--header-height));
  max-height: calc(100dvh - var(--header-height));
  overflow-y: auto;
  padding: var(--space-2) var(--gutter) var(--space-4);
  background: var(--white);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 16px 24px -16px rgb(20 33 61 / 0.25);
}

.no-js .menu-toggle { display: none; }
.no-js .menu-panel { position: static; padding-inline: 0; border: 0; box-shadow: none; }
.no-js .header-inner { flex-wrap: wrap; }
.no-js .site-nav { flex-basis: 100%; order: 3; }

.js .menu-panel[hidden] {
  display: none;
}

.nav-list {
  list-style: none;
}

.nav-list a {
  display: flex;
  align-items: center;
  min-height: 3.25rem;
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}

.nav-list a:hover,
.nav-list a[aria-current="true"] {
  text-decoration-line: underline;
  text-decoration-color: var(--magenta);
}

.menu-contact {
  display: grid;
  gap: 0.75rem;
  margin-top: var(--space-4);
  list-style: none;
}

.menu-contact span {
  display: block;
  font-size: var(--text-xs);
  color: var(--muted);
}

/* Full navigation from 900px (must match the breakpoint in main.js) */
@media (min-width: 56.25rem) {
  .brand img {
    width: 11rem;
  }

  .menu-toggle {
    display: none;
  }

  .site-nav {
    order: 0;
  }

  .js .menu-panel[hidden],
  .menu-panel {
    display: block;
    position: static;
    max-height: none;
    overflow: visible;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
  }

  .nav-list {
    display: flex;
    gap: var(--space-5);
  }

  .nav-list a {
    min-height: var(--header-height);
    font-size: 0.9875rem;
    font-weight: 500;
    border-bottom: 0;
    text-decoration-line: none;
    box-shadow: inset 0 -2px 0 transparent;
    transition: box-shadow 0.15s ease;
  }

  .nav-list a:hover,
  .nav-list a[aria-current="true"] {
    text-decoration-line: none;
    box-shadow: inset 0 -2px 0 var(--magenta);
  }

  .menu-contact {
    display: none;
  }

  .header-cta {
    margin-left: var(--space-4);
    padding-inline: 1.25rem;
  }

  .no-js .site-nav { flex-basis: auto; order: 0; }
  .no-js .header-inner { flex-wrap: nowrap; }
}

/* 7. Hero (navy with a very soft pink and magenta light)
   Centred single column with a large display headline (about 70px at 1440px). The start of
   Services still shows below it on a typical desktop screen.
   ========================================================================== */

.hero {
  color: var(--on-navy);
  background:
    radial-gradient(55% 75% at 50% 0%, rgb(255 56 166 / 0.11), transparent 70%),
    radial-gradient(35% 55% at 100% 100%, rgb(255 122 138 / 0.07), transparent 70%),
    var(--navy);
}

.hero-inner {
  padding-block: clamp(3.5rem, 2rem + 5vw, 6.5rem);
}

.hero-copy {
  max-width: 62rem;
  margin-inline: auto;
  text-align: center;
}

/* Display size: 36px on phones rising to 70px at 1440px. The slope is set so each sentence
   fits on one line from 640px (where lines are held together); on phones they wrap naturally. */
.hero h1 {
  font-size: clamp(2.25rem, 1.225rem + 3.5vw, 4.375rem);
  line-height: 1.06;
  letter-spacing: -0.025em;
}

/* Each sentence starts on its own line */
.hero-line {
  display: block;
}

@media (min-width: 40rem) {
  .hero-line {
    white-space: nowrap;
  }
}

/* Brand pink accent line: 6.39:1 on navy */
.hero-accent {
  color: var(--pink);
}

.hero-lead {
  max-width: 46rem;
  margin: 1.5rem auto 0;
  font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  line-height: 1.55;
  color: var(--on-navy-soft);
}

.hero .actions {
  justify-content: center;
  margin-top: var(--space-5);
  gap: 0.75rem;
}

/* Slightly larger hero buttons, kept equal so the pair stays aligned */
.hero .actions .btn {
  min-height: 3.25rem;
  padding: 0.8125rem clamp(1.125rem, 0.6rem + 2vw, 1.75rem);
  font-size: 1.0625rem;
}

.hero-points {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-5);
  font-size: var(--text-sm);
  color: var(--on-navy-soft);
  list-style: none;
}

.hero-points li {
  display: inline-flex;
  white-space: nowrap;
  align-items: center;
}

/* Thin separators once the three labels always share one row (640px and up). Below that
   the labels may wrap, so separators are left out rather than stranded at a line edge. */
@media (min-width: 40rem) {
  .hero-points {
    column-gap: 0;
  }

  /* Decorative brand-pink rule; an empty pseudo-element is not announced by screen readers */
  .hero-points li + li::before {
    content: "";
    width: 1px;
    height: 1em;
    margin-inline: 1.25rem;
    background: var(--pink);
  }
}

/* 8. Services (light grey)
   ========================================================================== */

.service-grid {
  display: grid;
  gap: var(--space-3);
  list-style: none;
}

.service-card {
  padding: var(--space-4);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.service-card:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow);
}

.service-card h3 {
  color: var(--pink-deep);
}

.service-card p:last-child {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--muted);
}

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

@media (min-width: 60rem) {
  .service-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
  }
}

/* Sectors strip under the service cards (navy): pink heading 6.39:1, soft white text 10.22:1,
   navy on white labels 15.97:1 */
.sectors {
  display: grid;
  gap: 0.875rem;
  margin-top: var(--space-5);
  padding: 1.25rem var(--space-4);
  color: var(--on-navy);
  background: var(--navy);
  border-radius: var(--radius);
}

.sectors-title {
  font-size: var(--text-sm);
  color: var(--pink);
}

.sectors-intro p {
  margin-top: 0.125rem;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--on-navy-soft);
}

.sector-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
}

.sector-list li {
  padding: 0.3125rem 0.875rem;
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--navy);
  background: var(--white);
  border: 1px solid var(--pink-tint-line);
  border-radius: var(--radius-sm); /* same corners as the buttons */
}

@media (min-width: 60rem) {
  .sectors {
    grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
    column-gap: var(--space-5);
    align-items: center;
  }

  .sector-list {
    justify-content: flex-end;
  }
}

/* 9. About (white)
   ========================================================================== */

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

.about-lead {
  margin-top: var(--space-3);
  font-size: var(--text-lead);
  line-height: 1.55;
}

.about-copy > p:not(.section-label):not(.about-lead) {
  margin-top: 0.75rem;
  color: var(--muted);
}

/* The strongest message from the former "Why accessibility matters" section */
.about-callout {
  margin-top: var(--space-4);
  padding: 1.125rem 1.25rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.about-callout strong {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: 600;
  line-height: 1.3;
}

.about-callout p {
  margin-top: 0.375rem;
  font-size: var(--text-sm);
  color: var(--muted);
}

/* Focus points: deeper pink headings (4.62:1 on white) separated by fine grey rules */
.about-points {
  list-style: none;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.about-points li {
  padding: 1.125rem 1.25rem;
}

.about-points h3 {
  color: var(--pink-deep);
}

.about-points li + li {
  border-top: 1px solid var(--line);
}

.about-points p {
  margin-top: 0.25rem;
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--muted);
}

@media (min-width: 60rem) {
  .about-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(2.5rem, 1rem + 4vw, 4.5rem);
    align-items: center;
  }
}

/* 10. How booking works (light grey)
   ========================================================================== */

.steps {
  display: grid;
  gap: var(--space-4);
  list-style: none;
}

.step {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  column-gap: var(--space-3);
}

.step-num {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 600;
  background: var(--white);
  border: 2px solid var(--pink);
  border-radius: 50%;
}

.step h3 {
  align-self: center;
}

.step p {
  margin-top: 0.25rem;
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--muted);
}

.booking-note {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--muted);
}

.booking-note .text-link {
  color: var(--navy);
}

@media (min-width: 48rem) {
  .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-5);
  }

  /* Centred under the centred heading; phones keep the number-beside-text rows */
  .step {
    display: block;
    text-align: center;
  }

  .step-num {
    margin-inline: auto;
  }

  .step h3 {
    margin-top: var(--space-3);
  }

  .step p {
    margin: 0.375rem auto 0;
    max-width: 30ch;
  }

  .booking-note {
    text-align: center;
  }
}

/* 11. Convo partnership (white, one white card)
   ========================================================================== */

.partner-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.partner-lockup {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  padding: 1.125rem var(--space-4);
  border-bottom: 1px solid var(--line);
}

.partner-lockup img {
  width: auto;
  height: 1.625rem;
}

/* The SignWave Hub artwork fills only 77% of its image height (Convo fills 100%), so it is
   drawn larger to carry the same visual weight */
.partner-lockup .partner-logo-swh {
  height: 1.875rem;
}

/* Small phones (under 390px): both logos scale together so they stay on one row */
@media (max-width: 24.37rem) {
  .partner-lockup {
    gap: 0.5rem;
    padding-inline: var(--space-3);
  }

  .partner-lockup img {
    height: 6vw;
  }

  .partner-lockup .partner-logo-swh {
    height: 7vw;
  }
}

.partner-lockup .partner-x {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--magenta);
}

.partner-body {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-4);
}

.partner-copy h2 {
  max-width: 20ch;
  font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem);
}

.partner-copy > p:not(.section-label) {
  max-width: 34rem;
  margin-top: 0.75rem;
  color: var(--muted);
}

.partner-copy .actions {
  margin-top: var(--space-4);
}

.partner-services {
  display: grid;
  gap: 0.75rem;
  list-style: none;
}

.partner-services li {
  padding: 1rem 1.25rem;
  background: var(--white);
  border: 1px solid var(--pink-tint-line);
  border-radius: var(--radius);
}

/* Deeper pink headings on the white boxes: 4.62:1 */
.partner-services h3 {
  color: var(--pink-deep);
}

.partner-services p {
  margin-top: 0.25rem;
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--muted);
}

@media (min-width: 40rem) {
  .partner-lockup {
    gap: 0.75rem 1rem;
    padding-inline: var(--space-5);
  }

  .partner-lockup img {
    height: 2rem;
  }

  .partner-lockup .partner-logo-swh {
    height: 2.75rem;
  }

  .partner-body {
    padding: var(--space-5);
  }
}

@media (min-width: 60rem) {
  .partner-body {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--space-6);
    align-items: center;
  }
}

/* 12. Contact (soft blush) and form
   Navy contact cards: pink labels 6.39:1, white details 15.97:1, pink focus ring.
   Muted intro on the blush 7.07:1. Error red #B42318 on white is 6.5:1.
   ========================================================================== */

.section--contact {
  background: #fff4f6; /* soft blush */
}

/* More compact on desktop (about 60px instead of 82px at 1440px); tablet and phones keep
   the standard section spacing */
@media (min-width: 60rem) {
  .section--contact {
    padding-block: clamp(3.5rem, 1.5rem + 2.5vw, 4rem);
  }
}

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

.contact-text {
  max-width: 30rem;
  margin-top: 0.75rem;
  color: var(--muted);
}

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

.contact-methods li {
  display: grid;
  gap: 0.125rem;
  padding: 0.75rem 1rem;
  color: var(--on-navy);
  background: var(--navy);
  border: 1px solid var(--navy);
  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;
  overflow-wrap: anywhere;
}

.contact-methods a:focus-visible {
  outline-color: var(--pink);
}

.contact-form {
  display: grid;
  gap: 1rem;
  padding: clamp(1.25rem, 0.9rem + 1.4vw, 2rem);
  color: var(--navy);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.form-title {
  font-size: 1.25rem;
}

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

.form-hint {
  margin-top: -0.75rem;
}

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

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

.field {
  display: grid;
  gap: 0.375rem;
}

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

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

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 2.75rem;
  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);
}

.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: 7.5rem;
  resize: vertical;
}

.field input: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: #b42318;
}

.field [aria-invalid="true"] {
  border-color: #b42318;
  box-shadow: 0 0 0 1px #b42318;
}

/* Spam trap: moved off-screen rather than display:none so simple bots still fill it */
.trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

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

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

.form-submit {
  justify-self: center;
}

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

.form-status {
  padding: 0.75rem 1rem;
  font-weight: 600;
  border-left: 4px solid currentColor;
  border-radius: 4px;
}

.form-status.is-success {
  color: #05603a;
  background: #ecfdf3;
}

.form-status.is-error {
  color: #b42318;
  background: #fef3f2;
}

@media (min-width: 60rem) {
  .contact-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: clamp(2.5rem, 1rem + 4vw, 4.5rem);
    align-items: start;
  }
}

/* 12b. Our ecosystem: compact brand-pink strip above the footer, labelled for screen readers
   but with no visible heading. Navy names 6.39:1 on pink, in a centred row with fine navy
   separators, stacking on phones. Each name box has a fixed height so an official logo can
   replace the text later without changing the layout.
   ========================================================================== */

.eco-strip {
  padding-block: var(--space-4);
  color: var(--navy);
  background: var(--pink);
}

.eco-strip-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.eco-brands {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  list-style: none;
}

.eco-brands li {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 1.15rem + 0.4vw, 1.375rem);
  font-weight: 600;
  white-space: nowrap;
}

@media (min-width: 40rem) {
  .eco-brands {
    flex-direction: row;
    gap: 0;
  }

  /* Decorative separator; an empty pseudo-element is not announced by screen readers */
  .eco-brands li + li::before {
    content: "";
    width: 1px;
    height: 1.25em;
    margin-inline: var(--space-4);
    background: rgb(20 33 61 / 0.4);
  }
}

/* 13. Footer (navy)
   ========================================================================== */

.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);
}

/* Footer links sit in labelled lists, so they need no permanent underline; hover and
   keyboard focus brighten them to white with a pink underline (plus the pink focus ring) */
.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);
  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);
}

/* A button that looks like a footer link (it opens the cookie settings, it does not navigate) */
.link-button {
  min-height: 2.75rem;
  padding: 0;
  font: inherit;
  color: var(--on-navy-soft);
  background: none;
  border: 0;
  text-decoration: none;
  text-decoration-color: var(--pink);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

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

@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;
  }
}

/* 14. Cookie consent banner (in page flow above the header, so it never covers content)
   ========================================================================== */

.consent {
  padding-block: var(--space-4);
  color: var(--navy);
  background: var(--grey);
  border-bottom: 3px solid var(--pink);
}

.consent:focus {
  outline: none;
}

.consent-ask {
  display: grid;
  gap: var(--space-3);
}

.consent-title {
  font-size: var(--text-h3);
}

.consent-text p {
  max-width: 48rem;
  margin-top: 0.375rem;
  font-size: var(--text-sm);
}

.consent-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* Accept and Reject are deliberately identical in weight and style */
.btn-consent {
  color: var(--white);
  background: var(--navy);
  border-color: var(--navy);
}

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

.consent-done {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-5);
}

.consent-done[hidden],
.consent-ask[hidden] {
  display: none;
}

.consent-done-text {
  font-weight: 600;
}

.consent-done-text:focus {
  outline: none;
}

@media (min-width: 60rem) {
  .consent-ask {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--space-6);
    align-items: center;
  }
}

/* Programmatic focus targets (skip link, banner dismissal) do not need a ring */
main:focus {
  outline: none;
}

/* 15. Inner pages: policy pages, 404 and the no-JavaScript form result
   ========================================================================== */

.page-hero {
  padding-block: clamp(2.75rem, 2rem + 3vw, 4.5rem);
  color: var(--on-navy);
  background:
    radial-gradient(45% 90% at 90% 20%, rgb(255 56 166 / 0.14), transparent 70%),
    var(--navy);
}

.page-hero h1,
.result-page h1 {
  font-size: var(--text-page-title);
}

.page-hero h1 {
  max-width: 20ch;
}

/* Long-form policy text */
.prose {
  max-width: 46rem;
  padding-block: clamp(2.5rem, 2rem + 2vw, 4rem) var(--section-pad);
}

.prose > p:first-child {
  font-size: var(--text-lead);
  line-height: 1.55;
}

.prose h2 {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  border-top: 1px solid var(--line);
}

.prose p {
  margin-top: var(--space-3);
}

/* Contact block at the end of each policy (the existing "card" markup) */
.prose .card {
  margin-top: var(--space-5);
  padding: var(--space-4);
  background: var(--grey);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

/* 404 */
.not-found {
  padding-block: clamp(3rem, 2rem + 4vw, 5.5rem);
  color: var(--on-navy);
  background:
    radial-gradient(45% 90% at 90% 20%, rgb(255 56 166 / 0.14), transparent 70%),
    var(--navy);
}

.not-found-grid {
  display: grid;
  gap: var(--space-6);
}

.not-found h1 {
  font-size: var(--text-page-title);
}

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

.not-found .actions {
  margin-top: var(--space-5);
}

.not-found-help {
  padding: var(--space-4);
  border: 1px solid var(--on-navy-line);
  border-radius: var(--radius);
}

.not-found-help h2 {
  font-size: var(--text-h3);
}

.not-found-help > p {
  margin-top: var(--space-2);
  color: var(--on-navy-soft);
}

.not-found-help ul {
  margin-top: var(--space-3);
  list-style: none;
  border-top: 1px solid var(--on-navy-line);
}

.not-found-help li {
  padding-block: 0.75rem;
  border-bottom: 1px solid var(--on-navy-line);
}

.not-found-help a {
  text-decoration-color: var(--pink);
}

.not-found-help .footer-tagline {
  margin-top: var(--space-3);
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--pink);
}

@media (min-width: 60rem) {
  .not-found-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    column-gap: clamp(3rem, 1rem + 5vw, 6rem);
    align-items: start;
  }
}

/* Result page returned by php/contact.php when JavaScript is off */
.result-page {
  min-height: 100vh;
  padding-block: var(--space-5) var(--space-7);
  color: var(--on-navy);
  background: var(--navy);
}

.result-page .brand img {
  width: 11rem;
}

.result-page h1 {
  margin-top: clamp(2.5rem, 2rem + 3vw, 4.5rem);
  max-width: 18ch;
}

.result-message {
  max-width: 36rem;
  margin-top: var(--space-3);
  font-size: var(--text-lead);
  color: var(--on-navy-soft);
}

.result-page .actions {
  margin-top: var(--space-5);
}

/* 16. Reduced motion
   ========================================================================== */

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

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