/* Route Agency website v3 - shared template styles.
   Fonts come from ../../../colors_and_type.css (Work Sans @font-face).
   Colour values are declared here as v3 variables so templates are self-reliant. */

:root {
  --navy: #191550;
  --teal: #31F0CF;
  --teal-hover: #5BFADC;
  --orange: #F46036;
  --blue: #97DFFC;
  --red: #C33C54;
  --cream: #F9FDC6;
  --ink: #000000;
  --ink-soft: #1F1B3A;
  --muted: #6B7280;
  --hairline: rgba(25, 21, 80, 0.10);
  --shadow-2: 0 2px 8px rgba(25, 21, 80, 0.10);
  --ease: cubic-bezier(0.2, 0, 0, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: "Work Sans", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-soft);   /* 6 Oct 2026: body copy in Route navy ink, not pure black (Ben) */
  background: #FFFFFF;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--navy); }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- Type scale (mobile first) ---------- */
h1, h2, h3, h4 { color: var(--navy); font-weight: 600; line-height: 1.15; }
h1 { font-size: 34px; letter-spacing: -0.01em; }
h2 { font-size: 27px; letter-spacing: -0.005em; }
h3 { font-size: 20px; }
.lead { font-size: 18px; font-weight: 300; color: var(--ink-soft); }
.eyebrow {
  display: inline-block; font-size: 13px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal);
  margin-bottom: 16px;
}
.section-heading { margin-bottom: 12px; }
.accent-bar { width: 64px; height: 3px; background: var(--teal); border: 0; margin: 0 0 24px; }
.card .accent-bar { width: 40px; margin: 12px 0 16px; }
@media (min-width: 768px) {
  h1 { font-size: 44px; }
  h2 { font-size: 32px; }
  h3 { font-size: 22px; }
  .lead { font-size: 20px; }
}
@media (min-width: 1024px) {
  h1 { font-size: 48px; }
  h2 { font-size: 36px; }
  h3 { font-size: 24px; }
}

/* ---------- Layout ---------- */
.container { max-width: 1240px; margin: 0 auto; padding: 0 20px; }
@media (min-width: 768px) { .container { padding: 0 32px; } }
.section { padding: 56px 0; }
.section--dark { background: var(--navy); }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark p { color: #FFFFFF; }
.section--dark .lead { color: rgba(255, 255, 255, 0.85); }
.section--subtle { background: var(--cream); }
@media (min-width: 1024px) { .section { padding: 88px 0; } }
.grid { display: grid; gap: 24px; }
@media (min-width: 768px) {
  .grid-2 { grid-template-columns: 1fr 1fr; }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- Buttons (square per approved Phase 0 spec) ---------- */
.btn {
  display: inline-block; padding: 14px 28px; font-family: inherit;
  font-size: 16px; font-weight: 600; text-decoration: none; border: 0;
  cursor: pointer; transition: background 160ms var(--ease), color 160ms var(--ease);
}
.btn-primary { background: var(--teal); color: var(--navy); }
.btn-primary:hover { background: var(--navy); color: var(--teal); }
.section--dark .btn-primary:hover { background: var(--teal-hover); color: var(--navy); }
.btn-ghost { background: transparent; color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); }
.btn-ghost:hover { background: var(--navy); color: #FFFFFF; }
.btn-ghost--light { background: transparent; color: #FFFFFF; box-shadow: inset 0 0 0 1px #FFFFFF; }
.btn-ghost--light:hover { background: #FFFFFF; color: var(--navy); }
.btn-row { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 32px; }

/* ---------- Header (v2 treatment, ported from the homepage design handoff) ---------- */
.topnav {
  background: var(--navy); color: #fff;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  position: sticky; top: 0; z-index: 50;
}
.topnav a { text-decoration: none; }
.topnav .row {
  display: flex; align-items: center; gap: 28px;
  height: 124px; padding: 0 32px; max-width: 1380px; margin: 0 auto;
}
.topnav .brand { display: flex; align-items: center; margin-right: 8px; padding: 16px 0; }
.topnav .brand img { height: 78px; width: auto; display: block; }
.topnav nav { flex: 1; }
.topnav nav > ul {
  display: flex; align-items: center; gap: 28px;
  list-style: none; margin: 0; padding: 0;
}
.topnav nav > ul > li { position: relative; }
.topnav nav a {
  font-size: 14px; font-weight: 500; color: #fff;
  padding: 10px 0; position: relative; display: inline-block;
}
.topnav nav a .car { font-size: 9px; opacity: 0.5; margin-left: 4px; vertical-align: 2px; }
.topnav nav a:hover { color: var(--teal); }
.topnav nav .sub {
  display: none; position: absolute; left: -20px; top: 100%;
  background: var(--navy); border: 1px solid rgba(255,255,255,0.08);
  list-style: none; margin: 0; padding: 14px 0; min-width: 260px; z-index: 60;
}
.topnav nav li:hover > .sub,
.topnav nav li:focus-within > .sub { display: block; }
.topnav nav .sub li a {
  display: block; padding: 8px 20px; font-size: 13px; font-weight: 400;
  color: rgba(255,255,255,0.85);
}
.topnav nav .sub li a:hover { color: var(--teal); }
.topnav nav .sub--cols { column-count: 2; column-gap: 0; min-width: 520px; }
.topnav nav .sub--cols li { break-inside: avoid; }
@media (max-width: 1100px) {
  .topnav nav .sub--cols { left: 50%; transform: translateX(-50%); }
}
.topnav .phone { text-align: right; line-height: 1.2; padding: 0 8px; }
.topnav .phone .label {
  font-size: 10px; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--teal);
}
.topnav .phone .num { font-size: 14px; font-weight: 600; }
.topnav .phone .num a { color: #fff; }
.topnav .phone .num a:hover { color: var(--teal); }
.topnav .cta {
  background: var(--teal); color: var(--navy);
  padding: 28px 22px; height: 124px; display: flex; align-items: center;
  font-size: 14px; font-weight: 600; gap: 8px; margin-right: -32px;
  transition: background 120ms;
}
.topnav .cta:hover { background: var(--teal-hover); }
.topnav .cta::after {
  content: ""; width: 0; height: 0;
  border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-top: 6px solid var(--navy);
}
.nav-mobile-contact { display: none; }
.nav-toggle {
  display: none; background: none; border: 1px solid rgba(255,255,255,0.3);
  padding: 10px 12px; cursor: pointer; margin-left: auto;
}
.nav-toggle span:not(.visually-hidden) {
  display: block; width: 22px; height: 2px; background: #fff; margin: 4px 0;
}
@media (max-width: 1080px) {
  .topnav .phone { display: none; }
}
@media (max-width: 860px) {
  .topnav .row { height: 88px; padding: 0 20px; gap: 16px; }
  .topnav .brand img { height: 56px; }
  .topnav .cta { display: none; }
  .nav-toggle { display: block; }
  .topnav nav {
    display: none; position: absolute; left: 0; right: 0; top: 88px;
    background: var(--navy); border-top: 1px solid rgba(255,255,255,0.1);
    padding: 12px 20px 28px; max-height: calc(100vh - 88px); overflow-y: auto;
  }
  body.nav-open .topnav nav { display: block; }
  .topnav nav > ul { flex-direction: column; align-items: stretch; gap: 0; }
  .topnav nav > ul > li { border-bottom: 1px solid rgba(255,255,255,0.08); }
  .topnav nav > ul > li > a { display: block; padding: 14px 0; font-size: 15px; }
  .topnav nav .sub { position: static; display: none; border: none; padding: 0 0 12px 14px; min-width: 0; }
  .topnav nav .sub--cols { column-count: 1; left: auto; transform: none; }
  .topnav nav li.open > .sub { display: block; }
  .nav-mobile-contact { display: block; padding-top: 18px; }
  .nav-mobile-contact a {
    display: block; padding: 12px 0; font-size: 14px; font-weight: 600; color: var(--teal);
  }
}

/* ---------- Hero ---------- */
.hero { background: var(--navy); padding: 72px 0; }
.hero h1 { color: #FFFFFF; font-size: 40px; letter-spacing: -0.02em; max-width: 18ch; }
.hero h1 em { font-style: normal; color: var(--teal); }
.hero .lead { color: rgba(255, 255, 255, 0.85); max-width: 60ch; margin-top: 24px; }
.hero-trust { margin-top: 40px; font-size: 14px; font-weight: 300; color: rgba(255, 255, 255, 0.7); }
.page-hero { background: var(--navy); padding: 48px 0 56px; }
.page-hero h1 { color: #FFFFFF; max-width: 22ch; }
.page-hero .answer { margin-top: 24px; }
@media (min-width: 768px) { .hero h1 { font-size: 64px; } }
@media (min-width: 1024px) { .hero { padding: 120px 0; } .hero h1 { font-size: 84px; } }

/* Answer capsule - the 40-60 word direct answer under a question H1 */
.answer {
  border-left: 3px solid var(--teal); padding: 4px 0 4px 20px;
  font-size: 18px; font-weight: 300; color: rgba(255, 255, 255, 0.9); max-width: 62ch;
}
.answer--onlight { color: var(--ink-soft); }
@media (min-width: 768px) { .answer { font-size: 20px; } }

/* Breadcrumb */
.breadcrumb { font-size: 13px; font-weight: 300; margin-bottom: 24px; color: rgba(255, 255, 255, 0.7); }
.breadcrumb a { color: rgba(255, 255, 255, 0.7); }
.breadcrumb a:hover { color: var(--teal); }

/* ---------- Cards ---------- */
.card {
  background: #FFFFFF; border: 1px solid var(--hairline);
  padding: 24px; display: flex; flex-direction: column;
}
.card h3 a { color: var(--navy); text-decoration: none; }
.card h3 a:hover { color: var(--teal); }
.card p { font-size: 15px; color: var(--ink-soft); }
.card .card-link { margin-top: auto; padding-top: 16px; font-weight: 600; font-size: 15px; text-decoration: none; color: var(--navy); }
.card .card-link:hover { color: var(--teal); }
.tag-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.tag {
  font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--navy); background: var(--cream); padding: 4px 10px;
}
.tag--teal { background: var(--teal); }
.section--subtle .tag, .cs-meta-bar .tag { background: #FFFFFF; }
.card-stat, .card p.card-stat { font-size: 30px; font-weight: 600; color: var(--navy); margin: 8px 0 4px; }
.card-stat-label, .card p.card-stat-label { font-size: 13px; font-weight: 300; color: var(--muted); margin-bottom: 8px; }
.case-media { background: var(--navy); aspect-ratio: 16 / 9; margin: -24px -24px 20px; overflow: hidden; }
.case-media img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Process strip ---------- */
.process { counter-reset: step; }
.process li {
  list-style: none; padding: 20px 0 20px 64px; position: relative;
  border-bottom: 1px solid var(--hairline);
}
.process li::before {
  counter-increment: step; content: "0" counter(step);
  position: absolute; left: 0; top: 18px;
  font-size: 26px; font-weight: 600; color: var(--teal);
}
.process h3 { margin-bottom: 4px; }
.process p { font-size: 15px; color: var(--ink-soft); }

/* ---------- FAQ ---------- */
.faq details { border-bottom: 1px solid var(--hairline); }
.faq summary {
  cursor: pointer; padding: 18px 0; font-weight: 600; font-size: 17px;
  color: var(--navy); list-style: none; position: relative; padding-right: 36px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 4px; top: 14px;
  font-size: 22px; color: var(--teal); transition: transform 160ms var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .faq-body { padding: 0 0 20px; max-width: 70ch; color: var(--ink-soft); }

/* ---------- Testimonials ---------- */
.testimonial { background: #FFFFFF; border: 1px solid var(--hairline); padding: 28px 24px; margin: 0; display: flex; flex-direction: column; }
.testimonial blockquote { margin: 0; font-size: 18px; line-height: 1.45; font-weight: 600; letter-spacing: -0.005em; color: var(--navy); }
.testimonial blockquote::before { content: ""; display: block; width: 40px; height: 3px; background: var(--teal); margin-bottom: 16px; }
.testimonial figcaption { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 24px; }
.testimonial .avatar { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--red); color: #FFFFFF; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; }
.testimonial .name { display: block; font-size: 15px; font-weight: 600; color: var(--navy); }
.testimonial .role { display: block; font-size: 13px; font-weight: 300; color: var(--muted); }

/* placeholder highlight - unverified copy is obvious in review.
   Delete the .ph rule (or the class on each element) once real copy is in. */
.ph { background: #FFF3B0; color: #7A5A00; padding: 0 4px; border-radius: 2px; font-weight: 500; }

/* ---------- CTA band ---------- */
.cta-band { background: var(--navy); }
.cta-band .container { padding-top: 56px; padding-bottom: 56px; }
.cta-band h2 { color: #FFFFFF; max-width: 24ch; }
.cta-band p { color: rgba(255, 255, 255, 0.85); margin-top: 12px; max-width: 60ch; }
.cta-band .cta-phone { color: var(--teal); font-weight: 600; text-decoration: none; font-size: 18px; }

/* ---------- Logo / badge strips ---------- */
.logo-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 32px; }
.logo-strip img { max-height: 56px; width: auto; }
.badge-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; align-items: center; }
.badge-row img { max-width: min(160px, 100%); margin: 0 auto; } /* 160px fixed width overflowed the 2-col grid at 375px (found in build V2, 20/07/2026) */
@media (min-width: 768px) { .badge-row { grid-template-columns: repeat(4, 1fr); } }

/* ---------- Team ---------- */
.person { border: 1px solid var(--hairline); padding: 24px; }
.person-tile {
  width: 72px; height: 72px; background: var(--navy); color: var(--teal);
  font-size: 24px; font-weight: 600; display: flex; align-items: center;
  justify-content: center; margin-bottom: 16px;
}
.person h3 { font-size: 19px; }
.person .role { color: var(--muted); font-size: 14px; margin: 2px 0 10px; }
.person p { font-size: 14px; color: var(--ink-soft); }

/* ---------- Forms ---------- */
.form-grid { display: grid; gap: 20px; }
@media (min-width: 768px) { .form-grid { grid-template-columns: 1fr 1fr; } .form-grid .full { grid-column: 1 / -1; } }
label { display: block; font-weight: 600; font-size: 14px; color: var(--navy); margin-bottom: 6px; }
.hint { font-weight: 300; color: var(--muted); }
input[type="text"], input[type="email"], input[type="tel"], select, textarea {
  width: 100%; padding: 12px 14px; font-family: inherit; font-size: 16px;
  border: 1px solid var(--hairline); background: #FFFFFF; color: var(--ink);
}
textarea { min-height: 140px; resize: vertical; }
.consent { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: var(--ink-soft); }
.consent input { width: 18px; height: 18px; margin-top: 2px; }

/* ---------- Trust list ---------- */
.trust-item { border-top: 1px solid var(--hairline); padding: 28px 0; }
.trust-item h3 { margin-bottom: 8px; }
.trust-item p { max-width: 75ch; color: var(--ink-soft); }
@media (min-width: 768px) {
  .trust-item { display: grid; grid-template-columns: 260px 1fr; gap: 32px; }
  .trust-item h3 { margin: 0; }
}

/* ---------- News ---------- */
.news-card { border: 1px solid var(--hairline); padding: 24px; display: flex; flex-direction: column; }
.news-card .kicker { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.news-card h3 { font-size: 19px; }
.news-card h3 a { color: var(--navy); text-decoration: none; }
.news-card h3 a:hover { color: var(--teal); }

/* ---------- Footer (v2 treatment, ported from the homepage design handoff) ---------- */
footer { background: var(--navy); color: #fff; padding: 70px 0 40px; border-top: 1px solid rgba(255,255,255,0.08); position: relative; overflow: hidden; }
footer a { text-decoration: none; }
footer .footer-logo img { height: 110px; width: auto; display: block; margin-bottom: 28px; }
footer .row { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; }
footer .contact .label { font-size: 11px; font-weight: 500; color: rgba(255,255,255,0.6); margin: 0 0 8px 0; }
footer .contact .email { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; color: var(--teal); border-bottom: 1px solid var(--teal); display: inline-block; margin-bottom: 24px; }
footer .contact p { font-size: 12px; color: rgba(255,255,255,0.65); line-height: 1.55; max-width: 36ch; }
footer .contact p a { color: var(--teal); border-bottom: 1px solid currentColor; }
footer .offices { margin-top: 28px; font-size: 12px; line-height: 1.5; color: rgba(255,255,255,0.78); }
footer .offices .city { font-weight: 600; color: #fff; margin-bottom: 4px; font-size: 13px; }
footer .offices > div { margin-bottom: 16px; }
footer h4 { font-size: 13px; font-weight: 600; border-bottom: 1px solid var(--teal); padding-bottom: 8px; margin: 0 0 12px 0; color: var(--teal); display: inline-flex; align-items: center; gap: 6px; }
footer h4::after { content: ""; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid var(--teal); }
footer ul { list-style: none; margin: 0 0 28px; padding: 0; }
footer li { margin-bottom: 8px; font-size: 13px; color: rgba(255,255,255,0.78); }
footer li a { font-size: 13px; color: rgba(255,255,255,0.78); transition: color 120ms; }
footer li a:hover { color: var(--teal); }
footer .social { display: flex; gap: 14px; margin-top: 28px; }
footer .social a { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.7); font-size: 12px; font-weight: 700; border: 1px solid rgba(255,255,255,0.18); border-radius: 50%; transition: all 120ms; }
footer .social a:hover { color: var(--navy); background: var(--teal); border-color: var(--teal); }
footer .legal { border-top: 1px solid rgba(255,255,255,0.08); margin-top: 48px; padding-top: 20px; display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: rgba(255,255,255,0.55); gap: 12px; flex-wrap: wrap; }
footer .legal a { color: inherit; margin-left: 18px; }
footer .legal a:first-child { margin-left: 0; }
footer .legal a:hover { color: var(--teal); }
@media (max-width: 1080px) {
  footer .row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  footer .row { grid-template-columns: 1fr; }
  footer .legal { flex-direction: column; align-items: flex-start; }
}

/* ---------- Case studies band (filterable, ported from the homepage design handoff) ---------- */
.casestudies { background: var(--navy); color: #fff; padding: 80px 0 110px; position: relative; }
.casestudies a { text-decoration: none; }
.casestudies::before {
  content: ""; position: absolute; left: 32px; top: 60px; width: 0; height: 0;
  border-left: 10px solid transparent; border-right: 10px solid transparent;
  border-top: 14px solid var(--teal);
}
.casestudies .head {
  display: grid; grid-template-columns: 1.5fr 1fr; gap: 48px;
  align-items: end; margin-bottom: 20px;
}
.casestudies h2 { font-size: 36px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; max-width: 24ch; color: #fff; }
.casestudies .band-answer { font-size: 16px; color: rgba(255,255,255,0.8); max-width: 60ch; margin: 20px 0 44px; font-weight: 300; border: 0; padding: 0; }
.casestudies .head .cta-wrap { text-align: right; }
.btn-outline {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px; font-size: 13px; font-weight: 600; text-decoration: none;
  color: var(--navy); background: var(--teal); transition: background 120ms;
}
.btn-outline:hover { background: var(--teal-hover); }
.btn-outline::after {
  content: ""; width: 0; height: 0;
  border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-top: 6px solid var(--navy);
}
.case-filters { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 34px; }
.case-filters .lbl { font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.5); align-self: center; margin-right: 6px; }
.case-pill {
  font-size: 12px; font-weight: 600; letter-spacing: 0.02em; padding: 9px 16px;
  border: 1px solid rgba(255,255,255,0.22); background: transparent; color: rgba(255,255,255,0.82);
  cursor: pointer; font-family: inherit; border-radius: 2px; transition: all 120ms;
}
.case-pill:hover { border-color: var(--teal); color: #fff; }
.case-pill.active { background: var(--teal); color: var(--navy); border-color: var(--teal); }
.case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; position: relative; }
.case-card { color: var(--navy); display: flex; flex-direction: column; min-height: 460px; }
.case-card .image { aspect-ratio: 4 / 3; position: relative; overflow: hidden; }
.case-card .image::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(135deg, rgba(255,255,255,0.06) 0 1px, transparent 1px 14px),
    linear-gradient(45deg, rgba(255,255,255,0.06) 0 1px, transparent 1px 14px);
  background-size: 14px 14px;
}
.case-card .image .label {
  position: absolute; top: 18px; left: 18px;
  font-size: 10px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; padding: 4px 8px;
  background: rgba(255,255,255,0.16); color: #fff;
}
.case-card .image .flag {
  position: absolute; top: 18px; right: 18px; z-index: 1;
  font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 4px 8px; background: var(--teal); color: var(--navy);
}
.case-card .image .stat {
  position: absolute; left: 24px; right: 24px; bottom: 24px;
  color: #fff; font-size: 17px; font-weight: 600; line-height: 1.25; max-width: 24ch;
}
.case-card .body { flex: 1; padding: 22px 22px 24px; display: flex; flex-direction: column; }
.case-card h3 { font-size: 21px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.18; max-width: 22ch; margin: 0 0 18px 0; color: inherit; }
.case-card .meta { display: grid; grid-template-columns: 1fr 1.1fr; gap: 18px 12px; margin-top: auto; padding: 14px 0; font-size: 11px; }
.case-card .meta .k { font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.8; margin-bottom: 4px; } /* 19 Oct 2026: 0.55 was below 4.5:1 */
.case-card .meta .v { font-size: 13px; font-weight: 600; }
.case-card .read {
  border-top: 1px solid currentColor; padding: 14px 0 0; font-size: 13px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 8px; opacity: 0.85; color: inherit;
}
.case-card .read::after {
  content: ""; width: 0; height: 0;
  border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-top: 6px solid currentColor;
}
.case-cream { background: var(--cream); }
.case-cream .image { background: linear-gradient(135deg, #C7B289 0%, #8A6F4A 100%); }
.case-teal { background: var(--teal); }
.case-teal .image { background: linear-gradient(135deg, #0E7E68 0%, #053A30 100%); }
.case-pink { background: #F773DC; }
.case-pink .image { background: linear-gradient(135deg, #4B1E70 0%, #1F0938 100%); }
.case-pink .meta .k, .case-pink .read { color: var(--navy); }
.case-blue { background: var(--blue); }
.case-blue .image { background: linear-gradient(135deg, #2A2568 0%, #0C0A38 100%); }
@media (max-width: 1080px) {
  .case-grid { grid-template-columns: repeat(2, 1fr); }
  .casestudies .head { grid-template-columns: 1fr; }
  .casestudies .head .cta-wrap { text-align: left; }
}
@media (max-width: 860px) {
  .case-grid { grid-template-columns: 1fr; }
  .casestudies::before { left: 20px; }
}

/* ---------- Case study article pages (t10 long / t11 medium / t12 short) ---------- */
.cs-meta-bar { background: var(--cream); border-bottom: 1px solid var(--hairline); }
.cs-meta-grid { display: grid; gap: 20px 32px; grid-template-columns: repeat(2, 1fr); padding: 24px 0; }
@media (min-width: 768px) { .cs-meta-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); padding: 28px 0; } } /* auto-fit so the bar balances at any item count, 3 to 5 */
.cs-meta-grid .k, .cs-rail .lbl, .cs-note .k, .cs-sticky-card .k, .cs-prevnext .k { font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.cs-meta-grid .k { margin-bottom: 6px; }
.cs-meta-grid .v { font-size: 15px; font-weight: 600; color: var(--navy); line-height: 1.35; }
.cs-figure { margin: 0; }
.cs-figure figcaption { font-size: 13px; font-weight: 300; color: var(--muted); padding-top: 12px; margin-top: 12px; border-top: 1px solid var(--hairline); max-width: 70ch; }
.cs-slot { position: relative; aspect-ratio: 16 / 9; background: var(--navy); }
.cs-slot--wide { aspect-ratio: 16 / 9; }
@media (min-width: 768px) { .cs-slot--wide { aspect-ratio: 21 / 9; } } /* 21:9 is a 161px strip on a 375px phone - hold 16:9 until tablet */
.cs-slot--tall { aspect-ratio: 4 / 3; }
@media (min-width: 900px) { .cs-slot--tall { aspect-ratio: 4 / 5; } }
.cs-slot image-slot { position: absolute; inset: 0; --slot-empty-bg: #12103C; }
.cs-slot > img { width: 100%; height: 100%; object-fit: cover; }
.cs-pair { display: grid; gap: 24px; margin: 36px 0; }
@media (min-width: 768px) { .cs-pair { grid-template-columns: 1fr 1fr; } }
.cs-layout { display: grid; gap: 40px; }
@media (min-width: 1024px) { .cs-layout { grid-template-columns: 232px 1fr; gap: 64px; } }
.cs-rail { align-self: start; }
@media (min-width: 1024px) { .cs-rail { position: sticky; top: 148px; } }
.cs-rail .lbl { display: block; padding-bottom: 10px; border-bottom: 1px solid var(--hairline); }
.cs-rail ol { list-style: none; counter-reset: cs; }
.cs-rail ol a { display: block; padding: 10px 0 10px 30px; font-size: 14px; font-weight: 500; color: var(--ink-soft); text-decoration: none; position: relative; border-bottom: 1px solid var(--hairline); }
.cs-rail ol a::before { counter-increment: cs; content: counter(cs, decimal-leading-zero); position: absolute; left: 0; top: 10px; font-size: 12px; font-weight: 600; color: var(--teal); }
.cs-rail ol a:hover { color: var(--navy); }
.cs-rail ol a[aria-current="true"] { color: var(--navy); box-shadow: inset 3px 0 0 var(--teal); padding-left: 34px; }
.cs-body { max-width: 68ch; }
.cs-body h3 { margin-top: 28px; font-size: 19px; }
.cs-body p { font-size: 17px; color: var(--ink-soft); margin-top: 16px; text-wrap: pretty; }
.cs-body ul { list-style: none; margin-top: 16px; }
.cs-body ul li { font-size: 17px; color: var(--ink-soft); padding: 10px 0 10px 26px; position: relative; border-bottom: 1px solid var(--hairline); }
.cs-body ul li::before { content: ""; position: absolute; left: 0; top: 21px; width: 12px; height: 2px; background: var(--teal); }
.cs-body ul li b { color: var(--navy); }
.cs-chapter { padding-top: 52px; }
.cs-chapter:first-child { padding-top: 0; }
.cs-chapter .num { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.16em; color: #0E7E68; margin-bottom: 10px; } /* 19 Oct 2026: teal on white was 1.45:1 */
.cs-pull { margin: 40px 0; background: var(--cream); padding: 28px 28px 28px 32px; border-left: 3px solid var(--teal); }
.cs-pull p { font-size: 21px; font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; color: var(--navy); margin: 0; }
.cs-pull .src { display: block; font-size: 13px; font-weight: 300; color: var(--ink-soft); margin-top: 14px; }
.cs-stats { display: grid; gap: 1px; background: var(--hairline); }
@media (min-width: 640px) { .cs-stats { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .cs-stats--4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) { .cs-stats--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 640px) and (max-width: 1023px) { .cs-stats--3 .cs-stat:last-child { grid-column: 1 / -1; } } /* 7 Sep 2026: three-tile strips never leave an empty cell */
.cs-stat { background: #FFFFFF; padding: 24px; border-top: 3px solid var(--teal); }
.cs-stat .num { display: block; font-size: 34px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.05; color: var(--navy); }
.cs-stat .lbl { display: block; font-size: 13px; color: var(--ink-soft); margin-top: 8px; }
.cs-stat .src { display: block; font-size: 11px; font-weight: 300; color: var(--muted); margin-top: 8px; }
.section--dark .cs-stats { background: rgba(255, 255, 255, 0.14); }
.section--dark .cs-stat { background: var(--navy); }
.section--dark .cs-stat .num { color: #FFFFFF; }
.section--dark .cs-stat .lbl { color: rgba(255, 255, 255, 0.85); }
.section--dark .cs-stat .src { color: rgba(255, 255, 255, 0.55); }
.cs-quote-band { background: var(--navy); padding: 64px 0; }
.cs-quote-band .rule { width: 64px; height: 3px; background: var(--teal); margin-bottom: 28px; }
.cs-quote-band blockquote { margin: 0; max-width: 62ch; }
.cs-quote-band blockquote p { color: #FFFFFF; font-size: 22px; font-weight: 600; line-height: 1.4; letter-spacing: -0.01em; }
.cs-quote-band blockquote p + p { margin-top: 16px; }
.cs-quote-band figcaption { margin-top: 24px; font-size: 14px; font-weight: 600; color: var(--teal); }
.cs-quote-band figcaption span { display: block; margin-top: 2px; font-weight: 300; color: rgba(255, 255, 255, 0.7); }
@media (min-width: 768px) { .cs-quote-band blockquote p { font-size: 27px; } }
.cs-doc { display: grid; gap: 32px; }
.cs-doc .cs-body { max-width: 74ch; }
@media (min-width: 1024px) { .cs-doc { grid-template-columns: 1fr 276px; gap: 56px; } }
.cs-note { border-top: 3px solid var(--teal); padding-top: 14px; margin-bottom: 28px; }
.cs-note .k { display: block; margin-bottom: 6px; }
.cs-note p { font-size: 14px; color: var(--ink-soft); margin: 0; }
.cs-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.cs-table th { background: var(--navy); color: #FFFFFF; font-size: 14px; font-weight: 600; text-align: left; padding: 12px 16px; }
.cs-table td { padding: 12px 16px; border-bottom: 1px solid var(--hairline); color: var(--ink-soft); }
.cs-table tbody tr:nth-child(odd) { background: var(--cream); }
.cs-table td:first-child { font-weight: 600; color: var(--navy); }
.cs-facts { border: 1px solid rgba(255, 255, 255, 0.18); padding: 28px; }
.cs-facts .row { display: grid; gap: 2px; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.cs-facts .row:last-child { border-bottom: 0; padding-bottom: 0; }
.cs-facts .k { font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--teal); }
.cs-facts .v { font-size: 15px; font-weight: 500; color: #FFFFFF; }
.cs-split { display: grid; gap: 40px; align-items: start; }
@media (min-width: 1024px) { .cs-split { grid-template-columns: 1.35fr 1fr; gap: 64px; } }
.cs-bleed-down { margin-bottom: 0; }
@media (min-width: 1024px) { .cs-bleed-down { margin-bottom: -56px; } }
.cs-overlay { position: relative; background: var(--navy); display: flex; align-items: flex-end; min-height: 520px; }
.cs-overlay image-slot { position: absolute; inset: 0; --slot-empty-bg: #12103C; }
.cs-overlay > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* 7 Sep 2026: real images in the overlay hero, same footprint as the slot */
.cs-overlay > img, .cs-slot > img { color: transparent; font-size: 0; } /* 7 Sep 2026: a missing file shows an empty slot, not its alt text, in review */
.cs-overlay .veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(25, 21, 80, 0.70) 0%, rgba(25, 21, 80, 0.90) 100%); }
.cs-overlay .inner { position: relative; width: 100%; padding: 56px 0; }
.cs-overlay h1, .cs-overlay p { color: #FFFFFF; }
.cs-sticky-card { background: #FFFFFF; border: 1px solid var(--hairline); padding: 24px; align-self: start; }
@media (min-width: 1024px) { .cs-sticky-card { position: sticky; top: 148px; } }
.cs-sticky-card .row { padding: 12px 0; border-bottom: 1px solid var(--hairline); }
.cs-sticky-card .row:last-child { border-bottom: 0; padding-bottom: 0; }
.cs-sticky-card .k { display: block; margin-bottom: 4px; }
.cs-sticky-card .v { font-size: 15px; font-weight: 600; color: var(--navy); }
.cs-outcome { background: var(--navy); padding: 56px 0; }
.cs-outcome h2 { color: #FFFFFF; }
.cs-outcome p { font-size: 18px; color: rgba(255, 255, 255, 0.85); max-width: 62ch; margin-top: 16px; }
.cs-stagger { display: grid; gap: 24px; margin: 40px 0; }
@media (min-width: 900px) { .cs-stagger { grid-template-columns: 1fr 1fr; align-items: start; } .cs-stagger .cs-figure:nth-child(2) { margin-top: 56px; } }
.cs-prevnext { display: grid; gap: 1px; background: var(--hairline); border-top: 1px solid var(--hairline); }
@media (min-width: 768px) { .cs-prevnext { grid-template-columns: 1fr 1fr; } }
.cs-prevnext a { display: block; background: #FFFFFF; padding: 24px; text-decoration: none; }
.cs-prevnext a:hover { background: var(--cream); }
.cs-prevnext .k { display: block; margin-bottom: 8px; }
.cs-prevnext .t { font-size: 18px; font-weight: 600; color: var(--navy); }

/* ---------- News / insight article pages (t13) ---------- */
/* Prefix .ar-*. Reuses the case-study rail (.cs-layout/.cs-rail), figures (.cs-figure/.cs-slot),
   stat strip (.cs-stats), pull quote (.cs-pull), prev/next (.cs-prevnext) and .faq accordion. */
.ar-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--teal); z-index: 200; }
.ar-hero { background: var(--navy); padding: 44px 0 0; }
.ar-hero h1 { color: #FFFFFF; max-width: 26ch; }
.ar-kickers { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 22px; }
.ar-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--teal); }
.ar-eyebrow a { color: var(--teal); text-decoration: none; }
.ar-eyebrow a:hover { text-decoration: underline; }
.ar-tick { font-size: 12px; font-weight: 300; color: rgba(255, 255, 255, 0.6); }
.ar-tick::before { content: ""; display: inline-block; width: 12px; height: 1px; background: rgba(255, 255, 255, 0.35); vertical-align: middle; margin-right: 14px; }
.ar-byline { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; margin-top: 40px; padding: 22px 0 26px; border-top: 1px solid rgba(255, 255, 255, 0.16); }
.ar-avatar { width: 48px; height: 48px; flex: none; display: grid; place-items: center; background: var(--teal); color: var(--navy); font-size: 16px; font-weight: 600; letter-spacing: 0.04em; }
.ar-byline .who { font-size: 15px; font-weight: 600; color: #FFFFFF; }
.ar-byline .who a { color: #FFFFFF; text-decoration: none; border-bottom: 1px solid rgba(49, 240, 207, 0.5); }
.ar-byline .who a:hover { color: var(--teal); }
.ar-byline .role { font-size: 13px; font-weight: 300; color: rgba(255, 255, 255, 0.72); margin-top: 2px; }
.ar-byline .dates { font-size: 12px; font-weight: 300; line-height: 1.6; color: rgba(255, 255, 255, 0.62); }
.ar-byline .dates b { display: block; font-weight: 600; color: rgba(255, 255, 255, 0.85); }
@media (min-width: 768px) { .ar-byline .dates { margin-left: auto; text-align: right; } }
.ar-share { display: flex; gap: 8px; }
.ar-share a, .ar-share button {
  width: 44px; height: 44px; display: grid; place-items: center; font-family: inherit;
  font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer;
  color: #FFFFFF; background: transparent; border: 1px solid rgba(255, 255, 255, 0.28);
  transition: background 160ms var(--ease), color 160ms var(--ease);
}
.ar-share a:hover, .ar-share button:hover { background: var(--teal); border-color: var(--teal); color: var(--navy); }
.ar-share.on-light a, .ar-share.on-light button { color: var(--navy); border-color: var(--hairline); }
.ar-rail-blk { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--hairline); }
.ar-rail-blk .lbl { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.ar-rail-blk p { font-size: 14px; font-weight: 300; color: var(--ink-soft); margin-bottom: 14px; }
.ar-body { max-width: 70ch; }
.ar-body > p, .ar-body li { font-size: 18px; font-weight: 300; color: var(--ink-soft); text-wrap: pretty; }
.ar-body > p { margin-top: 20px; }
.ar-body > p:first-child { margin-top: 0; }
.ar-body h2 { margin-top: 56px; font-size: 27px; }
.ar-body h2::before { content: ""; display: block; width: 40px; height: 3px; background: var(--teal); margin-bottom: 18px; }
.ar-body h3 { margin-top: 34px; font-size: 20px; }
.ar-body h3 + p { margin-top: 12px; }
.ar-body a { color: var(--navy); text-decoration: underline; text-decoration-color: var(--teal); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.ar-body a:hover { color: var(--teal-ink, var(--navy)); background: #EAFFFA; }
.ar-body b, .ar-body strong { font-weight: 600; color: var(--navy); }
.ar-body ul, .ar-body ol { margin: 20px 0 0; padding: 0; list-style: none; }
.ar-body ul li { position: relative; padding: 0 0 0 26px; margin-top: 12px; }
.ar-body ul li::before { content: ""; position: absolute; left: 0; top: 13px; width: 12px; height: 2px; background: var(--teal); }
.ar-body ol { counter-reset: arol; }
.ar-body ol li { position: relative; padding: 0 0 0 40px; margin-top: 14px; counter-increment: arol; }
.ar-body ol li::before { content: counter(arol); position: absolute; left: 0; top: 0; font-size: 14px; font-weight: 600; color: var(--teal); }
@media (min-width: 1024px) { .ar-body > p, .ar-body li { font-size: 19px; } .ar-body h2 { font-size: 31px; } }
.ar-lede { font-size: 20px !important; font-weight: 400 !important; color: var(--navy) !important; }
@media (min-width: 1024px) { .ar-lede { font-size: 22px !important; } }
.ar-update { background: var(--cream); border-left: 3px solid var(--teal); padding: 14px 18px; margin-bottom: 32px; }
.ar-update .k { font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.ar-update p { font-size: 14px; font-weight: 300; color: var(--ink-soft); margin: 4px 0 0; }
.ar-key { border: 1px solid var(--hairline); border-top: 3px solid var(--teal); padding: 28px; margin: 36px 0 8px; }
.ar-key h2 { margin: 0 0 4px; font-size: 20px !important; }
.ar-key h2::before { display: none; }
.ar-key .sub { font-size: 13px; font-weight: 300; color: var(--muted); }
.ar-key ol { margin-top: 18px; }
.ar-key li { font-size: 16px !important; font-weight: 400; color: var(--navy); }
.ar-def { background: var(--navy); padding: 28px; margin: 36px 0; }
.ar-def dl { margin: 0; }
.ar-def .k { font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--teal); }
.ar-def dt { font-size: 21px; font-weight: 600; letter-spacing: -0.01em; color: #FFFFFF; margin: 10px 0 8px; }
.ar-def dd { font-size: 16px; font-weight: 300; line-height: 1.6; color: rgba(255, 255, 255, 0.85); margin: 0; max-width: 60ch; }
.ar-steps { display: grid; gap: 1px; background: var(--hairline); margin: 32px 0; }
.ar-step { background: #FFFFFF; padding: 22px 24px; display: grid; gap: 4px 20px; grid-template-columns: 40px 1fr; }
.ar-step .n { font-size: 22px; font-weight: 600; color: var(--teal); line-height: 1.1; }
.ar-step h3 { margin: 0 !important; font-size: 18px; }
.ar-step p { grid-column: 2; font-size: 16px; font-weight: 300; color: var(--ink-soft); margin: 0; }
.ar-cite { font-size: 11px; font-weight: 600; vertical-align: super; text-decoration: none !important; padding: 0 1px; }
.ar-sources { margin-top: 20px; }
.ar-sources li { font-size: 14px !important; font-weight: 300; color: var(--ink-soft); }
.ar-sources li::before { font-size: 12px !important; }
.ar-author { display: grid; gap: 20px; background: var(--cream); padding: 32px; }
@media (min-width: 640px) { .ar-author { grid-template-columns: 72px 1fr; gap: 28px; } }
.ar-author .tile { width: 72px; height: 72px; display: grid; place-items: center; background: var(--navy); color: var(--teal); font-size: 22px; font-weight: 600; }
.ar-author .k { font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.ar-author h2 { margin: 8px 0 2px; font-size: 21px; }
.ar-author .role { font-size: 14px; font-weight: 600; color: var(--teal-deep, var(--navy)); }
.ar-author p { font-size: 15px; font-weight: 300; color: var(--ink-soft); margin-top: 12px; max-width: 68ch; }
/* Concise (t13b) and note (t13c) variants - single centred column, 3:2 stock featured image */
.cs-slot--photo { aspect-ratio: 3 / 2; }
.ar-single { max-width: 820px; margin: 0 auto; }
.ar-single .ar-body { max-width: none; }
.ar-hero--compact { padding: 40px 0 72px; }
.ar-hero--compact h1 { max-width: 30ch; }
.ar-hero--compact .ar-byline { margin-top: 30px; padding-bottom: 22px; }
.ar-lead-figure { margin: 0 auto; max-width: 820px; }
.ar-lead-figure .cs-slot { margin-top: -48px; }
.ar-credit { display: block; font-size: 12px; font-weight: 300; color: var(--muted); margin-top: 10px; }
.ar-notegrid { display: grid; gap: 32px; align-items: start; }
@media (min-width: 900px) { .ar-notegrid { grid-template-columns: 1fr 1fr; gap: 48px; } }
.ar-author--slim { grid-template-columns: 48px 1fr; gap: 18px; padding: 22px 24px; align-items: center; }
.ar-author--slim .tile { width: 48px; height: 48px; font-size: 16px; }
.ar-author--slim h2 { margin: 0; font-size: 17px; }
.ar-author--slim .role { font-size: 13px; }
.ar-author--slim p { font-size: 14px; margin-top: 6px; }

/* ---------- Motion preference ---------- */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}

/* Forms (13 Oct 2026): field and send errors, and the hidden field that catches bots. */
.field-error { color: #C33C54; font-size: 13px; margin-top: 6px; }
.form-error { grid-column: 1 / -1; margin: 4px 0 0; color: #C33C54; font-size: 14px; font-weight: 600; }
.form-error a { color: inherit; text-decoration: underline; }
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
/* Senior team headshots (13 Oct 2026): 4:5 photo at the top of each card, in place of the initials tile */
.person-photo { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; margin: 0 0 16px; background: var(--navy); }
/* Case study card images (13 Oct 2026): a 16:9 picture across the top of the card, edge to edge */
.card .card-img { display: block; width: calc(100% + 48px); max-width: none; height: auto; aspect-ratio: 16 / 9; object-fit: cover; margin: -24px -24px 20px; background: var(--navy); }

/* Accreditation logos (14 Oct 2026; four across from 15 Oct, eight logos): each held to 96px tall on a white section */
.badge-row--accreditations { gap: 32px 24px; }
.badge-row--accreditations img { width: auto; height: auto; max-width: min(200px, 100%); max-height: 96px; }
@media (min-width: 768px) { .badge-row--accreditations { grid-template-columns: repeat(4, 1fr); } }
/* 19 Oct 2026, visual check (Ben: "go ahead with you recommendations"): news post body text in Route ink, not Elementor's
   default grey #7A7A7A (4.3:1 on white) */
.ar-body .elementor-widget-theme-post-content { color: var(--ink-soft); }
/* 19 Oct 2026: featured graphics with text or logos are shown whole, never cropped to 3:2 or enlarged; photos keep the crop.
   Posts: 334 NDA 2022 winner, 343 NE Marketing Awards, 347 International Women's Day, 354 Social Media Day,
   355 RIBA London meet, 356 World Emoji Day, 360 NDA 2024 shortlist, 361 rabbit welfare.
   23 Oct 2026 (Ben: "show those legacy news images whole"): ten old posts whose 800 px images were enlarged to fill the frame,
   329, 339, 349, 365, 367, 369, 370, 371, 377 and 378 */
body.single-post:is(.postid-334, .postid-343, .postid-347, .postid-354, .postid-355, .postid-356, .postid-360, .postid-361,
  .postid-329, .postid-339, .postid-349, .postid-365, .postid-367, .postid-369, .postid-370, .postid-371, .postid-377, .postid-378) .elementor-widget-theme-post-featured-image img { aspect-ratio: auto; object-fit: contain; width: auto; max-width: 100%; max-height: 560px; margin: 0 auto; }
/* 23 Oct 2026 (Ben: links "difficult to see"): links in body copy are underlined in dark teal and set in semi-bold, so they
   stand out from the words around them. Paragraphs and FAQ answers only; buttons, cards, tags, breadcrumbs, case study
   chapter links, contact bands and the footer keep their own styles. */
.section p a:not(.btn):not(.card-link):not(.tag),
.faq-body a { text-decoration: underline; text-decoration-color: #0E7E68; text-decoration-thickness: 2px; text-underline-offset: 3px; font-weight: 600; }
.section p a:not(.btn):not(.card-link):not(.tag):hover,
.faq-body a:hover { color: #0E7E68; }