/* ==========================================================================
   Site stylesheet. Shared unchanged across every site built on this base.
   Colours and fonts are injected as custom properties from config.php —
   the values below are only fallbacks.
   ========================================================================== */

:root {
  --navy:       #1b2e56;
  --navy-deep:  #142240;
  --blue:       #5b8cd6;
  --blue-deep:  #2d5ba0;
  --teal:       #4c8b9e;
  --band:       #f2f5f9;

  --paper:      #ffffff;
  --ink-body:   #2c3a4e;
  --ink-soft:   #5a6980;
  --rule:       #dfe4ec;
  --rule-dark:  rgba(255,255,255,.16);

  --font-display: Georgia, "Times New Roman", serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --measure: 42rem;   /* reading width */
  --wide:    71.25rem; /* site container — matches the old theme */
  --ease: cubic-bezier(.2,.7,.3,1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

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

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

a { color: var(--blue-deep); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--navy); }

h1, h2, h3 { color: var(--navy); }

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

.skip { position: absolute; left: -9999px; background: var(--navy); color: #fff; padding: .75rem 1.25rem; font-weight: 700; text-decoration: none; z-index: 60; }
.skip:focus { left: 1rem; top: 1rem; color: #fff; }

.wrap { width: 100%; max-width: var(--wide); margin: 0 auto; padding-left: 15px; padding-right: 15px; }
.wrap--narrow { max-width: var(--measure); }

.eyebrow { margin: 0 0 1rem; font-size: .72rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--blue-deep); }

.standfirst { margin: 0; max-width: 38rem; font-size: 1.125rem; line-height: 1.6; color: var(--ink-soft); }

/* --- Header --------------------------------------------------------------- */

.site-head { background: #fff; border-bottom: 3px solid var(--navy); position: relative; z-index: 20; }

.site-head__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem; padding-top: 18px; padding-bottom: 18px;
}

/* Never let the logo or the menu button be compressed to make room. */
.site-head__logo, .nav-toggle { flex: 0 0 auto; }

.site-head__logo img { display: block; height: 64px; width: auto; }

.site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 1.75rem; font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.site-nav a { color: var(--navy); text-decoration: none; }
.site-nav a:hover { color: var(--blue-deep); }
.site-nav a[aria-current="page"] { color: var(--blue-deep); text-decoration: underline; text-decoration-color: var(--blue); text-underline-offset: 6px; }

.site-nav__cta { border: 1px solid var(--rule); padding: .6rem 1.2rem; transition: background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease); }
.site-nav__cta:hover { background: var(--navy); border-color: var(--navy); color: #fff; }

.nav-toggle { display: none; align-items: center; gap: .6rem; font: inherit; cursor: pointer; background: none; border: 1px solid var(--rule); padding: .6rem 1rem; color: var(--navy); font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.nav-toggle__bars { position: relative; width: 18px; height: 2px; background: currentColor; }
.nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor; }
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after { top: 6px; }

/* --- Hero (homepage) ------------------------------------------------------ */

.hero { position: relative; background: var(--navy); color: #fff; overflow: hidden; }

.hero::before {
  content: ""; position: absolute; inset: 2.5rem 1.5rem;
  background-image: var(--hero-image, none);
  background-size: contain;              /* whole mark visible, never cropped */
  background-position: center;
  background-repeat: no-repeat;
  opacity: .09;
}

.hero__inner { position: relative; display: grid; grid-template-columns: 1.15fr .85fr; gap: 3rem; align-items: center; padding-top: 4.5rem; padding-bottom: 4.5rem; }

.hero h1 {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(2.25rem, 4.6vw, 3.5rem);
  line-height: 1.08; letter-spacing: -.02em;
  color: #fff; margin: 0 0 1.25rem;
}

.hero__sub { margin: 0; font-size: 1.125rem; color: rgba(255,255,255,.8); max-width: 30rem; }

.routes { display: flex; flex-direction: column; gap: 1px; background: rgba(255,255,255,.18); }

.route {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: var(--blue); color: var(--navy); text-decoration: none;
  padding: 1.15rem 1.5rem; font-weight: 600;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.route:hover { background: var(--navy); color: #fff; }
.route__arrow { transition: transform .2s var(--ease); }
.route:hover .route__arrow { transform: translateX(4px); }

/* --- Interior page head --------------------------------------------------- */

.page-head { background: var(--band); border-bottom: 1px solid var(--rule); }
.page-head .wrap { padding-top: 3.25rem; padding-bottom: 3.25rem; }
/* Sits to the left of the opening paragraphs, which wrap around it. */
.page-portrait {
  float: left; width: 9rem; height: 9rem;
  object-fit: cover; border-radius: 50%;
  margin: .4rem 1.75rem .75rem 0;
}
@media (max-width: 40rem) {
  .page-portrait { float: none; display: block; margin: 0 auto 1.75rem; }
}

.page-head h1 {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(2.25rem, 6vw, 3.75rem);
  line-height: 1.05; letter-spacing: -.025em; margin: 0 0 1.15rem;
}

/* --- Homepage bands ------------------------------------------------------- */

/* The intro band closes with the call-to-action. The band, the section
   that follows it and the call-to-action itself each contributed their own
   spacing, which stacked into a very large empty gap under the box. All of
   the spacing around the CTA is set here, in one place, rather than left
   to add up. */
.band { padding: 4.5rem 0 3.5rem; }
.band__body.article__body > :last-child { margin-bottom: 0; }
.band__cta { padding-top: 2.5rem; }
.band__cta .cta { margin: 0; }
.band__body { max-width: 46rem; margin: 0 auto; }
.band__body.article__body { padding-top: 0; padding-bottom: 0; font-size: 1.125rem; }

.seen-on {
  background: #fff; padding: 3rem 0 4.5rem;
  text-align: center;
}

/* The band above has already left its closing space, so this section adds
   none on top of it, and whatever leads the section starts flush instead of
   bringing a top margin of its own. Written as a rule about position rather
   than about the --first class, so the spacing holds if the markup changes. */
.band + .seen-on { padding-top: 0; }
.seen-on > .wrap > :first-child { margin-top: 0; }

/* Centred heading with a hairline running out to each side. */
.rule-heading {
  display: flex; align-items: center; gap: 1.75rem;
  margin: 0 0 2.5rem; color: var(--navy);
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(2rem, 2vw, 2.5rem);
  line-height: 1.15; letter-spacing: -.018em;
}
.rule-heading::before,
.rule-heading::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--rule); }
.rule-heading span { flex: 0 0 auto; }

.feature-video { max-width: 62rem; margin: 4rem auto 0; }
/* When the videos lead the section, they need no top margin and the logo
   row below them takes the separation instead. */
.feature-video--first { margin-top: 0; }
.feature-video + .rule-heading { margin-top: 4rem; }

.video-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: 2.5rem;
}
.feature-video .rule-heading { margin-bottom: 2rem; }
.feature-video .video-caption { text-align: center; }

.seen-on .eyebrow { text-align: center; }
.logo-strip {
  list-style: none; margin: 0 auto; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: center; gap: 1.75rem 3rem;
}

/* The source logos are wildly different shapes. Boxing each to the same
   height is what stops the row reading as a jumble. */
.logo-strip li {
  display: flex; align-items: center; justify-content: center;
  height: 68px; width: 11.5rem;
}
.logo-strip a { display: flex; align-items: center; justify-content: center; height: 100%; width: 100%; }
.logo-strip img {
  max-height: calc(100% * var(--logo-scale, 1));
  max-width: calc(100% * var(--logo-scale, 1));
  width: auto; height: auto;
  object-fit: contain; transition: transform .2s var(--ease);
}
.logo-strip a:hover img { transform: scale(1.04); }

.testimonials { padding: 4.5rem 0 5rem; background: var(--band); margin-bottom: 1rem; }

/* Without JavaScript this stays a plain stacked list, so every quote is on
   the page and readable. The rotator only engages once .is-live is added. */
.quote-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 2.5rem; }

.quote {
  text-align: center; max-width: 46rem; margin: 0 auto;
  background: #fff; border: 1px solid var(--rule);
  padding: 2.75rem 2.5rem 2.25rem;
  box-shadow: 0 2px 18px rgba(27,46,86,.06);
}
.quote blockquote { margin: 0 0 1.5rem; }
.quote blockquote p {
  margin: 0; font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.4vw, 1.625rem); line-height: 1.45;
  letter-spacing: -.008em; color: var(--navy);
}
.quote blockquote p::before { content: "\201C"; }
.quote blockquote p::after  { content: "\201D"; }

.quote__by { margin: 0; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--blue-deep); }
.quote__by span { display: block; margin-top: .35rem; font-weight: 400; letter-spacing: 0; text-transform: none; font-size: .875rem; color: var(--ink-soft); }

/* --- Rotator ------------------------------------------------------------- */

/* All cards share one grid cell. The two behind are nudged down and scaled
   back, so you can see there are more to come. Extra bottom padding on the
   container leaves room for them to peek out. */
.quote-rotator.is-live .quote-grid { display: grid; gap: 0; padding-bottom: 2.75rem; }

.quote-rotator.is-live .quote {
  grid-area: 1 / 1;
  opacity: 0; visibility: hidden; z-index: 0;
  transform: translateY(2.25rem) scale(.9);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}

.quote-rotator.is-live .quote.is-on {
  opacity: 1; visibility: visible; z-index: 3;
  transform: none;
}

.quote-rotator.is-live .quote.is-behind-1 {
  opacity: 1; visibility: visible; z-index: 2;
  transform: translateY(1.15rem) scale(.955);
  box-shadow: 0 1px 10px rgba(27,46,86,.05);
}

.quote-rotator.is-live .quote.is-behind-2 {
  opacity: 1; visibility: visible; z-index: 1;
  transform: translateY(2.25rem) scale(.91);
  box-shadow: none;
}

/* Only the front card is readable or reachable. */
.quote-rotator.is-live .quote.is-behind-1 > *,
.quote-rotator.is-live .quote.is-behind-2 > * { visibility: hidden; }

.quote-nav {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 1rem 1.25rem; margin-top: 2.5rem;
}

.quote-arrow {
  font: inherit; cursor: pointer; line-height: 1;
  background: none; border: 1px solid var(--rule); color: var(--navy);
  width: 2.5rem; height: 2.5rem; border-radius: 999px;
  transition: background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.quote-arrow:hover { background: var(--navy); border-color: var(--navy); color: #fff; }

.quote-dots { display: flex; align-items: center; gap: .5rem; }

/* --- Pause / play -------------------------------------------------------- */

.quote-play {
  display: inline-flex; align-items: center; justify-content: center;
  font: inherit; cursor: pointer; line-height: 1;
  background: none; border: 1px solid var(--rule); color: var(--navy);
  width: 2.5rem; height: 2.5rem; border-radius: 999px; padding: 0;
  transition: background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.quote-play:hover { background: var(--navy); border-color: var(--navy); color: #fff; }
.quote-play svg { width: 1rem; height: 1rem; fill: currentColor; }

/* The icons are swapped by the hidden attribute in JS, so they show
   correctly even before the stylesheet arrives. */
.quote-play svg[hidden] { display: none; }

.quote-rotator.is-held .quote-play {
  background: var(--navy); border-color: var(--navy); color: #fff;
}

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

.quote-dot {
  cursor: pointer; padding: 0;
  width: .5rem; height: .5rem; border-radius: 999px;
  background: #c3cede; border: 0;
  transition: background .18s var(--ease), transform .18s var(--ease);
}
.quote-dot:hover { background: var(--blue); }
.quote-dot.is-on { background: var(--blue-deep); transform: scale(1.5); }


/* --- Article / page body -------------------------------------------------- */

.article__head { padding-top: 3rem; }

.crumbs { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 1.75rem; }
.crumbs a { color: var(--blue-deep); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs span { margin: 0 .3rem; }

.article__head h1 { font-family: var(--font-display); font-weight: 500; font-size: clamp(2.125rem, 5.5vw, 3rem); line-height: 1.1; letter-spacing: -.022em; margin: 0 0 1.25rem; }

.article__standfirst { font-family: var(--font-display); font-size: 1.3125rem; line-height: 1.55; color: var(--ink-soft); margin: 0 0 1.75rem; }

.article__byline { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin: 0 0 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.article__byline time { color: var(--blue-deep); }

.article__body { padding-top: 2.5rem; padding-bottom: 1rem; }
.article__body > *:first-child { margin-top: 0; }
.article__body p { margin: 0 0 1.4rem; }

.article .article__body > p:first-child::first-letter {
  float: left; font-family: var(--font-display); font-weight: 500;
  font-size: 3.9rem; line-height: .82; padding: .1em .12em 0 0; color: var(--blue-deep);
}

.article__body h2 { font-family: var(--font-display); font-weight: 600; font-size: 1.75rem; line-height: 1.24; letter-spacing: -.012em; margin: 3rem 0 1rem; }
.article__body h3 { font-size: 1.0625rem; font-weight: 700; margin: 2.25rem 0 .65rem; }
.article__body ul, .article__body ol { margin: 0 0 1.4rem; padding-left: 1.2rem; }
.article__body li { margin-bottom: .55rem; }
.article__body li::marker { color: var(--blue); }
.article__body a { text-decoration: underline; }
.article__body hr { border: 0; border-top: 1px solid var(--rule); margin: 2.75rem 0; }

.article__body blockquote { margin: 2.5rem 0; padding-left: 1.75rem; border-left: 3px solid var(--blue); font-family: var(--font-display); font-size: 1.375rem; line-height: 1.5; color: var(--navy); }
.article__body blockquote p:last-child { margin-bottom: 0; }

.article__body table { width: 100%; border-collapse: collapse; margin: 0 0 1.75rem; font-size: .9375rem; }
.article__body th, .article__body td { text-align: left; padding: .7rem .75rem; border-bottom: 1px solid var(--rule); }
.article__body th { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); border-bottom-color: var(--navy); }

.callout { margin: 2.25rem 0; padding: 1.4rem 1.6rem; background: var(--band); border-left: 3px solid var(--blue); }
.callout p { margin: 0; }
.callout p + p { margin-top: .9rem; }

/* The enquiries and quotations notice under each form. Quieter than body
   copy, but not so quiet that it reads as fine print nobody is meant to. */
.form-notice { margin: 2.5rem 0 0; padding-top: 1.75rem; border-top: 1px solid var(--rule); color: var(--ink-soft); font-size: .9375rem; }
.form-notice__head { margin: 0 0 .85rem; font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--blue-deep); font-family: var(--font-body); }
.form-notice p { margin: 0 0 1rem; }
.form-notice p:last-child { margin-bottom: 0; }
.callout strong { color: var(--navy); }

/* --- Article index -------------------------------------------------------- */

.filters { display: flex; flex-wrap: wrap; gap: .5rem; padding: 2.25rem 0 .5rem; }
.chip { font: inherit; font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); background: transparent; border: 1px solid var(--rule); border-radius: 999px; padding: .5rem 1.1rem; cursor: pointer; transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease); }
.chip:hover { border-color: var(--blue); color: var(--blue-deep); }
.chip.is-on { background: var(--navy); border-color: var(--navy); color: #fff; }

.index-list { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.index-list > li { border-top: 1px solid var(--rule); }
.index-list > li:last-child { border-bottom: 1px solid var(--rule); }

.entry { display: grid; grid-template-columns: 7rem 1fr; gap: 0 2.5rem; align-items: start; padding: 2.25rem 1.25rem; margin: 0 -1.25rem; text-decoration: none; color: inherit; transition: background .2s var(--ease); }
.entry:hover { background: var(--band); color: inherit; }

.stamp { display: block; border-left: 2px solid var(--rule); padding-left: .9rem; transition: border-color .2s var(--ease); }
.entry:hover .stamp { border-left-color: var(--blue); }
.stamp__day { display: block; font-family: var(--font-display); font-weight: 500; font-size: 2.25rem; line-height: 1; letter-spacing: -.02em; color: var(--navy); }
.stamp__rest { display: block; margin-top: .35rem; font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--blue-deep); }

.entry__main { display: block; }
.entry__topic { display: inline-block; margin-bottom: .6rem; font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--teal); }
.entry__title { display: block; font-family: var(--font-display); font-weight: 500; font-size: 1.65rem; line-height: 1.22; letter-spacing: -.012em; color: var(--navy); margin-bottom: .5rem; }
.entry:hover .entry__title { text-decoration: underline; text-decoration-color: var(--blue); }
.entry__summary { display: block; color: var(--ink-soft); }
.entry__more { display: inline-block; margin-top: .9rem; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--blue-deep); }
.entry__more::after { content: " \2192"; display: inline-block; transition: transform .2s var(--ease); }
.entry:hover .entry__more::after { transform: translateX(4px); }

.empty { padding: 3rem 0; color: var(--ink-soft); }

/* --- Contact -------------------------------------------------------------- */

.form-only { padding-top: 3.5rem; padding-bottom: 1rem; }

.contact-grid { display: grid; grid-template-columns: 1.4fr .8fr; gap: 4rem; padding-top: 3.5rem; padding-bottom: 1rem; align-items: start; }

.contact-aside h2 { font-family: var(--font-display); font-weight: 500; font-size: 1.5rem; margin: 0 0 1.5rem; }
.contact-item { margin: 0 0 1.25rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--rule); }
.contact-item span { display: block; font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: .3rem; }
.contact-extra { padding-top: 1rem; font-size: .9375rem; }

.field { margin-bottom: 1.5rem; }
.field label { display: block; margin-bottom: .5rem; font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.field .hint { font-weight: 400; letter-spacing: 0; text-transform: none; color: #8593a8; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }

input[type=text], input[type=email], input[type=tel], select, textarea {
  font: inherit; width: 100%; padding: .8rem .9rem;
  border: 1px solid #cfd7e3; background: #fff; color: var(--ink-body); border-radius: 2px;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--blue); outline-offset: 1px; border-color: var(--blue); }
textarea { resize: vertical; line-height: 1.6; }

.prefixed { display: flex; align-items: stretch; }
.prefixed span {
  display: flex; align-items: center; padding: 0 .9rem;
  background: var(--band); border: 1px solid #cfd7e3; border-right: 0;
  color: var(--ink-soft); font-weight: 500;
}
.prefixed input { border-radius: 0; }

.field__error { margin: .5rem 0 0; font-size: .875rem; color: #b3453f; font-weight: 600; letter-spacing: 0; text-transform: none; }

.check { display: flex; align-items: flex-start; gap: .7rem; font-size: .9375rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink-body); }
.check input { flex: 0 0 auto; margin-top: .35rem; }

/* Honeypot — off-screen rather than display:none, which some bots detect. */
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.notice { padding: 1.5rem 1.75rem; margin: 0 0 1.75rem; border-left: 4px solid; }
.notice--good { background: #eaf3ea; border-color: #3f8a4a; }
.notice--good h2 { font-family: var(--font-display); font-weight: 500; font-size: 1.5rem; margin: 0 0 .5rem; color: #23522a; }
.notice--good p { margin: 0; color: #23522a; }
.notice--bad { background: #fdeeee; border-color: #b3453f; color: #7d2b27; }

/* --- Video ---------------------------------------------------------------- */

.band__heading {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.75rem, 3.4vw, 2.25rem); line-height: 1.15;
  letter-spacing: -.018em; margin: 0 0 1.5rem;
}

.video-frame {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  background: var(--navy); overflow: hidden;
  box-shadow: 0 2px 26px rgba(27,46,86,.16);
}
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.video-caption {
  margin: 1rem 0 0;
  font-size: .78rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--blue-deep);
}

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

.cards {
  list-style: none; margin: 3rem 0 3.5rem; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1px; background: var(--rule);
  border: 1px solid var(--rule);
}

.card {
  background: #fff; padding: 2.5rem 1.75rem;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}

/* The source icons are black line art. A mask lets them take the brand
   colour exactly, rather than approximating it with a filter. */
.card__icon {
  display: block; width: 52px; height: 52px; margin-bottom: 1.35rem;
  background-color: var(--blue-deep);
  -webkit-mask-image: var(--icon); mask-image: var(--icon);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}

.card__title {
  font-family: var(--font-display); font-weight: 500;
  font-size: 1.3125rem; line-height: 1.25; margin: 0 0 .65rem;
}

.card__text { margin: 0; font-size: .9375rem; color: var(--ink-soft); line-height: 1.6; }

/* --- Chambers ------------------------------------------------------------- */

.site-foot__chambers { margin-top: 1rem !important; font-size: .875rem; }
.site-foot__chambers strong { color: #fff; font-weight: 600; }

.chambers-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin: 0 0 1.5rem; }
.chambers-card { border-top: 2px solid var(--blue); padding-top: 1.1rem; }
.chambers-card h3 {
  font-family: var(--font-display); font-weight: 500; font-size: 1.1875rem;
  margin: 0 0 .5rem; color: var(--navy);
}
.chambers-card p { margin: 0 0 .35rem; font-size: .9375rem; color: var(--ink-soft); }

/* --- Call to action ------------------------------------------------------- */

.cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.75rem; margin: 2.5rem 0; padding: 2.5rem; background: var(--navy); color: rgba(255,255,255,.78); }
/* The body above the call to action ends on its own bottom margin, which
   stacked with the box's top margin and left ~108px of dead space. */
.wrap--narrow.article__body > :last-child { margin-bottom: 0; }
.cta > div { flex: 1 1 22rem; }
.cta h2 { font-family: var(--font-display); font-weight: 500; font-size: 1.75rem; line-height: 1.2; letter-spacing: -.015em; color: #fff; margin: 0 0 .65rem; }
.cta p { margin: 0; max-width: 32rem; }

.button { display: inline-block; flex: 0 0 auto; font: inherit; cursor: pointer; border: 0; background: var(--blue); color: var(--navy); padding: .95rem 2rem; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; transition: background .18s var(--ease), color .18s var(--ease); }
.button:hover { background: var(--navy); color: #fff; }
.cta .button:hover { background: #fff; color: var(--blue-deep); }

/* --- Prev / next ---------------------------------------------------------- */

.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin-bottom: 2.5rem; }
.pager__item { display: block; background: #fff; padding: 1.5rem 1.6rem; text-decoration: none; color: var(--navy); transition: background .2s var(--ease); }
.pager__item:hover { background: var(--band); color: var(--navy); }
.pager__item--right { text-align: right; }
.pager__item:only-child { grid-column: 1 / -1; }
.pager__label { display: block; margin-bottom: .4rem; font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--blue-deep); }
.pager__title { display: block; font-family: var(--font-display); font-size: 1.125rem; line-height: 1.3; }

/* --- Preview banner (demo only) ------------------------------------------ */

.demo-bar { background: #fdf1e3; border-bottom: 1px solid #f0d9b6; color: #8a5a1c; font-size: .8125rem; }
.demo-bar .wrap { padding-top: .7rem; padding-bottom: .7rem; }
.demo-bar a { color: #8a5a1c; }

/* --- Draft banner --------------------------------------------------------- */

.draft-bar { background: #fdf1e3; border-bottom: 1px solid #f0d9b6; color: #8a5a1c; font-size: .875rem; }
.draft-bar .wrap { padding-top: .8rem; padding-bottom: .8rem; }
.draft-bar a { color: #8a5a1c; }

/* --- Footer --------------------------------------------------------------- */

.disclaimer { font-size: .8125rem; line-height: 1.65; color: var(--ink-soft); border-top: 1px solid var(--rule); padding-top: 1.5rem; margin: 0 0 4rem; }

.site-foot { background: var(--navy-deep); color: rgba(255,255,255,.7); font-size: .9375rem; }
.site-foot a { color: #fff; text-decoration: none; }
.site-foot a:hover { color: var(--blue); text-decoration: underline; }

.site-foot__inner { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 3rem; padding-top: 3.5rem; padding-bottom: 2.5rem; }
.site-foot__inner p { margin: 0 0 .4rem; }
/* No logo down here — the name carries it, and the header already has the
   mark. */
.site-foot__name {
  font-family: var(--font-display); font-weight: 500;
  font-size: 1.4375rem; line-height: 1.2; color: #fff;
  margin: 0 0 .75rem !important;
}
.site-foot__brand p { max-width: 26rem; }
.site-foot__head { font-family: var(--font-display); font-size: 1.125rem; color: #fff; margin-bottom: .9rem !important; }
.site-foot__address { color: rgba(255,255,255,.55); margin-top: 1rem !important; font-size: .875rem; }

.site-foot__legal { border-top: 1px solid var(--rule-dark); padding-top: 1.5rem; padding-bottom: 2.5rem; font-size: .8125rem; display: flex; flex-wrap: wrap; gap: .5rem 2rem; justify-content: space-between; }
.site-foot__legal p { margin: 0; }
.site-foot__credit { font-size: .75rem; color: rgba(255,255,255,.45); }
.site-foot__credit a { color: rgba(255,255,255,.6); }
.site-foot__credit a:hover { color: var(--blue); }

.site-foot__social a { margin-left: 1.25rem; }
.site-foot__social a:first-child { margin-left: 0; }

/* --- Small screens -------------------------------------------------------- */

@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr; gap: 2.25rem; padding-top: 3rem; padding-bottom: 3rem; }
  .contact-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .site-foot__inner { grid-template-columns: 1fr 1fr; }
  .site-foot__brand { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .nav-toggle { display: inline-flex; }
  .site-nav { display: none; flex: 1 0 100%; width: 100%; flex-direction: column; align-items: stretch; gap: 0; border-top: 1px solid var(--rule); margin-top: .5rem; padding-top: .5rem; }
  .site-nav.is-open { display: flex; }
  .site-nav a { padding: .9rem .25rem; border-bottom: 1px solid var(--rule); }
  .site-nav__cta { border: 0; text-align: left; padding: .9rem .25rem; }
  .site-nav__cta:hover { background: none; color: var(--blue-deep); }

  .site-head__logo img { height: 46px; width: auto; max-width: none; }

  .entry { grid-template-columns: 1fr; gap: 1rem; padding: 1.9rem 1rem; margin: 0 -1rem; }
  .stamp { border-left: 0; border-top: 2px solid var(--rule); padding: .8rem 0 0; display: flex; align-items: baseline; gap: .5rem; }
  .stamp__day { font-size: 1.35rem; }
  .stamp__rest { margin-top: 0; }
  .entry__title { font-size: 1.375rem; }

  .field-row { grid-template-columns: 1fr; gap: 0; }
  .chambers-grid { grid-template-columns: 1fr; }
  .logo-strip { gap: 1.5rem 2rem; }
  .feature-video { margin-bottom: 2.5rem; }
  .card { padding: 2rem 1.5rem; }
  .quote { padding: 2rem 1.5rem 1.75rem; }
  .quote-rotator.is-live .quote-grid { padding-bottom: 2rem; }
  .quote-nav { gap: .75rem 1rem; margin-top: 2rem; }
  .quote-dots { gap: .45rem; order: 3; flex-basis: 100%; justify-content: center; }
  .quote-arrow, .quote-play { width: 2.75rem; height: 2.75rem; }
  .logo-strip li { height: 54px; width: 9rem; }
  .rule-heading { gap: 1rem; }
  .feature-video { margin-top: 3rem; }
  .video-grid { gap: 2rem; }
  .cta { padding: 1.9rem 1.6rem; }
  .pager { grid-template-columns: 1fr; }
  .pager__item--right { text-align: left; }
  .site-foot__inner { grid-template-columns: 1fr; gap: 2rem; }
  .article .article__body > p:first-child::first-letter { font-size: 3.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}