/*
  World Maritime Council — the one stylesheet.

  Follows the WMC brand guide (project-docs/brand guide lines/README.md):
  its colour tokens, Montserrat + Open Sans, 10px buttons, the compass-globe
  watermark as the only decoration.

  Mobile first: the base rules are the phone layout, and min-width queries
  add columns as the screen grows. Motion is transform and opacity only, so
  nothing forces a re-layout.
*/

/* ---------- fonts ---------- */

/* The two brand families, self-hosted, latin only. Montserrat for headings,
   buttons and labels; Open Sans for everything else. */
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-latin-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("../fonts/opensans-latin-var.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

/* Arial, resized to each font's proportions, so text does not jump when the
   real fonts arrive. */
@font-face {
  font-family: "Montserrat Fallback";
  src: local("Arial");
  ascent-override: 85.79%;
  descent-override: 22.25%;
  line-gap-override: 0%;
  size-adjust: 112.83%;
}
@font-face {
  font-family: "Open Sans Fallback";
  src: local("Arial");
  ascent-override: 101.65%;
  descent-override: 27.86%;
  line-gap-override: 0%;
  size-adjust: 105.16%;
}

/* ---------- tokens ---------- */

:root {
  /* Brand tokens — exactly as project-docs/brand guide lines/tokens/
     wmc-tokens.css. Change them there first, then here. */
  --wmc-navy-900: #0B1D4D;  /* Deep Navy: headings, footer, buttons */
  --wmc-navy-800: #12306E;  /* Council Navy: bands, hero gradients */
  --wmc-blue-700: #1E4E86;  /* Council Blue: links, eyebrows, small text */
  --wmc-blue-500: #2E8BC9;  /* Ocean Blue: accent only, never small text on white */
  --wmc-blue-300: #7FC0E8;  /* Horizon: text and accents on navy */
  --wmc-blue-100: #DCEDF8;  /* Sky: card fills */
  --wmc-blue-50:  #F1F7FC;  /* Mist: section backgrounds */
  --wmc-ink:      #101B2D;
  --wmc-slate:    #4A5B75;
  --wmc-line:     #D3DCE6;
  --wmc-white:    #FFFFFF;
  --wmc-success:  #0F7B5A;
  --wmc-warning:  #B7791F;
  --wmc-danger:   #B42318;
  --wmc-gradient: linear-gradient(135deg, #0B1D4D 0%, #12306E 55%, #1E4E86 100%);

  --wmc-font-display: "Montserrat", "Montserrat Fallback", "Segoe UI", Arial, sans-serif;
  --wmc-font-body: "Open Sans", "Open Sans Fallback", "Segoe UI", Arial, sans-serif;
  --wmc-h1: clamp(2rem, 1.2rem + 2.6vw, 3.25rem);
  --wmc-h2: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
  --wmc-h3: 1.375rem;
  --wmc-eyebrow: .75rem;

  --wmc-radius: 10px;
  --wmc-radius-lg: 16px;
  --wmc-shadow: 0 2px 4px rgb(11 29 77 / .06), 0 12px 28px rgb(11 29 77 / .10);

  /* Site layout — not in the brand kit. */
  --wrap: clamp(78rem, 90vw, 100rem);  /* the brand's 1200px container, growing to 1600px on big monitors so they are not mostly margin */
  --gut: clamp(1rem, 4.5vw, 1.5rem);
  --sec: clamp(3.5rem, 8vw, 6rem);
  --header-h: 4rem;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --field-border: #7F90A8;  /* 3.25:1 on white, the minimum for a form control */
}

@media (min-width: 60em) {
  :root { --header-h: 5rem; }
}

/* ---------- base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--wmc-white);
  color: var(--wmc-ink);
  font-family: var(--wmc-font-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

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

h1, h2, h3 {
  font-family: var(--wmc-font-display);
  color: var(--wmc-navy-900);
  line-height: 1.15;
  letter-spacing: -.01em;
  margin: 0 0 .6em;
  text-wrap: balance;
}

h1 { font-size: var(--wmc-h1); font-weight: 800; letter-spacing: -.02em; }
h2 { font-size: var(--wmc-h2); font-weight: 700; }
h3 { font-size: var(--wmc-h3); font-weight: 700; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a {
  color: var(--wmc-blue-700);
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}
a:hover { color: var(--wmc-navy-900); }

:focus-visible {
  outline: 3px solid var(--wmc-blue-500);
  outline-offset: 3px;
  border-radius: 4px;
}

/* A faint dotted line: enough to say "hover me", not enough to clutter. */
abbr[title] {
  text-decoration: underline dotted rgb(30 78 134 / .45);
  text-decoration-thickness: 1px;
  text-underline-offset: .25em;
  cursor: help;
}

address { font-style: normal; }

.icon { width: 1.25em; height: 1.25em; flex: none; }

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

.skip {
  position: absolute;
  left: 1rem; top: .75rem;
  z-index: 100;
  padding: .6rem 1rem;
  border-radius: 8px;
  background: var(--wmc-navy-900);
  color: #fff;
  font-weight: 600;
  transform: translateY(-200%);
}
.skip:focus { transform: none; color: #fff; }

/* ---------- layout ---------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.section { padding-block: var(--sec); }
.section-tint { background: var(--wmc-blue-50); }

.section-head { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head h2:last-child { margin-bottom: 0; }

.eyebrow {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0 0 .9rem;
  font-family: var(--wmc-font-display);
  font-size: var(--wmc-eyebrow);
  font-weight: 700;
  letter-spacing: .14em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--wmc-blue-700);
}
.eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}
.center .eyebrow { justify-content: center; }

.lead {
  font-size: clamp(1.075rem, 1.6vw, 1.22rem);
  line-height: 1.6;
  color: var(--wmc-slate);
}

/* ---------- justified prose ---------- */

/* Set once here so every page reads the same way, rather than page by page.

   Justification lines up both edges by stretching the spaces between words,
   so it needs enough words a line to spread that slack thinly. Hyphenation
   is what buys the room in a narrow column: the browser can break a long
   word instead of stretching the whole line around it. It needs a lang
   attribute to choose a dictionary - header.php sets en-IN.

   hyphenate-limit-chars keeps the breaks sensible: words of 7+ characters
   only, 4 letters before the hyphen and 3 after, so nothing breaks to a
   stray pair of letters.

   Applied to text elements, never to a container: justifying an <li> that
   holds a card would pass the setting down to the heading inside it, and a
   stretched two-word heading looks like a bug. So the prose lists are named
   one by one and the card lists are left alone. */
main p,
.checklist li,
.declaration li {
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
  hyphenate-limit-chars: 7 4 3;
}

/* Too narrow to justify. The four-across grids give each card about 285px
   on a 1400px screen, so roughly 32 characters a line - five or six words.
   There is too little slack to spread: the browser has only a handful of
   word spaces to absorb it, so each one opens visibly. Justification wants
   about 45 characters a line before it beats ragged-right. The three-across
   mission grid clears that (about 47 characters at 1400px, 63 at 1600px),
   which is why it is not in this list.

   The upload step is here for a different reason: its row is a flex line
   shared with the Download button, and the text is flex: 1 1 16rem, so it
   gives way as the button takes its width. Justifying a column that has no
   fixed width stretched "Download the form and fill it in, in block
   letters." right across the gap the button left. */
.steps p,
.card-accent p,
.place p,
.logo-card p,
.upload-steps li > span {
  text-align: left;
  hyphens: manual;
}

/* Short blocks, and display type.

   Justification only shows itself on the lines it stretches. The last line
   of a paragraph is always set naturally, so in a paragraph of two or three
   lines a single stretched line carries the whole adjustment - and one odd
   line among three reads as a fault rather than a setting. Long paragraphs
   spread the same adjustment over many lines and nobody notices.

   CSS cannot count lines, so this is done by role instead: a standfirst
   (.lead), a note, a call to action and a pull quote are short by their
   nature, whatever the page. .note is the worst case of all - it ends in an
   email address that cannot be broken or hyphenated, so the line before it
   was stretched to breaking point to push the address down.

   .pullquote is two lines of display type, so it stays ragged for both
   reasons at once. */
.lead,
.note,
.cta p,
.pullquote {
  text-align: left;
  hyphens: manual;
}

/* Back to justified, for two blocks the rule above catches by accident.

   The home page sets the whole Preamble as a .lead - using the class for
   its size, not as a standfirst. It is the same paragraph the About page
   carries, so leaving it ragged here and justified there set one piece of
   text two different ways on two pages.

   The vision statement is five lines, which is long enough to spread the
   adjustment, so it is justified with the rest. */
.split .lead,
.vision blockquote p {
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
  hyphenate-limit-chars: 7 4 3;
}

/* Tried raising the minimum word length here to 13, to stop the vision
   statement breaking the Council's own phrase as "maritime stake-holders".
   It came out worse: "professionalism" broke instead, and the first line
   opened into visible gaps because the break it wanted was no longer
   allowed. One clean break and even spacing beats a different break and a
   gappy line, so the standard limits stand. */

/* Where the design centres text, centring wins - a line cannot be both. */
.section-head.center p,
.why p,
.done p,
.done-copy-note,
.more,
.more p {
  text-align: center;
  hyphens: manual;
}

/* Furniture, not prose. A label, a role, a form hint or a hero standfirst
   is one to three lines; justifying those only stretches the first line and
   leaves the last short, which looks like a mistake rather than a setting.

   hyphens goes back to manual everywhere alignment is reset. Ragged-right
   has no gaps to close, so a break there buys nothing and costs something:
   left as auto it split a link across lines as "applica-tion page", where
   the hyphen reads as part of the link. */
.eyebrow,
.page-hero p,
.hero-copy p,
.hint,
.btn-meta,
.leader-role,
.field-error,
.alert p {
  text-align: left;
  hyphens: manual;
}

.grid { display: grid; gap: clamp(1rem, 2.5vw, 1.5rem); }

@media (min-width: 40em) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 48em) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-top { align-items: start; gap: clamp(2.5rem, 5vw, 4rem); }
}
@media (min-width: 56em) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 68em) {
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* Heading on the left, text on the right. */
.split { display: grid; gap: 1.25rem 4rem; }
@media (min-width: 56em) {
  .split { grid-template-columns: 5fr 7fr; align-items: start; }
  .split h2 { margin-bottom: 0; }
}

.more { margin-top: 2rem; text-align: center; }

/* ---------- buttons and links ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 3rem;
  padding: .75rem 1.625rem;
  border: 2px solid transparent;
  border-radius: var(--wmc-radius);
  font-family: var(--wmc-font-display);
  font-size: .9375rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s, border-color .2s, color .2s, transform .15s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn .icon { width: 1.15em; height: 1.15em; }

.icon-arrow { transition: transform .25s var(--ease); }
.btn:hover .icon-arrow,
.link-arrow:hover .icon-arrow { transform: translateX(4px); }

.btn-primary { background: var(--wmc-navy-900); color: #fff; }
.btn-primary:hover { background: var(--wmc-blue-700); color: #fff; }

.btn-ghost { border-color: var(--wmc-navy-900); color: var(--wmc-navy-900); }
.btn-ghost:hover { background: var(--wmc-blue-50); color: var(--wmc-navy-900); }

.btn-light { background: #fff; color: var(--wmc-navy-900); }
.btn-light:hover { background: var(--wmc-blue-100); color: var(--wmc-navy-900); }

.btn-outline-light { border-color: rgb(255 255 255 / .5); color: #fff; }
.btn-outline-light:hover { border-color: #fff; background: rgb(255 255 255 / .1); color: #fff; }

.btn-sm { min-height: 2.75rem; padding: .5rem 1.1rem; font-size: .875rem; }  /* 44px: a thumb */

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

@media (max-width: 30em) {
  .actions .btn { flex: 1 1 100%; }
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  gap: .45rem;
  font-family: var(--wmc-font-display);
  font-weight: 700;
  font-size: .95rem;
  text-decoration: none;
}

/* ---------- header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fff;
  border-bottom: 1px solid var(--wmc-line);
}

.header-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 1rem;
  min-height: var(--header-h);
}

.brand {
  display: flex;
  align-items: center;
  padding-block: .6rem;     /* the guide's clear space: about the height of the W */
}
.brand img { width: auto; height: 2.75rem; }   /* 123px wide: over the 90px minimum */

@media (min-width: 60em) {
  .brand img { height: 3.75rem; }             /* 168px wide, so the name line reads */
}

.nav-toggle {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--wmc-line);
  border-radius: 10px;
  background: #fff;
  color: var(--wmc-navy-900);
  cursor: pointer;
}
.nav-toggle .icon {
  grid-area: 1 / 1;
  width: 1.4rem;
  height: 1.4rem;
  transition: opacity .2s, transform .25s var(--ease);
}
.nav-toggle .icon-close { opacity: 0; transform: rotate(-90deg); }
[data-open] .nav-toggle .icon-open { opacity: 0; transform: rotate(90deg); }
[data-open] .nav-toggle .icon-close { opacity: 1; transform: none; }

.site-nav ul { margin: 0; padding: 0; list-style: none; }
.site-nav li a { text-decoration: none; }

/* Phones and tablets: a panel that drops from the header bar. Without
   JavaScript there is no toggle, and the menu is simply shown. */
@media (max-width: 59.99em) {
  .no-js .nav-toggle { display: none; }

  .site-nav { flex-basis: 100%; padding-bottom: 1.25rem; }

  .js .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: .25rem var(--gut) 1.25rem;
    background: #fff;
    border-bottom: 1px solid var(--wmc-line);
    box-shadow: 0 24px 32px -24px rgb(11 29 77 / .35);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-.5rem);
    transition: opacity .2s var(--ease), transform .25s var(--ease), visibility 0s linear .25s;
    /* A phone on its side can be shorter than the menu: it scrolls inside. */
    max-height: calc(100vh - var(--header-h));
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .js [data-open] .site-nav {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .2s var(--ease), transform .25s var(--ease), visibility 0s;
  }

  .site-nav li a {
    display: block;
    padding: .95rem .25rem;
    border-bottom: 1px solid var(--wmc-line);
    font-family: var(--wmc-font-display);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--wmc-navy-900);
  }
  .site-nav li a[aria-current="page"] { color: var(--wmc-blue-700); }
  .site-nav .btn { width: 100%; margin-top: 1.25rem; }
}

@media (min-width: 60em) {
  .nav-toggle { display: none; }

  .site-nav { display: flex; align-items: center; gap: 1.5rem; }
  .site-nav ul { display: flex; gap: .25rem; }

  .site-nav li a {
    position: relative;
    display: block;
    padding: .6rem .85rem;
    font-family: var(--wmc-font-display);
    font-size: .95rem;
    font-weight: 600;
    color: var(--wmc-navy-900);
  }
  .site-nav li a::after {
    content: "";
    position: absolute;
    left: .85rem;
    right: .85rem;
    bottom: .25rem;
    height: 2px;
    border-radius: 2px;
    background: var(--wmc-blue-500);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s var(--ease);
  }
  .site-nav li a:hover::after,
  .site-nav li a[aria-current="page"]::after { transform: scaleX(1); }
}

/* ---------- heroes ---------- */

/* Every page opens on the brand hero: navy, the compass-globe watermark,
   waves. The artwork is an <img> behind the text, so phones can be sent the
   small copy. */
.hero,
.page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--wmc-navy-900);
  color: #fff;
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 75% 100%;
}

.hero { padding-block: clamp(3rem, 9vw, 6.5rem) clamp(5.5rem, 11vw, 9rem); }
.page-hero { padding-block: clamp(2.75rem, 7vw, 4.75rem) clamp(4.5rem, 9vw, 7rem); }

.hero h1,
.page-hero h1 { color: #fff; }
.hero h1 { margin-bottom: .45em; }
.hero h1 .accent { display: block; color: var(--wmc-blue-300); }
.page-hero h1 { max-width: 22ch; }

.hero .eyebrow,
.page-hero .eyebrow { color: var(--wmc-blue-300); }

.hero .lead,
.page-hero .lead { max-width: 40rem; color: rgb(255 255 255 / .86); }
.hero .lead { margin-bottom: 2rem; }
.page-hero .actions { margin-top: 2rem; }

.hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 2.25rem 0 0;
  padding: 0;
  list-style: none;
}
.hero-tags li {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .4rem .85rem;
  border: 1px solid rgb(127 192 232 / .45);   /* Horizon */
  border-radius: 999px;
  background: var(--wmc-navy-900);            /* solid, so the waves behind never wash it out */
  box-shadow: 0 4px 14px rgb(11 29 77 / .25);
  font-size: .85rem;
  font-weight: 600;
  color: #fff;
}
.hero-tags .icon { width: 1.05rem; height: 1.05rem; color: var(--wmc-blue-300); }

/* The brand divider. Its blues are drawn for light grounds; rising out of
   navy they are lightened so the waves still show. */
.wave {
  position: absolute;
  left: 0;
  bottom: -1px;
  display: block;
  width: 100%;
  height: clamp(2.5rem, 6vw, 5.5rem);
}
.wave .w1 { fill: var(--wmc-blue-500); opacity: .22; }
.wave .w2 { fill: var(--wmc-blue-700); opacity: .3; }
.wave .w3 { fill: var(--wmc-white); }
.wave-to-tint .w3 { fill: var(--wmc-blue-50); }
.wave-to-navy .w3 { fill: var(--wmc-navy-900); }
.hero .wave .w1,
.page-hero .wave .w1 { fill: var(--wmc-blue-300); opacity: .3; }
.hero .wave .w2,
.page-hero .wave .w2 { fill: var(--wmc-white); opacity: .35; }

/* ---------- cards ---------- */

.card {
  position: relative;
  padding: clamp(1.35rem, 3vw, 1.85rem);
  border: 1px solid var(--wmc-line);
  border-radius: var(--wmc-radius-lg);
  background: #fff;
}
.section-tint .card { border-color: transparent; box-shadow: var(--wmc-shadow); }

.card h3 { margin-bottom: .45rem; font-size: 1.2rem; }
.card p { font-size: 1rem; color: var(--wmc-slate); }

.card-accent { overflow: hidden; }
.card-accent::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--wmc-navy-900), var(--wmc-blue-500));
}

.card-label {
  font-family: var(--wmc-font-display);
  display: block;
  margin-bottom: .35rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--wmc-blue-700);
}

.badge {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: 1.1rem;
  border-radius: 12px;
  background: var(--wmc-blue-100);
  color: var(--wmc-navy-900);
}
.badge .icon { width: 1.5rem; height: 1.5rem; }

/* About: preamble and objective. */
.statement h2 { font-size: clamp(1.3rem, 2.4vw, 1.6rem); margin-bottom: .6rem; }
.statement p { font-size: 1.05rem; color: var(--wmc-ink); }

.pullquote {
  margin: clamp(1.5rem, 4vw, 2.5rem) 0 0;
  padding: 1.4rem 1.6rem;
  border-left: 4px solid var(--wmc-blue-500);
  border-radius: 0 var(--wmc-radius-lg) var(--wmc-radius-lg) 0;
  background: var(--wmc-blue-50);
  font-family: var(--wmc-font-display);
  font-size: clamp(1.08rem, 2vw, 1.35rem);
  font-weight: 600;
  line-height: 1.45;
  color: var(--wmc-navy-900);
}

/* ---------- vision band ---------- */

.vision {
  position: relative;
  overflow: hidden;
  background: var(--wmc-gradient);
  color: #fff;
}
.vision::before {
  content: "";
  position: absolute;
  top: 50%;
  right: -8rem;
  width: 30rem;
  height: 30rem;
  margin-top: -15rem;
  background: url("../img/pattern-compass-white.svg") center / contain no-repeat;
  opacity: .55;
  pointer-events: none;
}
.vision .wrap {
  position: relative;
  display: grid;
  gap: 1.5rem;
  padding-block: clamp(3rem, 7vw, 5rem);
}
.vision .eyebrow { color: var(--wmc-blue-300); }
.vision blockquote { margin: 0; }
.vision blockquote p {
  max-width: 50rem;
  font-family: var(--wmc-font-display);
  font-size: clamp(1.25rem, 2.8vw, 1.95rem);
  font-weight: 600;
  line-height: 1.4;
  text-wrap: pretty;
}

.vision-mark {
  display: grid;
  place-items: center;
  width: 4.25rem;
  height: 4.25rem;
  border-radius: 50%;
  background: #fff;
  color: var(--wmc-navy-900);
}
.vision-mark .icon { width: 2rem; height: 2rem; }

@media (min-width: 56em) {
  .vision .wrap { grid-template-columns: auto 1fr; gap: 3rem; align-items: center; }
  .vision-mark { width: 5.5rem; height: 5.5rem; }
  .vision-mark .icon { width: 2.6rem; height: 2.6rem; }
}

/* ---------- mission ---------- */

.mission {
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: mission;
}
.mission li { counter-increment: mission; }
.mission li::after {
  content: counter(mission, decimal-leading-zero);
  position: absolute;
  top: 1.2rem;
  right: 1.4rem;
  font-family: var(--wmc-font-display);
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1;
  color: var(--wmc-blue-100);
}

@media (min-width: 40em) {
  .mission { grid-template-columns: repeat(2, 1fr); }
  .mission li:last-child { grid-column: 1 / -1; }
}
/* Three over two, the second row centred. */
@media (min-width: 62em) {
  .mission { grid-template-columns: repeat(6, 1fr); }
  .mission li { grid-column: span 2; }
  .mission li:nth-child(4) { grid-column: 2 / span 2; }
  .mission li:nth-child(5) { grid-column: 4 / span 2; }
}

/* ---------- why join ---------- */

.why { text-align: center; padding-inline: clamp(0rem, 2vw, 1rem); }
.why h3 { font-size: 1.25rem; }
.why p { color: var(--wmc-slate); max-width: 22rem; margin-inline: auto; }

.why-icon {
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  margin: 0 auto 1.25rem;
  border-radius: 50%;
  background: var(--wmc-navy-900);
  color: #fff;
  box-shadow: 0 0 0 6px var(--wmc-blue-100);
}
.why-icon .icon { width: 2rem; height: 2rem; }

/* ---------- places ---------- */

.places {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 40em) { .places { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) { .places { grid-template-columns: repeat(4, 1fr); } }

.place {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.35rem 1.4rem;
  border: 1px solid var(--wmc-line);
  border-radius: var(--wmc-radius-lg);
  background: #fff;
}
.section-tint .place { border-color: transparent; box-shadow: var(--wmc-shadow); }
.place > span:last-child { display: flex; flex-direction: column; }

.place-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--wmc-blue-100);
  color: var(--wmc-blue-700);
}
.place-main .place-icon { background: var(--wmc-navy-900); color: #fff; }

.place-kind {
  font-family: var(--wmc-font-display);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--wmc-blue-700);
}
.place-city {
  font-family: var(--wmc-font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--wmc-navy-900);
}
.place-note { font-size: .9rem; color: var(--wmc-slate); }

/* ---------- membership ---------- */

.checklist {
  display: grid;
  gap: .9rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.checklist li { display: flex; align-items: flex-start; gap: .8rem; }

.tick {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.65rem;
  height: 1.65rem;
  margin-top: .1rem;
  border-radius: 50%;
  background: var(--wmc-blue-100);
  color: var(--wmc-blue-700);
}
.tick .icon { width: 1rem; height: 1rem; }

.note {
  margin-top: 1.75rem;
  padding: 1rem 1.2rem;
  border-radius: 10px;
  background: var(--wmc-blue-50);
  font-size: .95rem;
  color: var(--wmc-slate);
}

.steps {
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.5rem);
  margin: 0 0 clamp(2rem, 4vw, 2.75rem);
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.steps li {
  position: relative;
  padding: clamp(1.35rem, 3vw, 1.75rem);
  border-radius: var(--wmc-radius-lg);
  background: #fff;
  box-shadow: var(--wmc-shadow);
  counter-increment: step;
}
.steps li::before {
  content: "Step " counter(step);
  font-family: var(--wmc-font-display);
  display: block;
  margin-bottom: .4rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--wmc-blue-700);
}
.steps h3 { margin-bottom: .45rem; padding-right: 2.75rem; font-size: 1.2rem; }  /* clear of the icon */
.steps p { font-size: 1rem; color: var(--wmc-slate); }

.step-icon {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--wmc-blue-100);
  color: var(--wmc-navy-900);
}
.step-icon .icon { width: 1.2rem; height: 1.2rem; }

@media (min-width: 48em) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68em) { .steps { grid-template-columns: repeat(4, 1fr); } }

.download {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.25rem;
  padding: clamp(1.25rem, 3vw, 1.6rem);
  border: 1px solid var(--wmc-blue-300);
  border-radius: var(--wmc-radius-lg);
  background: #fff;
}
.download-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 12px;
  background: var(--wmc-navy-900);
  color: #fff;
}
.download-icon .icon { width: 1.6rem; height: 1.6rem; }
.download-body { flex: 1 1 14rem; }
.download-body h3 { margin: 0 0 .2rem; font-size: 1.05rem; }
.download-meta { margin: 0; font-size: .875rem; color: var(--wmc-slate); }

@media (max-width: 30em) {
  .download .btn { flex: 1 1 100%; }
}

.form-parts { display: grid; gap: 1rem; margin: 0; }
.form-parts > div {
  padding: 1.1rem 1.25rem;
  border-left: 3px solid var(--wmc-blue-500);
  background: var(--wmc-blue-50);
  border-radius: 0 10px 10px 0;
}
.form-parts dt { margin-bottom: .2rem; font-family: var(--wmc-font-display); font-weight: 700; color: var(--wmc-navy-900); }
.form-parts dd { margin: 0; font-size: .98rem; color: var(--wmc-slate); }

/* ---------- contact ---------- */

.contact-card h2 { font-size: 1.35rem; margin-bottom: .75rem; }
.contact-card address { margin-bottom: 1.5rem; line-height: 1.7; }
.contact-card address strong { color: var(--wmc-navy-900); }
.contact-card p { margin-bottom: 1rem; }
.contact-big { font-size: clamp(1.05rem, 2.2vw, 1.2rem); font-weight: 600; }
.contact-big a { color: var(--wmc-navy-900); }
.contact-big a:hover { color: var(--wmc-blue-700); }

/* ---------- call to action ---------- */

.cta {
  position: relative;
  display: grid;
  gap: 1.75rem;
  padding: clamp(1.75rem, 5vw, 3.5rem);
  overflow: hidden;
  border-radius: var(--wmc-radius-lg);
  background: var(--wmc-gradient);
  color: #fff;
}
.cta::before {
  content: "";
  position: absolute;
  top: -8rem;
  right: -6rem;
  width: 24rem;
  height: 24rem;
  background: url("../img/pattern-compass-white.svg") center / contain no-repeat;
  opacity: .55;
  pointer-events: none;
}
.cta > * { position: relative; }
.cta h2 { margin-bottom: .45rem; color: #fff; }
.cta p { max-width: 36rem; color: rgb(255 255 255 / .82); }

@media (min-width: 56em) {
  .cta { grid-template-columns: 1fr auto; align-items: center; }
}
@media (max-width: 47.99em) {
  .vision::before,
  .cta::before { width: 14rem; height: 14rem; top: auto; bottom: -5rem; right: -5rem; margin-top: 0; }
}

/* ---------- footer ---------- */

.site-footer {
  position: relative;
  padding-top: clamp(3rem, 6vw, 4.5rem);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--wmc-navy-900);
  color: rgb(255 255 255 / .75);
  font-size: .95rem;
}

.footer-grid { display: grid; gap: 2.25rem; padding-bottom: 2.5rem; }
@media (min-width: 48em) {
  .footer-grid { grid-template-columns: 1.4fr 1fr 1.3fr; gap: 3rem; }
}

.site-footer h2 {
  margin-bottom: 1rem;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
}
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { color: var(--wmc-blue-300); text-decoration: underline; }

.footer-brand .brand { display: inline-block; padding-block: 0; }
.footer-brand .brand img { height: 3.75rem; }
.footer-tagline { margin: .75rem 0 1rem; font-family: var(--wmc-font-display); font-weight: 600; color: var(--wmc-blue-300); }
.site-footer > .wave { bottom: calc(100% - 1px); }
.footer-brand p { max-width: 24rem; }

.footer-links { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; }

.site-footer address { line-height: 1.7; }
.footer-mail { margin-top: 1rem; }

.footer-base {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: .35rem 2rem;
  padding-block: 1.25rem;
  border-top: 1px solid rgb(255 255 255 / .12);
  font-size: .82rem;
  color: rgb(255 255 255 / .55);
}
.footer-base p { margin: 0; }
.footer-credit strong,
.footer-credit a { font-weight: 600; color: rgb(255 255 255 / .85); }
/* Each footer item wraps as a whole — never "Brand / guidelines". */
.footer-base a,
.footer-credit strong { white-space: nowrap; }
/* Wide screens: "Powered by" sits on the right. (.footer-base p resets
   margins, so this needs the same weight to win.) */
@media (min-width: 48em) {
  .footer-base .footer-credit { margin-left: auto; }
}

/* ---------- apply page and forms ---------- */

.narrow { max-width: 52rem; }
.section-tight { padding-block: clamp(2rem, 5vw, 3rem); }
.section-flush { padding-top: 0; }

/* The two ways to apply, as big tappable cards. */
.option {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .3rem;
  padding: 1.4rem 4rem 1.4rem 1.5rem;
  border: 2px solid transparent;
  border-radius: var(--wmc-radius-lg);
  background: #fff;
  box-shadow: var(--wmc-shadow);
  color: var(--wmc-ink);
  text-decoration: none;
  transition: border-color .2s;
}
.option:hover { border-color: var(--wmc-blue-500); color: var(--wmc-ink); }
.option-num {
  font-family: var(--wmc-font-display);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--wmc-blue-700);
}
.option-title { font-family: var(--wmc-font-display); font-size: 1.2rem; font-weight: 700; color: var(--wmc-navy-900); }
.option-text { font-size: .95rem; color: var(--wmc-slate); }
.option-go {
  position: absolute;
  top: 50%;
  right: 1.25rem;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-top: -1.25rem;
  border-radius: 50%;
  background: var(--wmc-blue-100);
  color: var(--wmc-navy-900);
}
.option:hover .icon-arrow { transform: translateX(3px); }

.form-card {
  padding: clamp(1.25rem, 4vw, 2.5rem);
  border-radius: calc(var(--wmc-radius-lg) + 4px);
  background: #fff;
  box-shadow: var(--wmc-shadow);
}
.form-card > h2 { margin-bottom: .35rem; }
.form-intro { color: var(--wmc-slate); }

.form-section {
  min-width: 0;
  margin: clamp(1.5rem, 3vw, 2rem) 0 0;
  padding: clamp(1.5rem, 3vw, 2rem) 0 0;
  border: 0;
  border-top: 1px solid var(--wmc-line);
}
.form-section > legend {
  float: left;           /* lets the legend sit inside the fieldset like a heading */
  width: 100%;
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-bottom: 1.1rem;
  padding: 0;
  font-family: var(--wmc-font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--wmc-navy-900);
}
.form-section > legend + * { clear: left; }
.form-section > legend span {
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: var(--wmc-navy-900);
  color: #fff;
  font-size: .85rem;
}

.form-grid { display: grid; gap: 1.1rem 1.25rem; }
@media (min-width: 40em) {
  .form-grid { grid-template-columns: 1fr 1fr; }
  .field-wide { grid-column: 1 / -1; }
}

.field { min-width: 0; margin: 0; padding: 0; border: 0; }

.field label,
.field .label {
  display: block;
  margin-bottom: .35rem;
  padding: 0;
  font-size: .98rem;
  font-weight: 600;
  color: var(--wmc-navy-900);
}
.optional { font-weight: 400; color: var(--wmc-slate); }

.hint { margin: -.1rem 0 .5rem; font-size: .9rem; line-height: 1.5; color: var(--wmc-slate); }
.form-section > .hint { clear: left; }

.field input:not([type="radio"]):not([type="checkbox"]),
.field select,
.field textarea {
  display: block;
  width: 100%;
  min-height: 3rem;
  padding: .7rem .85rem;
  border: 1.5px solid var(--field-border);
  border-radius: 10px;
  background: #fff;
  color: var(--wmc-ink);
  font: inherit;
  font-size: 1rem;       /* 16px: stops iPhones zooming in on focus */
  line-height: 1.4;
  transition: border-color .15s, box-shadow .15s;
}
.field textarea { min-height: 6rem; resize: vertical; }
.field select {
  appearance: none;
  padding-right: 2.5rem;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b1b4d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right .8rem center / 1.1rem;
}
.field input::placeholder { color: #8b97ab; }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--wmc-blue-700);
  box-shadow: 0 0 0 3px rgb(46 139 201 / .3);
}

.field input[type="file"] {
  padding: .55rem;
  border-style: dashed;
  background: var(--wmc-blue-50);
  cursor: pointer;
}
.field input[type="file"]::file-selector-button {
  margin-right: .85rem;
  padding: .5rem 1rem;
  border: 0;
  border-radius: var(--wmc-radius);
  background: var(--wmc-navy-900);
  color: #fff;
  font: 600 .875rem var(--wmc-font-body);
  cursor: pointer;
}

/* Errors: a red edge, the message above the field, a summary at the top. */
.has-error { padding-left: 1rem; border-left: 4px solid var(--wmc-danger); }
.has-error input:not([type="radio"]):not([type="checkbox"]),
.has-error select,
.has-error textarea { border-color: var(--wmc-danger); }
.field-error { margin: 0 0 .45rem; font-size: .92rem; font-weight: 600; color: var(--wmc-danger); }

.alert {
  margin: 1.25rem 0;
  padding: 1rem 1.25rem;
  border-radius: 10px;
  font-size: .98rem;
}
.alert-error { border: 2px solid var(--wmc-danger); background: #fef3f2; color: #7a1a12; }
.alert-error:focus { outline: 3px solid var(--wmc-blue-500); outline-offset: 2px; }
.alert h3 { margin-bottom: .5rem; font-size: 1.05rem; color: #7a1a12; }
.alert ul { margin: 0; padding-left: 1.2rem; }
.alert li + li { margin-top: .25rem; }
.alert a { color: #7a1a12; font-weight: 600; }

/* Membership category, as selectable cards. */
.radio-cards { display: grid; gap: .75rem; }
@media (min-width: 40em) { .radio-cards { grid-template-columns: 1fr 1fr; } }

.field .radio-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  margin: 0;
  padding: 1rem 1.1rem;
  border: 1.5px solid var(--field-border);
  border-radius: 12px;
  background: #fff;
  font-weight: 400;
  cursor: pointer;
  transition: border-color .15s, background-color .15s;
}
.field .radio-card:hover { border-color: var(--wmc-blue-700); }
.field .radio-card:has(input:checked) {
  border-color: var(--wmc-navy-900);
  background: var(--wmc-blue-50);
  box-shadow: inset 0 0 0 1px var(--wmc-navy-900);
}
.radio-card-body { display: flex; flex-direction: column; gap: .1rem; }
.radio-card-title { font-weight: 700; color: var(--wmc-navy-900); }
.radio-card-detail { font-size: .85rem; color: var(--wmc-slate); }

.field input[type="radio"],
.field input[type="checkbox"] {
  flex: none;
  width: 1.3rem;
  height: 1.3rem;
  margin: .1rem 0 0;
  accent-color: var(--wmc-navy-900);
}

.field .check {
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  padding: 1rem 1.1rem;
  border-radius: 12px;
  background: var(--wmc-blue-50);
  cursor: pointer;
}

.declaration {
  display: grid;
  gap: .5rem;
  margin: 0 0 1.25rem;
  padding: 1rem 1.25rem 1rem 2.25rem;
  border-radius: 12px;
  background: var(--wmc-blue-50);
  font-size: .93rem;
}

.form-submit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1.25rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--wmc-line);
}
.form-submit .hint { flex: 1 1 14rem; margin: 0; }
.form-submit .btn[disabled] { opacity: .7; cursor: progress; }
@media (max-width: 30em) {
  .form-submit .btn { flex: 1 1 100%; }
}

/* Honeypot: off screen for people, still in the page for bots. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.upload-steps {
  display: grid;
  gap: .9rem;
  margin: 1.25rem 0 1.75rem;
  padding: 0;
  list-style: none;
  counter-reset: up;
}
.upload-steps li {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem 1rem;
  padding-left: 2.6rem;
  counter-increment: up;
}
.upload-steps li::before {
  content: counter(up);
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  background: var(--wmc-blue-100);
  color: var(--wmc-navy-900);
  font-size: .85rem;
  font-weight: 700;
}
.upload-steps li > span { flex: 1 1 16rem; }
.btn-meta { font-size: .85rem; color: var(--wmc-slate); white-space: nowrap; }

/* Sent. */
.done { text-align: center; }
.done-icon {
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  margin: 0 auto 1.5rem;
  border-radius: 50%;
  background: var(--wmc-success);
  color: #fff;
  box-shadow: 0 0 0 8px #dcfae6;
}
.done-icon .icon { width: 2.2rem; height: 2.2rem; }
.done .lead { max-width: 36rem; margin-inline: auto; }
.done-ref {
  display: inline-block;
  margin: .5rem 0 2rem;
  padding: .75rem 1.25rem;
  border-radius: 10px;
  background: var(--wmc-blue-50);
}
.done .actions { justify-content: center; }

/* ---------- brand guidelines page ---------- */

.logo-grid { align-items: stretch; }
.logo-card { display: flex; flex-direction: column; margin: 0; }
.logo-stage {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--wmc-line);
  border-radius: var(--wmc-radius-lg);
  background: var(--wmc-white);
}
.logo-stage img { width: 100%; height: 100%; object-fit: cover; }   /* the preview carries its own background */
.logo-stage-dark { border-color: transparent; background: var(--wmc-navy-900); }
.logo-card figcaption { padding: 1rem .25rem 0; }
.logo-card h3 { margin-bottom: .3rem; font-size: 1.1rem; }
.logo-card p { font-size: .95rem; color: var(--wmc-slate); }

.brand-rules { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.brand-rules h3 { margin-bottom: 1rem; }
.checklist-no .tick { background: #fef3f2; color: var(--wmc-danger); }

.swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.swatch {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--wmc-radius-lg);
  background: var(--wmc-white);
  box-shadow: var(--wmc-shadow);
}
.swatch-chip {
  display: flex;
  align-items: flex-end;
  height: 5.5rem;
  padding: .6rem .9rem;
  border-bottom: 1px solid var(--wmc-line);
  font-family: var(--wmc-font-display);
  font-size: .85rem;
  font-weight: 700;
  color: var(--wmc-navy-900);
}
.swatch-chip-dark { color: #fff; border-bottom-color: transparent; }
.swatch-name { padding: .8rem .9rem 0; font-family: var(--wmc-font-display); font-weight: 700; color: var(--wmc-navy-900); }
.swatch-use { padding: .2rem .9rem .9rem; font-size: .9rem; color: var(--wmc-slate); }

.type-card .type-sample { margin-bottom: 1rem; font-size: clamp(2.25rem, 5vw, 3rem); line-height: 1.1; color: var(--wmc-navy-900); }
.type-card .type-sample-display { font-family: var(--wmc-font-display); font-weight: 800; }
.type-card .type-sample-body { font-family: var(--wmc-font-body); font-weight: 600; }
.type-card .eyebrow { margin-top: 1rem; }

/* ---------- brand pack ---------- */

/* View, don't take: no text selection, no dragging, no long-press "Save
   image" on phones. site.js also blocks the right-click menu here. */
[data-protect] img {
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}

.kit-row-title { margin: 2rem 0 .9rem; font-size: 1.1rem; }
.kit-row-title:first-of-type { margin-top: 0; }

.kit-grid { display: grid; gap: clamp(1rem, 2.5vw, 1.5rem); margin-top: clamp(1rem, 2.5vw, 1.5rem); }
@media (min-width: 40em) {
  .kit-grid-2 { grid-template-columns: repeat(2, 1fr); }
  .kit-grid-3 { grid-template-columns: repeat(3, 1fr); }
  .kit-grid-4 { grid-template-columns: repeat(4, 1fr); }
}

.kit-item { margin: 0; }
.kit-item img {
  width: 100%;
  border: 1px solid var(--wmc-line);
  border-radius: var(--wmc-radius);
  background: var(--wmc-white);
}
.kit-logo img { aspect-ratio: 4 / 3; object-fit: contain; }
.kit-paper img { box-shadow: var(--wmc-shadow); }
.kit-item figcaption { padding-top: .55rem; font-size: .9rem; color: var(--wmc-slate); }

.kit-icons {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
  gap: .75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.kit-icons li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  padding: 1.1rem .5rem;
  border-radius: var(--wmc-radius);
  background: var(--wmc-white);
  box-shadow: var(--wmc-shadow);
  color: var(--wmc-navy-900);
  font-size: .85rem;
}
.kit-icons .icon { width: 2rem; height: 2rem; }

/* ---------- narrow screens ---------- */

/* Nothing may push the page wider than the screen — a sideways scroll on a
   foldable (280px) also stops the browser scrolling to the footer. Grid
   columns may shrink below their longest word, and long unbroken strings
   (email addresses) wrap when there is no room for them. */
.grid > *,
.split > *,
.form-grid > *,
.form-parts > div,
.footer-grid > * { min-width: 0; }
a[href^="mailto:"],
.contact-big,
.form-parts dd,
.form-parts dt { overflow-wrap: anywhere; }

/* ---------- motion preferences ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

/* The applicant's optional copy of their own application. */
.done-copy{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.625rem;
  margin:0 0 2rem;
}
.done-copy .btn{gap:.5rem}
.done-copy-note{
  font-size:.875rem;
  color:var(--wmc-slate);
  max-width:34ch;
  text-align:center;
}

/* ---------------------------------------------------------------------
   Leadership

   The photographs supplied run from 254px to 1106px, so they are shown
   small - 220px for the President, 132px in the grid - where even the
   weakest of them stays sharp. Circular, which also hides that some are
   studio portraits on white and others are snapshots in an office.
   --------------------------------------------------------------------- */

.leader-photo{
  border-radius:50%;
  object-fit:cover;
  background:var(--wmc-blue-50);
  box-shadow:0 0 0 1px var(--wmc-line), 0 2px 8px rgba(29,43,58,.08);
}

/* Justification is set site-wide, near the top of this file. */

/* The President, on his own above the rest. */
.leader-feature{
  display:grid;
  /* The text column is capped rather than filling the container. On a wide
     monitor the wrap grows to 1600px, which would run these paragraphs to
     ~110 characters a line - roughly half as comfortable to read as the
     60-75 that prose wants. */
  grid-template-columns:220px minmax(0,42rem);
  justify-content:start;
  gap:clamp(1.5rem,4vw,3rem);
  align-items:start;
}
.leader-feature .leader-body > :first-child{margin-top:0}

/* What he does for the Council is the reason the page exists, so it reads
   in full ink and a little larger. The professional background under it is
   supporting detail and steps back into slate - the same order the cards
   below use, where the background is folded away entirely. Using .lead here
   put the muted style on the important paragraph and the dark one under it,
   which read backwards. */
.leader-statement{
  font-size:clamp(1.05rem,1.4vw,1.15rem);
  line-height:1.62;
  color:var(--wmc-ink);
}
/* The President's background folds away exactly as everyone else's does, so
   the page offers one consistent gesture. A rule above it keeps the break
   the old always-open block used to give. */
.leader-feature .leader-more{
  margin-top:1.25rem;
  padding-top:1.25rem;
  border-top:1px solid var(--wmc-line);
}
.leader-feature h2{margin:.25rem 0 .75rem}
.leader-photo-lg{width:220px;height:220px}

@media (max-width:760px){
  .leader-feature{grid-template-columns:1fr;justify-items:center;text-align:center}
  .leader-photo-lg{width:160px;height:160px}
  .leader-feature .leader-body{text-align:left}
}

/* The rest, two across. */
.leader{
  display:grid;
  grid-template-columns:132px 1fr;
  gap:1.25rem;
  align-items:start;
}
.leader .leader-photo{width:132px;height:132px}
.leader h3{margin:0 0 .125rem}
.leader-role{
  margin:0 0 .75rem;
  font-weight:600;
  color:var(--wmc-blue-700);
}
.leader p{margin:0 0 .75rem}

@media (max-width:560px){
  .leader{grid-template-columns:1fr;justify-items:center;text-align:center}
  .leader .leader-body{text-align:left;width:100%}
}

/* "Background" — the fuller professional history, folded away so the page
   stays readable. Open it and it reads as ordinary paragraphs. */
.leader-more{margin-top:.25rem}
.leader-more summary{
  display:inline-flex;
  align-items:center;
  gap:.375rem;
  padding:.25rem 0;
  font-size:.875rem;
  font-weight:600;
  color:var(--wmc-blue-700);
  cursor:pointer;
  list-style:none;
}
.leader-more summary::-webkit-details-marker{display:none}
.leader-more summary::after{
  content:"";
  width:.45em;height:.45em;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-.1em);
  transition:transform var(--ease,.2s);
}
.leader-more[open] summary::after{transform:rotate(-135deg) translateY(-.1em)}
.leader-more summary:hover{color:var(--wmc-navy-900)}
.leader-more summary:focus-visible{
  outline:2px solid var(--wmc-blue-500);
  outline-offset:3px;
  border-radius:4px;
}
/* Once someone opens a fold they are reading it, so it is set at full body
   size in ink rather than the small slate it used to be - the statement
   above still leads, but on size now instead of on colour. Slate at 15px
   was legible (6.90:1) but asked more of the reader than it needed to. */
.leader-more > p{
  margin-top:.75rem;
  font-size:1rem;
  line-height:1.65;
  color:var(--wmc-ink);
}
.leader-more > p + p{margin-top:.85rem}