/* ==========================================================================
   MRS Baking Distribution - design system
   --------------------------------------------------------------------------
   Thesis: MRS sells beautiful bread, but what it is really selling is that
   the bread arrives. So the page holds two voices at once. An editorial serif
   carries the story and the craft; a monospaced utility face carries every
   operational fact (products, partners, routes, delivery days, territory),
   set in the body face, uppercase and tracked.
   The brand indigo is treated as a surface, not an accent, because it is the
   one thing in this category nobody else owns.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300..700;1,6..72,300..600&family=Archivo:wght@400;700&display=swap');

/* --- tokens ------------------------------------------------------------- */
:root {
  --ink:        #14163A;   /* deep indigo-black, body text                  */
  --ink-mid:    #4A4D72;   /* secondary text                                */
  --ink-soft:   #6E7192;   /* captions, meta                                */
  --navy:       #2E3790;   /* inherited brand primary                       */
  --navy-deep:  #1B2058;   /* immersive panels                              */
  --navy-lift:  #4A56C4;   /* links, hover                                  */
  --amber:      #B5761E;   /* bread-crust accent, used sparingly            */
  --paper:      #FCFBF9;   /* warm white page surface                       */
  --stone:      #EFECE5;   /* band separation                               */
  --line:       rgba(20,22,58,.14);
  --line-soft:  rgba(20,22,58,.08);
  --line-dark:  rgba(255,255,255,.22);

  --font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-body:    'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --wrap:       1320px;
  --wrap-wide:  1320px;   /* same as --wrap: every section aligns */
  --wrap-text:  820px;

  --gap:        clamp(1.25rem, 0.9rem + 1.4vw, 2.25rem);
  --band:       clamp(4rem, 2.4rem + 6.4vw, 8.5rem);   /* vertical rhythm   */
  --band-tight: clamp(2.75rem, 1.8rem + 3.8vw, 5rem);
}

/* --- reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--navy); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--navy-lift); }

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

/* --- type --------------------------------------------------------------- */
.display-xl, .display-l, .display-m, .display-s {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.018em;
  line-height: 1.06;
  margin: 0;
  text-wrap: balance;
}
.display-xl { font-size: clamp(2.4rem, 1.5rem + 3.6vw, 4.5rem); }
.display-l  { font-size: clamp(1.95rem, 1.4rem + 2.1vw, 2.95rem); line-height: 1.1; }
.display-m  { font-size: clamp(1.55rem, 1.28rem + 1.15vw, 2.15rem); line-height: 1.16; }
.display-s  { font-size: clamp(1.25rem, 1.12rem + .55vw, 1.5rem); line-height: 1.22; letter-spacing: -0.01em; }

.display-xl em, .display-l em, .display-m em {
  font-style: italic;
  font-weight: 300;
}

.lead {
  font-size: clamp(1.1rem, 1.02rem + 0.42vw, 1.32rem);
  line-height: 1.62;
  color: var(--ink-mid);
  margin: 0 0 1.25rem;
}

.body-copy p { margin: 0 0 1.15rem; }
.body-copy p:last-child { margin-bottom: 0; }

/* the utility voice: every operational fact on this site is set in mono */
.eyebrow {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--amber);
  margin: 0 0 1.1rem;
  display: flex;
  align-items: center;
  gap: .7rem;
}
.eyebrow::before {
  content: "";
  width: 1.6rem;
  height: 1px;
  background: currentColor;
  flex: none;
}
.eyebrow--plain::before { display: none; }

.util { font-family: var(--font-body); font-variant-numeric: tabular-nums; }

/* --- layout ------------------------------------------------------------- */
.wrap      { width: 100%; max-width: var(--wrap);      margin-inline: auto; padding-inline: clamp(1.15rem, .6rem + 2.2vw, 2.5rem); }
.wrap-wide { width: 100%; max-width: var(--wrap-wide); margin-inline: auto; padding-inline: clamp(1.15rem, .6rem + 2.2vw, 2.5rem); }
.measure   { max-width: var(--wrap-text); }

.band       { padding-block: var(--band); }
.band-tight { padding-block: var(--band-tight); }
.band--stone { background: var(--stone); }

.stack-sm > * + * { margin-top: .85rem; }
.stack   > * + * { margin-top: 1.5rem; }
.stack-lg > * + * { margin-top: 2.75rem; }

.section-head { max-width: 46rem; margin-bottom: clamp(2.25rem, 1.5rem + 2.4vw, 3.75rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }

/* --- buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  padding: 1.05rem 1.9rem;
  border: 1px solid var(--navy);
  border-radius: 2px;
  background: var(--navy);
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.btn:hover { background: var(--navy-lift); border-color: var(--navy-lift); color: #fff; }

.btn--ghost { background: transparent; color: var(--navy); }
.btn--ghost:hover { background: var(--navy); color: #fff; }

.btn--light { background: #fff; border-color: #fff; color: var(--navy-deep); }
.btn--light:hover { background: rgba(255,255,255,.86); border-color: rgba(255,255,255,.86); color: var(--navy-deep); }

.btn--onnavy { background: transparent; border-color: rgba(255,255,255,.55); color: #fff; }
.btn--onnavy:hover { background: #fff; border-color: #fff; color: var(--navy-deep); }

.btn-row { display: flex; flex-wrap: wrap; gap: .85rem; }

/* text link with a moving rule, used for card actions */
.link-arrow {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--navy);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
}
.link-arrow::after {
  content: "";
  width: 1.5rem;
  height: 1px;
  background: currentColor;
  transition: width .22s ease;
}
.link-arrow:hover::after { width: 2.4rem; }

/* ==========================================================================
   SIGNATURE: the manifest strip
   A delivery docket rendered as typography. Hairline rules, mono, tabular
   numerals. Carries the operational facts wherever they appear.
   ========================================================================== */
.manifest {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
}
.manifest__item {
  padding: 1.5rem 1.35rem;
  border-left: 1px solid var(--line-soft);
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
.manifest__item:first-child { border-left: 0; }
.manifest__figure {
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.6rem, 1.3rem + 1.1vw, 2.2rem);
  font-weight: 700;
  line-height: 1;
  color: var(--navy);
}
.manifest__label {
  font-family: var(--font-body);
  font-size: 1rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
/* On narrow screens the auto-fit columns wrap and the left border on the
   first item of a wrapped row reads as detached. Fix to two columns and
   switch to horizontal rules. */
@media (max-width: 40rem) {
  .manifest { grid-template-columns: repeat(2, 1fr); }
  .manifest__item { border-left: 0; border-top: 1px solid var(--line-soft); padding: 1.15rem 1rem; }
  .manifest__item:nth-child(-n+2) { border-top: 0; }
  .manifest--invert .manifest__item { border-top-color: rgba(255,255,255,.14); }
}

/* inverted, for use inside indigo panels */
.manifest--invert { border-color: var(--line-dark); }
.manifest--invert .manifest__item { border-left-color: rgba(255,255,255,.14); }
.manifest--invert .manifest__figure { color: #fff; }
.manifest--invert .manifest__label { color: rgba(255,255,255,.62); }

/* --- indigo panel ------------------------------------------------------- */
.panel-navy {
  background: var(--navy-deep);
  color: #fff;
}
.panel-navy .lead { color: rgba(255,255,255,.78); }
.panel-navy .eyebrow { color: #E0A85A; }  /* amber lifted to read on indigo */
/* :not(.btn) matters. A bare `.panel-navy a` out-specifies .btn--light and
   silently renders a white button label on a white button. */
.panel-navy a:not(.btn) { color: #fff; }

/* --- photo cards (no icons: the brief asks for photography) ------------- */
.card-grid {
  display: grid;
  gap: clamp(1.1rem, .7rem + 1.4vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
}
.card-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); }

.card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: 2px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color .2s ease, transform .2s ease;
}
.card:hover { border-color: var(--navy); transform: translateY(-3px); }
.card:hover .card__title { color: var(--navy); }

.card__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--stone); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.card:hover .card__media img { transform: scale(1.035); }

.card__body { padding: 1.6rem 1.5rem 1.75rem; display: flex; flex-direction: column; gap: .7rem; flex: 1; }
.card__title { font-family: var(--font-display); font-size: 1.35rem; line-height: 1.2; margin: 0; transition: color .18s ease; }
.card__text { margin: 0; font-size: 1rem; color: var(--ink-mid); flex: 1; }
.card__action { margin-top: .45rem; }

/* --- feature row: image beside text, alternating ------------------------ */
/* stretch, not center: the photo fills its column so it reads as balanced
   with the text beside it instead of floating with dead space below. */
.feature {
  display: grid;
  gap: clamp(1.75rem, 1rem + 3.4vw, 4.5rem);
  align-items: stretch;
  grid-template-columns: 1fr;
}
@media (min-width: 62rem) {
  .feature { grid-template-columns: 1fr 1fr; }
  .feature--flip .feature__media { order: 2; }
}
.feature__media img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 2px; }
.feature > *:not(.feature__media) { align-self: center; }
.feature__media--tall img { aspect-ratio: 4 / 3; }

/* --- list of plain facts ------------------------------------------------ */
.ticklist { list-style: none; margin: 0; padding: 0; }
.ticklist li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: .7rem;
  color: var(--ink-mid);
}
.ticklist li::before {
  content: "";
  position: absolute;
  left: 0; top: .68em;
  width: .55rem; height: 1px;
  background: var(--amber);
}
.panel-navy .ticklist li { color: rgba(255,255,255,.8); }

/* --- definition grid (how we help, why choose) -------------------------- */
.defgrid {
  display: grid;
  gap: clamp(1.5rem, 1rem + 1.8vw, 2.75rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}
.defgrid__item { border-top: 1px solid var(--line); padding-top: 1.25rem; }
.defgrid__term { font-family: var(--font-display); font-size: 1.22rem; line-height: 1.25; margin: 0 0 .55rem; }
.defgrid__desc { margin: 0; font-size: 1rem; color: var(--ink-mid); }
.panel-navy .defgrid__item { border-top-color: var(--line-dark); }
.panel-navy .defgrid__desc { color: rgba(255,255,255,.75); }

/* --- header ------------------------------------------------------------- */
.site-head {
  position: sticky; top: 0; z-index: 50;
  background: rgba(252,251,249,.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-soft);
}
.site-head__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: .35rem; }
.brand { display: flex; align-items: center; gap: 1rem; text-decoration: none; color: var(--ink); }
/* The logo file is a 512px square favicon: navy artwork on an opaque white
   disc. On the warm-white page that disc shows as a visible circle, so
   multiply drops the white out and leaves just the badge. */
/* The square file is mostly padding: the oval fills the width but only ~54%
   of the height. Cropping to the artwork keeps the badge at its full 200px
   width while cutting the header height roughly in half. */
.brand img {
  width: 175px;
  aspect-ratio: 175 / 101;
  height: auto;
  object-fit: cover;
  object-position: center;
  mix-blend-mode: multiply;
}
@media (max-width: 61.99rem) { .brand img { width: 104px; } }
.brand__tag {
  font-family: var(--font-body); font-size: 1rem; letter-spacing: .11em;
  text-transform: uppercase; color: var(--ink-soft); line-height: 1.5;
  white-space: nowrap;
}
@media (max-width: 34rem) { .brand__tag { display: none; } }

.nav { display: flex; align-items: center; gap: 1.35rem; }
.nav a { font-size: 1.125rem; font-weight: 400; color: var(--ink); text-decoration: none; white-space: nowrap; }
.nav a:hover { color: var(--navy); }
.nav__cta { font-size: .875rem !important; font-weight: 700 !important; letter-spacing: .1em; text-transform: uppercase; border: 1px solid var(--navy); color: var(--navy) !important; padding: .65rem 1.15rem; border-radius: 2px; }
.nav__cta:hover { background: var(--navy); color: #fff !important; }

.nav-toggle { display: none; }
@media (max-width: 71.99rem) {
  .nav { display: none; }
  .nav-toggle {
    display: inline-flex; align-items: center; gap: .5rem;
    font-family: var(--font-body); font-size: 1rem; letter-spacing: .12em; text-transform: uppercase;
    background: none; border: 1px solid var(--line); border-radius: 2px; padding: .6rem .9rem; color: var(--ink); cursor: pointer;
  }
  .site-head__inner.is-open + .nav-panel { display: block; }
  .nav-panel { display: none; border-top: 1px solid var(--line-soft); padding: 1rem 0 1.5rem; }
  .nav-panel a { display: block; padding: .6rem 0; font-size: 1rem; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line-soft); }
}
@media (min-width: 72rem) { .nav-panel { display: none; } }

/* --- footer ------------------------------------------------------------- */
.site-foot { background: var(--navy-deep); color: rgba(255,255,255,.78); padding-block: clamp(3rem, 2rem + 3vw, 5rem) 2.5rem; }
.site-foot a:not(.btn) { color: rgba(255,255,255,.78); text-decoration: none; }
.site-foot a:not(.btn):hover { color: #fff; }
.foot-grid { display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.foot-grid h3 { font-family: var(--font-body); font-size: 1rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.5); margin: 0 0 1rem; font-weight: 700; }
.foot-grid ul { list-style: none; margin: 0; padding: 0; }
.foot-grid li { margin-bottom: .55rem; font-size: 1rem; }
.foot-base { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.16); display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; font-family: var(--font-body); font-size: 1rem; letter-spacing: .06em; color: rgba(255,255,255,.5); }

/* --- hero --------------------------------------------------------------- */
.hero { padding-top: clamp(2.25rem, 1.4rem + 2.8vw, 4.5rem); }
.hero__inner {
  display: grid;
  gap: clamp(2rem, 1.1rem + 3.2vw, 4rem);
  align-items: stretch;
  /* no bottom padding: the manifest strip butts straight up against the
     bottom edge of the hero photograph */
  padding-bottom: 0;
}
@media (min-width: 62rem) {
  .hero__inner { grid-template-columns: 1.15fr 1fr; }
}
.hero__media img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 2px; }
@media (min-width: 62rem) { .hero__media img { aspect-ratio: 1 / 1; } }

/* --- two-column tick list ----------------------------------------------- */
.ticklist--cols { columns: 2; column-gap: 2.25rem; }
.ticklist--cols li { break-inside: avoid; }
@media (max-width: 40rem) { .ticklist--cols { columns: 1; } }

/* --- the MRS Grant: the one place amber leads --------------------------- */
.grant__inner {
  background: #fff;
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--amber);
  padding: clamp(1.85rem, 1.1rem + 3vw, 3.5rem);
}

/* Full container-width amber rule: marks a section as special without a
   floating card that breaks the container alignment. */
.rule-amber { border-top: 3px solid var(--amber); margin-bottom: clamp(2rem, 1.3rem + 2.4vw, 3.25rem); }

/* --- partner logo wall -------------------------------------------------- */
/* Borders rather than gap fills: with `gap` the container background shows
   through the empty cells at the end of the last row as grey blocks. And no
   aspect-ratio on the cell, because it stops the cell stretching to the row
   height and leaves the background short under the smaller logos. */
.logo-wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 10.5rem), 1fr));
  background: #fff;
  border-top: 1px solid var(--line-soft);
  border-left: 1px solid var(--line-soft);
}
.logo-wall__cell {
  border-right: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  min-height: 8.5rem;
  display: grid;
  place-items: center;
  padding: 1.35rem;
  transition: background .18s ease;
}
.logo-wall__cell:hover { background: var(--stone); }
.logo-wall__cell img { max-height: 5rem; max-width: 100%; width: auto; object-fit: contain; }

/* --- solution chips: product links into the existing catalog ------------ */
.solution-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
}
.solution {
  background: #fff;
  padding: 1.35rem 1.4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  text-decoration: none;
  color: var(--ink);
  font-size: 1rem;
  transition: background .18s ease, color .18s ease;
}
.solution::after { content: "\2192"; color: var(--ink-soft); transition: transform .2s ease, color .18s ease; }
.solution:hover { background: var(--navy); color: #fff; }
.solution:hover::after { color: #fff; transform: translateX(3px); }

/* --- resource centre chrome --------------------------------------------- */
.signup { display: flex; gap: .7rem; flex-wrap: wrap; justify-content: center; margin-top: 2rem; }
.signup input {
  flex: 1 1 16rem; max-width: 22rem; font-family: var(--font-body); font-size: 1rem; padding: .95rem 1rem;
  border: 1px solid rgba(255,255,255,.4); border-radius: 2px; background: rgba(255,255,255,.08); color: #fff;
}
.signup input::placeholder { color: rgba(255,255,255,.5); }
.signup input:focus { outline: none; border-color: #fff; }

/* --- editorial article body --------------------------------------------- */
.prose { max-width: var(--wrap-text); }
.prose p { margin: 0 0 1.3rem; }
.prose h2 { font-family: var(--font-display); font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); line-height: 1.2; margin: 2.6rem 0 1rem; }
.prose h3 { font-family: var(--font-display); font-size: 1.3rem; margin: 2rem 0 .75rem; }
.prose ul { margin: 0 0 1.3rem; padding-left: 1.1rem; }
.prose li { margin-bottom: .5rem; }
.prose blockquote {
  margin: 2.2rem 0;
  padding-left: 1.5rem;
  border-left: 2px solid var(--amber);
  font-family: var(--font-display);
  font-size: 1.3rem;
  line-height: 1.45;
  color: var(--ink);
}

/* --- timeline: a real chronology, so the markers carry information ------ */
/* six milestones over three columns: two rows of three */
.timeline {
  margin-top: clamp(2.5rem, 1.6rem + 3vw, 4rem);
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.timeline__item:nth-child(3n) { border-right: 0; }
@media (max-width: 48rem) {
  .timeline { grid-template-columns: repeat(2, 1fr); }
  .timeline__item:nth-child(3n) { border-right: 1px solid var(--line-soft); }
  .timeline__item:nth-child(2n) { border-right: 0; }
}
@media (max-width: 30rem) {
  .timeline { grid-template-columns: 1fr; }
  .timeline__item { border-right: 0 !important; }
}
.timeline__item {
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line-soft);
  padding: 1.5rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.timeline__mark {
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--amber);
  line-height: 1;
}
.timeline__text { font-size: 1rem; color: var(--ink-mid); }

.note-line {
  margin: 1rem 0 0;
  font-size: 1rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* --- team grid ---------------------------------------------------------- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr));
  gap: clamp(.6rem, .4rem + .6vw, 1rem);
}
.team-grid__cell { aspect-ratio: 1; overflow: hidden; background: var(--stone); border-radius: 2px; }
.team-grid__cell img { width: 100%; height: 100%; object-fit: cover; }

/* --- testimonials ------------------------------------------------------- */
.quote-grid {
  display: grid;
  gap: clamp(1.1rem, .7rem + 1.4vw, 1.85rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}
.quote { margin: 0; background: #fff; border: 1px solid var(--line-soft); border-top: 2px solid var(--navy); padding: 1.85rem 1.65rem 1.5rem; }
.quote blockquote {
  margin: 0 0 1.1rem;
  font-family: var(--font-display);
  font-size: 1.16rem;
  line-height: 1.5;
  color: var(--ink);
}
.quote blockquote::before { content: "\201C"; }
.quote blockquote::after  { content: "\201D"; }
.quote figcaption { font-size: 1rem; letter-spacing: .11em; text-transform: uppercase; color: var(--ink-soft); }

/* --- catalog search ----------------------------------------------------- */
.catalog-search {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  max-width: 44rem;
  margin-inline: auto;
}
.catalog-search input {
  flex: 1 1 18rem;
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: #fff;
  color: var(--ink);
}
.catalog-search input:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(46,55,144,.13); }

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

/* --- article ------------------------------------------------------------ */
.crumbs { font-size: 1rem; letter-spacing: .11em; text-transform: uppercase; color: var(--ink-soft); }
.crumbs a { color: var(--ink-soft); text-decoration: none; }
.crumbs a:hover { color: var(--navy); }
.crumbs span { margin-inline: .35rem; }

.article-hero {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  border-radius: 2px;
}
@media (max-width: 48rem) { .article-hero { aspect-ratio: 3 / 2; } }

/* --- forms -------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: .45rem; }
.field label, .fieldset__legend {
  font-family: var(--font-body); font-size: 1rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-soft);
}
.field input, .field select, .field textarea {
  font-family: var(--font-body); font-size: 1rem; color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-radius: 2px;
  padding: .85rem .9rem; width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--navy); outline: none; box-shadow: 0 0 0 3px rgba(46,55,144,.13); }
.field textarea { min-height: 9rem; resize: vertical; }
.field-grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.fieldset { border: 0; margin: 0 0 2.25rem; padding: 0; }
.fieldset__legend { display: block; margin-bottom: 1rem; padding: 0; }
.checks { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.check { display: flex; align-items: flex-start; gap: .6rem; font-size: 1rem; color: var(--ink-mid); cursor: pointer; }
.check input { margin-top: .3rem; accent-color: var(--navy); flex: none; }

/* --- contact layout ----------------------------------------------------- */
.contact-layout { display: grid; gap: clamp(1.75rem, 1rem + 3vw, 3.5rem); align-items: start; }
@media (min-width: 62rem) { .contact-layout { grid-template-columns: 1.6fr 1fr; } }
.contact-form { min-width: 0; }
.contact-aside { display: grid; gap: 1.25rem; align-content: start; }
.aside-card { background: #fff; border: 1px solid var(--line-soft); border-top: 3px solid var(--amber); padding: 1.75rem 1.6rem; }
.aside-card p { margin: 0 0 .9rem; font-size: 1rem; color: var(--ink-mid); }
.aside-card--navy { background: var(--navy-deep); border-color: var(--navy-deep); border-top-color: var(--amber); color: #fff; }
.aside-card--navy p { color: rgba(255,255,255,.78); }
.aside-card--navy .eyebrow { color: #E0A85A; }
/* the base link colour is navy, which is invisible on this card */
.aside-card--navy a:not(.btn) { color: #fff; }
.aside-card--navy a:not(.btn):hover { color: rgba(255,255,255,.8); }

/* --- review cover page -------------------------------------------------- */
.cover { padding-block: clamp(3rem, 2rem + 4vw, 6rem); }
.cover__head { max-width: 46rem; margin-bottom: clamp(3rem, 2rem + 4vw, 5rem); }
.cover__head img { margin-bottom: 1.5rem; }
.cover__section { margin-bottom: clamp(3rem, 2rem + 4vw, 5.5rem); }
.cover__section > .display-m { margin-bottom: 1.25rem; }
.cover__list { border-top: 1px solid var(--line); margin-top: 1.75rem; }
.cover__row {
  display: grid;
  gap: .35rem 1.5rem;
  grid-template-columns: 1fr;
  padding: 1.35rem 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  transition: background .18s ease, padding-inline .18s ease;
}
@media (min-width: 56rem) {
  .cover__row { grid-template-columns: 15rem 1fr 6rem; align-items: baseline; }
}
.cover__row:hover { background: var(--stone); padding-inline: .9rem; }
.cover__name { font-family: var(--font-display); font-size: 1.2rem; line-height: 1.25; }
.cover__desc { font-size: 1rem; color: var(--ink-mid); }
.cover__go { justify-self: start; }
@media (min-width: 56rem) { .cover__go { justify-self: end; } }

/* --- style guide -------------------------------------------------------- */
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); gap: 1rem; }
.swatch__chip { height: 6rem; border-radius: 2px; border: 1px solid var(--line-soft); }
.swatch__name { font-family: var(--font-body); font-size: 1rem; margin-top: .6rem; display: block; }
.swatch__hex { font-family: var(--font-body); font-size: 1rem; color: var(--ink-soft); text-transform: uppercase; }
.spec { border-top: 1px solid var(--line); padding-top: 1rem; margin-top: 2rem; }
.spec__meta { font-family: var(--font-body); font-size: 1rem; letter-spacing: .11em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: .75rem; }

/* --- utility topbar ------------------------------------------------------ */
.topbar {
  background: var(--ink);
  color: rgba(255,255,255,.78);
  font-family: var(--font-body);
  font-size: 1rem;
  letter-spacing: .02em;
  padding: .55rem 0;
}
.topbar__inner {
  display: flex; flex-wrap: wrap; gap: .4rem 1.5rem;
  align-items: center; justify-content: space-between;
}
.topbar__links { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; align-items: center; }
.topbar a { color: #fff; text-decoration: none; }
.topbar a:hover { text-decoration: underline; text-underline-offset: 3px; }
.topbar__review { color: rgba(255,255,255,.55) !important; }
@media (max-width: 48rem) {
  .topbar__msg { display: none; }
  .topbar__inner { justify-content: center; }
}

/* --- scroll-shrink header ------------------------------------------------ */
.site-head .brand img { transition: width .25s ease; }
.site-head.is-scrolled .brand img { width: 110px; }
@media (max-width: 61.99rem) { .site-head.is-scrolled .brand img { width: 84px; } }

/* --- wider text blocks --------------------------------------------------- */
.measure-wide { max-width: 62rem; }

/* --- CTA over a photograph ----------------------------------------------- */
.cta-photo { position: relative; isolation: isolate; overflow: hidden; }
.cta-photo__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: -2;
}
.cta-photo::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(20,22,58,.80), rgba(27,32,88,.90));
}
.cta-photo, .cta-photo .display-l, .cta-photo .display-m { color: #fff; }
.cta-photo .lead { color: rgba(255,255,255,.82); }
.cta-photo a:not(.btn) { color: #fff; }

/* --- icon grid: used only where the copy asks for icons ------------------ */
.icongrid {
  display: grid;
  gap: clamp(1.5rem, 1rem + 1.8vw, 2.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.icongrid__item { border-top: 1px solid var(--line); padding-top: 1.35rem; }
.icongrid__icon {
  width: 2.6rem; height: 2.6rem; margin-bottom: 1rem;
  color: var(--navy); display: block;
}
.icongrid__icon svg { width: 100%; height: 100%; stroke: currentColor; fill: none;
  stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.icongrid__term { font-family: var(--font-display); font-size: 1.22rem; line-height: 1.25; margin: 0 0 .55rem; }
.icongrid__desc { margin: 0; color: var(--ink-mid); }
.panel-navy .icongrid__item { border-top-color: var(--line-dark); }
.panel-navy .icongrid__icon { color: #E0A85A; }
.panel-navy .icongrid__desc { color: rgba(255,255,255,.75); }

/* --- secondary line inside a heading ------------------------------------- */
.head-sub {
  display: block;
  margin-top: .55rem;
  font-size: clamp(1.35rem, 1.05rem + 1.2vw, 1.9rem);
  font-style: italic;
  font-weight: 300;
  line-height: 1.25;
  color: var(--ink-mid);
  letter-spacing: 0;
}
.panel-navy .head-sub, .cta-photo .head-sub { color: rgba(255,255,255,.78); }

/* --- split: heading one side, body the other, filling the container ------ */
.split { display: grid; gap: clamp(1.5rem, 1rem + 2.6vw, 3.5rem); align-items: start; }
@media (min-width: 62rem) { .split { grid-template-columns: 1fr 1fr; } }


/* Mixed-case text never drops below 16px. */
.topbar, .foot-base, .swatch__name, .util,
.timeline__text, .solution, .card__text, .defgrid__desc, .icongrid__desc {
  font-size: 1rem;
}

/* Set in capitals, so 14px stays legible and reads as a label rather than
   competing with the body copy. Applies only where text-transform is set. */
.eyebrow, .btn, .link-arrow, .manifest__label, .brand__tag, .nav-toggle,
.foot-grid h3, .chip, .note-line, .quote figcaption, .crumbs,
.field label, .fieldset__legend, .swatch__hex, .spec__meta,
.side-block h3, .contact-quick .util {
  font-size: .875rem;
}
.nav__cta { font-size: .875rem !important; }

/* trim the button box so it stays proportionate at the smaller label size */
.btn { padding: .95rem 1.7rem; }

/* --- one consistent prefooter CTA --------------------------------------- */
.cta-photo__inner {
  max-width: 60rem;
  margin-inline: auto;
  text-align: center;
}
.cta-photo__inner .lead { margin-top: 1.25rem; }
.cta-photo__inner .btn-row { justify-content: center; margin-top: 2rem; }

/* --- reverse logo on the dark footer ------------------------------------
   No image tooling on this box to make a white asset, so the navy-on-white
   file is inverted to white-on-black and screened over the dark panel,
   which drops the black away and leaves a clean white mark. */
.foot-logo {
  width: 150px;
  aspect-ratio: 175 / 101;
  object-fit: cover;
  object-position: center;
  filter: invert(1) grayscale(1) brightness(1.9);
  mix-blend-mode: screen;
  margin-bottom: 1.25rem;
}

/* --- article: reading column with a sidebar ----------------------------- */
.article-layout { display: grid; gap: clamp(2rem, 1.2rem + 3vw, 4rem); align-items: start; }
@media (min-width: 62rem) { .article-layout { grid-template-columns: minmax(0,1fr) 20rem; } }
.article-side { display: grid; gap: 1.75rem; align-content: start; }
.side-block { border-top: 2px solid var(--navy); padding-top: 1.1rem; }
.side-block h3 {
  font-family: var(--font-body); font-size: .875rem; letter-spacing: .11em;
  text-transform: uppercase; color: var(--ink-soft); margin: 0 0 1rem; font-weight: 700;
}
.side-list { list-style: none; margin: 0; padding: 0; }
.side-list li { margin-bottom: .85rem; line-height: 1.4; }
.side-list a { color: var(--ink); text-decoration: none; }
.side-list a:hover { color: var(--navy); }
.side-recent { display: grid; gap: 1rem; }
.side-recent a { display: grid; grid-template-columns: 5rem 1fr; gap: .85rem; align-items: center; text-decoration: none; color: var(--ink); }
.side-recent img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 2px; }
.side-recent span { font-size: 1rem; line-height: 1.35; }
.side-recent a:hover span { color: var(--navy); }
.side-search { display: flex; gap: .5rem; }
.side-search input {
  flex: 1 1 auto; min-width: 0; font-family: var(--font-body); font-size: 1rem;
  padding: .8rem .85rem; border: 1px solid var(--line); border-radius: 2px; background: #fff; color: var(--ink);
}
.side-search input:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(46,55,144,.13); }

/* --- team gallery beside its text --------------------------------------- */
.team-split { display: grid; gap: clamp(1.75rem, 1rem + 3vw, 3.5rem); align-items: center; }
@media (min-width: 62rem) { .team-split { grid-template-columns: 1fr 1.05fr; } }
/* 8 headshots over 3 columns lays out 3 / 3 / 2 */
.team-split .team-grid { grid-template-columns: repeat(3, 1fr); }

/* --- our promise -------------------------------------------------------- */
.promise { display: grid; gap: clamp(1.5rem, 1rem + 2vw, 3rem); }
@media (min-width: 62rem) { .promise { grid-template-columns: .8fr 1.2fr; } }
.promise__list { list-style: none; margin: 0; padding: 0; counter-reset: p; }
.promise__list li {
  border-top: 1px solid var(--line-dark);
  padding: 1.15rem 0 1.15rem 3.25rem;
  position: relative;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.05rem + .7vw, 1.5rem);
  line-height: 1.35;
}
.promise__list li::before {
  counter-increment: p;
  content: counter(p, decimal-leading-zero);
  position: absolute; left: 0; top: 1.45rem;
  font-family: var(--font-body); font-size: 1rem; letter-spacing: .1em;
  color: #E0A85A;
}


/* --- resource centre -----------------------------------------------------
   The section title, search and category rail share a row with the lead
   article rather than sitting in a band above it, so the newest piece is the
   first thing on the page and the header stops being dead space. */
.res-hero { padding-block: clamp(1.5rem, 1rem + 1.6vw, 2.5rem) clamp(2.5rem, 1.6rem + 3vw, 4rem); }

.res-issue {
  display: flex; flex-wrap: wrap; gap: .4rem 1.5rem;
  margin: 0 0 clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
  padding-top: .9rem;
  border-top: 2px solid var(--ink);
  font-size: .875rem; letter-spacing: .11em; text-transform: uppercase;
  color: var(--ink-soft);
}
.res-issue span:first-child { color: var(--ink); font-weight: 700; }

.res-hero__grid { display: grid; gap: clamp(2rem, 1.2rem + 3vw, 3.5rem); align-items: start; }
@media (min-width: 62rem) { .res-hero__grid { grid-template-columns: 19rem minmax(0, 1fr); } }

.res-rail h1 { margin-bottom: 1.1rem; }
.res-standfirst { margin: 0 0 1.5rem; color: var(--ink-mid); }

.res-find {
  display: flex; align-items: center; gap: .5rem;
  border-bottom: 1px solid var(--line); padding-bottom: .45rem;
  transition: border-color .18s ease;
}
.res-find:focus-within { border-bottom-color: var(--navy); }
.res-find input {
  flex: 1 1 auto; min-width: 0; border: 0; background: transparent;
  font-family: var(--font-body); font-size: 1rem; color: var(--ink); padding: .3rem 0;
}
.res-find input:focus { outline: none; }
.res-find button { border: 0; background: none; cursor: pointer; padding: .2rem; color: var(--navy); line-height: 0; }
.res-find svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }

/* the lead article */
.res-lead { display: block; text-decoration: none; color: inherit; }
.res-lead__media { overflow: hidden; background: var(--stone); border-radius: 2px; }
.res-lead__media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .5s ease; }
.res-lead:hover .res-lead__media img { transform: scale(1.025); }
.res-lead__body { padding-top: 1.5rem; }
.res-lead:hover .display-l { color: var(--navy); }
.res-lead__meta { margin: 1rem 0 1.15rem; color: var(--ink-soft); }

/* --- contact: quick details under the hero copy ------------------------- */
.contact-quick { display: flex; flex-wrap: wrap; gap: 1.75rem; margin-top: 1.75rem; }
.contact-quick a {
  display: grid; gap: .15rem; text-decoration: none; color: var(--ink);
  font-size: 1.15rem; font-weight: 700;
}
.contact-quick .util {
  font-size: .875rem; letter-spacing: .11em; text-transform: uppercase;
  color: var(--ink-soft); font-weight: 400;
}
.contact-quick a:hover { color: var(--navy); }


/* --- shorter hero photo, for pages where the image is supporting rather
   than the main event ---------------------------------------------------- */
.hero:not(.hero--manifest) .hero__inner { padding-bottom: clamp(2.5rem, 1.6rem + 3vw, 4.5rem); }
.hero--short .hero__media { align-self: start; }
.hero--short .hero__media img { height: auto; aspect-ratio: 3 / 2; }
@media (min-width: 62rem) { .hero--short .hero__media img { aspect-ratio: 3 / 2; } }


/* --- resource centre: industry and date filters -------------------------- */
.res-selects { display: grid; gap: .6rem; margin-top: 1rem; }
.res-selects select {
  width: 100%; font-family: var(--font-body); font-size: 1rem; color: var(--ink);
  background: transparent; border: 0; border-bottom: 1px solid var(--line);
  padding: .55rem 0; cursor: pointer;
}
.res-selects select:focus { outline: none; border-bottom-color: var(--navy); }
@media (max-width: 61.99rem) { .res-selects { grid-template-columns: 1fr 1fr; gap: 1rem; } }


/* --- testimonial carousel ------------------------------------------------
   Slides are stacked in one grid cell so the container is always as tall as
   the longest quote and nothing jumps as it rotates. */
.carousel { max-width: 52rem; margin-inline: auto; }
.carousel__viewport { display: grid; }
.carousel__slide {
  grid-area: 1 / 1;
  margin: 0;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .45s ease;
}
.carousel__slide.is-active { opacity: 1; visibility: visible; }
.carousel__slide blockquote {
  margin: 0 0 1.5rem;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.1rem + 1vw, 1.85rem);
  line-height: 1.45;
  color: var(--ink);
}
.carousel__slide blockquote::before { content: "\201C"; }
.carousel__slide blockquote::after  { content: "\201D"; }
.carousel__slide figcaption { color: var(--ink-soft); }

.carousel__nav { display: flex; align-items: center; justify-content: center; gap: 1.5rem; margin-top: 2.25rem; }
.carousel__arrow {
  width: 2.75rem; height: 2.75rem; flex: none;
  display: grid; place-items: center;
  background: none; border: 1px solid var(--line); border-radius: 50%;
  color: var(--navy); cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.carousel__arrow:hover { background: var(--navy); border-color: var(--navy); color: #fff; }
.carousel__arrow svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.carousel__dots { display: flex; gap: .6rem; }
.carousel__dot {
  width: .6rem; height: .6rem; padding: 0;
  border: 1px solid var(--navy); border-radius: 50%;
  background: transparent; cursor: pointer;
  transition: background .18s ease, transform .18s ease;
}
.carousel__dot.is-active { background: var(--navy); transform: scale(1.25); }