/* ==========================================================================
   Icon Visual Marketing - site stylesheet
   Tokens, scale, spacing, radii and shadows are the design handoff's values.
   Desktop reference width is 1320px content / 32px gutter, matching the mock.
   Responsive behaviour was not designed; grids collapse 4 > 2 > 1 and the
   home collage becomes a horizontally scrollable strip, per the handoff note.
   ========================================================================== */

/* ---------- Tokens ------------------------------------------------------- */

:root {
  /* Colour */
  --charcoal: #2E3A42;
  --slate: #3F505A;
  --body: #35424B;
  --muted: #5A6771;
  --faint: #8A94A0;
  --fainter: #9AA5AE;
  --gold: #F9AE1B;
  --gold-hover: #E89C00;
  --bg: #FAF9F7;
  --tint: #F3EFE7;
  --border: #E7E3DC;
  --input-border: #D9D4CB;
  /* Body copy on a dark ground is white, per HB instruction. Every use of
     this token is inside .band--dark or .cta-band__panel, both charcoal. */
  --on-dark: #FFFFFF;
  --on-dark-strong: #E4E7EA;

  /* Type */
  --font: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Layout */
  --max: 1320px;
  --narrow: 920px;
  --gutter: 32px;

  /* Radii */
  --r-card: 16px;
  --r-sm: 14px;
  --r-panel: 20px;
  --r-band: 24px;
  --r-pill: 999px;

  /* Shadow */
  --sh-hero: 0 24px 60px rgba(46, 58, 66, 0.18);
  --sh-card: 0 14px 34px rgba(46, 58, 66, 0.12);
  --sh-soft: 0 14px 34px rgba(46, 58, 66, 0.10);
  --sh-menu: 0 18px 44px rgba(53, 66, 75, 0.14);
  --sh-form: 0 18px 44px rgba(46, 58, 66, 0.08);
}

/* ---------- Reset ------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

/* One unbreakable token is enough to push the whole document sideways on a
   narrow screen: three migrated posts print bare footnote URLs, the longest
   146 characters, which scrolled the page by up to 73px at 390px wide. A word
   is broken only when it cannot fit on a line of its own, so this costs
   nothing anywhere else. Inherited, so it covers every content container. */
body { overflow-wrap: break-word; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--body);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 { color: var(--charcoal); margin: 0; text-wrap: balance; }
h1 { font-size: clamp(34px, 5.2vw, 68px); line-height: 1.05; font-weight: 800;
     letter-spacing: -0.02em; }
h2 { font-size: clamp(26px, 3.4vw, 38px); line-height: 1.15; font-weight: 800;
     letter-spacing: -0.01em; }
h3 { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.3; font-weight: 700; }

p { margin: 0; text-wrap: pretty; }
img, picture, video { max-width: 100%; display: block; }
img { height: auto; }
ul, ol { margin: 0; padding: 0; }
address { font-style: normal; }

a { color: var(--slate); text-decoration: none; transition: color 0.15s ease; }
a:hover { color: var(--gold-hover); }
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--gold); color: var(--charcoal);
  padding: 12px 20px; font-weight: 700; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; color: var(--charcoal); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- Buttons ----------------------------------------------------- */

.btn {
  display: inline-block;
  font-size: 16px; font-weight: 700; font-family: inherit;
  padding: 15px 32px; border-radius: var(--r-pill);
  border: none; cursor: pointer; text-align: center;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn--gold { background: var(--gold); color: var(--charcoal); }
.btn--gold:hover, .btn--gold:focus { background: var(--gold-hover); color: var(--charcoal); }
.btn--ghost {
  background: transparent; color: var(--slate);
  border: 2px solid var(--slate); padding: 13px 30px;
}
.btn--ghost:hover { border-color: var(--gold-hover); color: var(--gold-hover); }
.btn--lg { font-size: 17px; padding: 17px 40px; white-space: nowrap; }

.arrow-link { font-size: 15px; font-weight: 700; color: var(--slate); white-space: nowrap; }
.arrow-link--gold { color: var(--gold-hover); }
.tel-link { font-size: 16px; font-weight: 700; color: var(--slate); }

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

.site-head {
  position: sticky; top: 0; z-index: 200;
  background: rgba(250, 249, 247, 0.97);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--border);
}
.site-head__inner {
  max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter);
  height: 84px; display: flex; align-items: center; gap: 28px;
}
.site-head__logo { flex-shrink: 0; display: block; }
.site-head__logo img { height: 42px; width: auto; }

.site-nav { margin-left: auto; }
.site-nav__list {
  list-style: none; display: flex; align-items: center; gap: 2px;
}
.site-nav__link {
  display: block; padding: 12px 14px;
  font-size: 15px; font-weight: 600; color: var(--body);
  background: none; border: none; font-family: inherit; cursor: pointer;
}
.site-nav__link:hover { color: var(--gold-hover); }
.site-nav__link[aria-current="page"] { color: var(--gold-hover); }
.site-nav__cta { margin-left: 14px; }
.site-nav__cta .btn { padding: 12px 26px; font-size: 15px; }

.caret {
  display: inline-block; width: 0; height: 0; margin-left: 5px;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid currentColor; vertical-align: middle;
}

.has-menu { position: relative; }
.mega {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  background: #fff; border: 1px solid var(--border); border-radius: var(--r-sm);
  box-shadow: var(--sh-menu); padding: 26px 30px;
  display: flex; gap: 40px; width: 720px;
  animation: mega-in 0.12s ease-out;
}
.mega--narrow { width: 260px; padding: 22px 26px; }
.mega[hidden] { display: none; }
@keyframes mega-in { from { opacity: 0; transform: translate(-50%, -4px); } }

.mega__col { flex: 1; display: flex; flex-direction: column; gap: 9px; }
.mega__head {
  font-size: 13px; font-weight: 800; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--body);
}
.mega__list { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.mega__list a { font-size: 14.5px; }

.nav-toggle {
  display: none; margin-left: auto;
  width: 44px; height: 44px; padding: 10px;
  background: none; border: 1px solid var(--border); border-radius: 10px;
  cursor: pointer; flex-direction: column; justify-content: space-between;
}
.nav-toggle__bar {
  display: block; height: 2px; width: 100%; background: var(--charcoal);
  border-radius: 2px; transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}

/* ---------- Shared section shells --------------------------------------- */

.section {
  max-width: var(--max); margin: 0 auto;
  padding: 88px var(--gutter);
}
.section--narrow { max-width: var(--narrow); }
.section--tight { padding-top: 0; }
.section--flush { padding-bottom: 0; }

.band { background: var(--tint); }
.band--dark { background: var(--charcoal); color: #FFFFFF; }
.band--dark h2, .band--dark h3 { color: #FFFFFF; }
.band--dark p, .band--dark li { color: var(--on-dark); }
.band__inner {
  max-width: var(--max); margin: 0 auto; padding: 88px var(--gutter);
}
.band__inner--narrow { max-width: var(--narrow); }

.section-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 24px; margin-bottom: 36px;
}

.kicker {
  font-size: 13px; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--gold-hover); margin-bottom: 14px;
}

.lede { display: flex; flex-direction: column; gap: 18px; }
.lede p { font-size: 17px; line-height: 1.7; color: var(--muted); }

.crumbs { max-width: var(--max); margin: 0 auto; padding: 20px var(--gutter) 0; }
.crumbs ol {
  list-style: none; display: flex; flex-wrap: wrap; gap: 8px;
  font-size: 13px; color: var(--faint);
}
.crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--border); }
.crumbs a { color: var(--faint); }
.crumbs a:hover { color: var(--gold-hover); }
.crumbs [aria-current="page"] { color: var(--muted); font-weight: 600; }

/* ---------- Home hero --------------------------------------------------- */

.hero-centre {
  max-width: var(--narrow); margin: 0 auto;
  padding: 64px var(--gutter) 0;
  display: flex; flex-direction: column; gap: 24px;
  align-items: center; text-align: center;
}
.hero-centre h1 span { color: var(--gold); }
.hero-centre p {
  font-size: clamp(16px, 2vw, 19px); line-height: 1.6;
  color: var(--muted); max-width: 52ch;
}
.hero-actions {
  display: flex; gap: 14px; align-items: center; justify-content: center;
  flex-wrap: wrap;
}

.collage {
  display: flex; gap: 22px; align-items: flex-start; justify-content: center;
  margin: 56px -70px 0; padding-bottom: 64px;
}
.collage__tile { border-radius: var(--r-sm); overflow: hidden; box-shadow: var(--sh-soft); }
.collage__tile picture, .collage__tile img { width: 100%; height: 100%; }
.collage__tile img { object-fit: cover; }
.collage__tile--1 { flex: 0 0 300px; height: 300px; margin-top: 120px; }
.collage__tile--2 { flex: 0 0 340px; height: 380px; box-shadow: var(--sh-card); }
.collage__tile--3 { flex: 0 0 280px; height: 320px; margin-top: 150px; }
.collage__tile--4 { flex: 0 0 380px; height: 420px; margin-top: 40px;
                    box-shadow: var(--sh-card); }
.collage__tile--5 { flex: 0 0 280px; height: 300px; margin-top: 170px; }
.collage__tile--6 { flex: 0 0 340px; height: 360px; margin-top: 90px;
                    box-shadow: var(--sh-card); }
.collage__tile--7 { flex: 0 0 300px; height: 320px; margin-top: 130px; }

/* ---------- Split hero -------------------------------------------------- */

.split {
  max-width: var(--max); margin: 0 auto;
  padding: 72px var(--gutter) 80px;
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px; align-items: center;
}
.split--even { grid-template-columns: 1fr 1fr; }
.split--reverse > :first-child { order: 2; }
.split__body { display: flex; flex-direction: column; gap: 24px; }
.split__body h1 { font-size: clamp(32px, 4.2vw, 54px); line-height: 1.06; }
.split__body > p {
  font-size: clamp(16px, 1.6vw, 18px); line-height: 1.65;
  color: var(--muted); max-width: 56ch;
}
.split__actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.split__media img {
  width: 100%; aspect-ratio: 4 / 3.2; object-fit: cover;
  border-radius: var(--r-panel); box-shadow: var(--sh-hero);
}
.split__media--flat img { box-shadow: none; }
.split__media--43 img { aspect-ratio: 4 / 3; }

/* ---------- Card grids -------------------------------------------------- */

.grid { display: grid; gap: 20px; }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--tight { gap: 18px; }

.pcard {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--r-card); overflow: hidden;
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.pcard:hover { box-shadow: var(--sh-card); transform: translateY(-2px); color: var(--slate); }
.pcard__media { aspect-ratio: 16 / 10; background: var(--tint); }
.pcard__media img { width: 100%; height: 100%; object-fit: cover; }
.pcard__body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 6px; }
.pcard__body h3 { font-size: 18px; }
.pcard__body p { font-size: 14px; line-height: 1.5; color: var(--muted); }

.icard {
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 24px;
  display: flex; flex-direction: column; gap: 8px;
  transition: box-shadow 0.18s ease;
}
.icard:hover { box-shadow: var(--sh-card); }
.icard h3 { font-size: 18px; }
.icard p { font-size: 14px; line-height: 1.55; color: var(--muted); }
.icard__more { margin-top: auto; padding-top: 6px; font-size: 14px; font-weight: 700;
               color: var(--gold-hover); }

.ccard {
  display: flex; flex-direction: column; gap: 10px;
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--r-card); padding: 26px;
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}
/* Variant carrying a real project photograph above the copy. */
.ccard--media { padding: 0; overflow: hidden; gap: 0; }
.ccard__media { aspect-ratio: 16 / 10; background: var(--tint); overflow: hidden; }
.ccard__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.4s ease;
}
.ccard--media:hover .ccard__media img { transform: scale(1.03); }
.ccard__body {
  padding: 22px 24px 24px;
  display: flex; flex-direction: column; gap: 10px; flex: 1;
}
.ccard:hover { box-shadow: var(--sh-card); transform: translateY(-2px); color: var(--slate); }
.ccard__tag {
  font-size: 12.5px; font-weight: 800; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--gold-hover);
}
.ccard h2, .ccard h3 { font-size: 22px; font-weight: 700; }
.ccard p { font-size: 14.5px; line-height: 1.55; color: var(--muted); }
.ccard__more { margin-top: auto; padding-top: 8px; font-size: 14px; font-weight: 700;
               color: var(--slate); }

/* ---------- Case study / service work gallery -------------------------- */
/* Design work is contained, not cropped: a billboard or brochure spread
   loses the composition that is the point of showing it if you cut into it.
   The tinted frame gives every tile the same footprint regardless of the
   artwork's own aspect ratio. */

.shots { display: grid; gap: 24px; margin-top: 32px; }
/* A lone tile must not stretch the full 1320px content width. */
.shots--1 { grid-template-columns: minmax(0, 640px); }
.shots--2 { grid-template-columns: repeat(2, 1fr); }
.shots--3 { grid-template-columns: repeat(3, 1fr); }

.shot { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.shot__frame {
  aspect-ratio: 4 / 3;
  background: var(--tint);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 18px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  transition: box-shadow 0.18s ease;
}
.shot:hover .shot__frame { box-shadow: var(--sh-card); }
.shot__frame picture { display: flex; width: 100%; height: 100%; }
.shot__frame img { width: 100%; height: 100%; object-fit: contain; }
.shot figcaption {
  font-size: 14px; line-height: 1.55; color: var(--muted);
}

/* ---------- Client logo credit mark ------------------------------------ */

.client-mark {
  display: flex; align-items: center;
  height: 76px; margin-bottom: -2px;
}
.client-mark picture { display: flex; align-items: center; height: 100%; }
.client-mark img {
  max-height: 100%; max-width: 280px;
  width: auto; height: auto;
  object-fit: contain; object-position: left center;
}

/* ---------- Stats band -------------------------------------------------- */

.stats { max-width: var(--max); margin: 0 auto; padding: 78px var(--gutter);
         display: grid; grid-template-columns: repeat(4, 1fr); gap: 44px; }
.stats__item { display: flex; flex-direction: column; gap: 10px; }
.stats__num {
  font-size: clamp(38px, 4.4vw, 52px); font-weight: 800;
  color: var(--gold); letter-spacing: -0.02em; line-height: 1;
}
.stats__item p { font-size: 15.5px; line-height: 1.55; color: var(--on-dark); }

/* ---------- Process / steps -------------------------------------------- */

.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.steps--3 { grid-template-columns: repeat(3, 1fr); }
.steps--6 { grid-template-columns: repeat(3, 1fr); }
.step {
  background: #fff; border-radius: var(--r-card); padding: 28px;
  display: flex; flex-direction: column; gap: 12px;
}
.step__icon { height: 46px; margin-bottom: 2px; }
.step__icon picture { display: block; height: 100%; }
.step__icon img {
  height: 100%; width: auto; object-fit: contain; object-position: left center;
}
.step__num { font-size: 15px; font-weight: 800; color: var(--gold); }
.step h3 { font-size: 21px; }
.step p { font-size: 15px; line-height: 1.6; color: var(--muted); }

/* ---------- Reasons ----------------------------------------------------- */

.reasons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.reason { display: flex; flex-direction: column; gap: 12px; }
.reason h3 { font-size: 22px; font-weight: 800; color: var(--gold-hover); }
.reason p { font-size: 15.5px; line-height: 1.65; color: var(--muted); }
.band--dark .reason h3 { color: var(--gold); }

/* ---------- Credential badge ------------------------------------------- */

.badge-row {
  margin-top: 40px; padding-top: 32px;
  border-top: 1px solid rgba(198, 205, 211, 0.18);
}
.badge-row img { height: 52px; width: auto; object-fit: contain; }

/* ---------- Blog: post page ------------------------------------------- */

.post {
  max-width: var(--narrow); margin: 0 auto;
  padding: 40px var(--gutter) 24px;
}
.post__head { display: flex; flex-direction: column; gap: 14px; }
.post__head h1 { font-size: clamp(30px, 4vw, 46px); line-height: 1.1; }
.post__meta { font-size: 14.5px; color: var(--faint); font-weight: 600; }

.post-hero { margin: 36px 0 8px; }
.post-hero img {
  width: 100%; aspect-ratio: 40 / 32; object-fit: cover;
  border-radius: var(--r-panel); box-shadow: var(--sh-hero);
}

.post__body { padding-top: 36px; }
/* Migrated copy: comfortable measure, generous rhythm. */
.post__body > h2 { font-size: clamp(24px, 2.6vw, 30px); margin-top: 20px; }
.post__body > h3 { font-size: clamp(19px, 2vw, 22px); margin-top: 14px; }
.post__body > h4 { font-size: 18px; margin-top: 10px; }
.post__body > p, .post__body li { font-size: 17.5px; line-height: 1.8; }
.post__body .pull-quote { margin: 10px 0; }

.post-figure { margin: 12px 0; display: flex; flex-direction: column; gap: 10px; }
.post-figure .post-body__img {
  width: 100%; height: auto; border-radius: var(--r-sm);
  border: 1px solid var(--border); background: var(--tint);
}
.post-figure figcaption { font-size: 14px; color: var(--faint); }

.post__foot {
  display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between;
  margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--border);
}

/* ---------- Blog: cards ----------------------------------------------- */

.post-card--media { padding: 0; overflow: hidden; gap: 0; }
.post-card__media { aspect-ratio: 16 / 10; background: var(--tint); overflow: hidden; }
.post-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.4s ease;
}
.post-card--media:hover .post-card__media img { transform: scale(1.03); }
.post-card__body {
  padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 10px;
  flex: 1;
}
.post-card__topic {
  font-size: 12px; font-weight: 800; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--gold-hover);
}
.post-card h3 a { color: var(--charcoal); }
.post-card h3 a:hover { color: var(--gold-hover); }

/* ---------- Blog: pagination ------------------------------------------ */

.pager {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 10px 18px;
  margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--border);
  font-size: 15px; font-weight: 700;
}
.pager__nums { display: flex; align-items: center; gap: 6px; }
.pager__nums a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; height: 42px; padding: 0 12px;
  border: 1px solid var(--border); border-radius: 10px;
  background: #fff; color: var(--slate);
}
.pager__nums a:hover { border-color: var(--gold); color: var(--gold-hover); }
.pager__nums a[aria-current="page"] {
  background: var(--charcoal); border-color: var(--charcoal); color: var(--bg);
}
.pager__gap { color: var(--faint); padding: 0 2px; }
.pager__prev, .pager__next { color: var(--slate); white-space: nowrap; }

/* ---------- Values band (About) ---------------------------------------- */

.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px; }
.values__item { display: flex; flex-direction: column; gap: 12px; }
.values__item h2 { font-size: 24px; font-weight: 800; color: var(--gold); }
.values__item p { font-size: 15.5px; line-height: 1.65; color: var(--on-dark); }

/* ---------- Prose ------------------------------------------------------- */

.prose { display: flex; flex-direction: column; gap: 22px; }
.prose h2 { margin-top: 14px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 20px; margin-top: 10px; }
.prose p, .prose li { font-size: 17px; line-height: 1.75; color: var(--muted); }
.prose a { text-decoration: underline; text-underline-offset: 2px; }
.prose ul, .prose ol { padding-left: 24px; display: flex; flex-direction: column; gap: 10px; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose--centre { text-align: center; align-items: center; }
.prose--legal p, .prose--legal li { font-size: 16px; line-height: 1.7; }

.pull-quote {
  margin: 0; padding: 28px 0 28px 28px;
  border-left: 4px solid var(--gold);
  font-size: clamp(20px, 2.4vw, 26px); line-height: 1.4;
  font-weight: 700; color: var(--charcoal);
}
.pull-quote cite {
  display: block; margin-top: 14px;
  font-size: 15px; font-weight: 600; font-style: normal; color: var(--faint);
}

.tick-list { list-style: none; display: grid; gap: 12px; }
.tick-list--2 { grid-template-columns: repeat(2, 1fr); }
.tick-list--3 { grid-template-columns: repeat(3, 1fr); }
.tick-list li {
  position: relative; padding-left: 26px;
  font-size: 15.5px; line-height: 1.6; color: var(--muted);
}
.tick-list li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 8px; height: 8px; border-radius: 2px; background: var(--gold);
}
.band--dark .tick-list li { color: var(--on-dark); }

/* ---------- Trusted by -------------------------------------------------- */

.trusted {
  display: flex; flex-wrap: wrap; gap: 12px 32px; align-items: center;
  padding-top: 10px;
}
.trusted__label {
  font-size: 13px; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--faint);
}
.trusted__list {
  list-style: none; display: flex; flex-wrap: wrap; gap: 12px 32px;
}
.trusted__list li { font-size: 15px; font-weight: 700; color: var(--fainter); }

/* ---------- Marketing strip -------------------------------------------- */

.mstrip {
  background: #fff; border: 1px solid var(--border); border-radius: var(--r-panel);
  padding: 44px 48px;
  display: grid; grid-template-columns: 1.2fr 2fr; gap: 48px; align-items: center;
}
.mstrip h2 { font-size: 28px; }
.mstrip p { font-size: 15.5px; line-height: 1.6; color: var(--muted); margin-top: 12px; }
.mstrip__links { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.mstrip__links a {
  border: 1px solid var(--border); border-radius: 12px; padding: 18px;
  font-size: 15px; font-weight: 700; color: var(--charcoal);
  transition: border-color 0.15s ease;
}
.mstrip__links a:hover { border-color: var(--gold); color: var(--charcoal); }

/* ---------- FAQ --------------------------------------------------------- */

.faq { display: flex; flex-direction: column; gap: 14px; margin-top: 32px; }
.faq details {
  background: #fff; border-radius: var(--r-sm); padding: 22px 26px;
  border: 1px solid transparent; transition: border-color 0.15s ease;
}
.faq details[open] { border-color: var(--border); }
.faq summary {
  font-size: clamp(16px, 1.6vw, 17.5px); font-weight: 700; color: var(--charcoal);
  cursor: pointer; list-style: none; position: relative; padding-right: 34px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 0; top: 50%;
  width: 10px; height: 10px; margin-top: -7px;
  border-right: 2px solid var(--gold-hover); border-bottom: 2px solid var(--gold-hover);
  transform: rotate(45deg); transition: transform 0.18s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -3px; }
.faq__body { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.faq__body p { font-size: 15.5px; line-height: 1.7; color: var(--muted); }

/* ---------- Group referral (Icon <-> HoneyBadger) ---------------------- */

.group-note { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter) 24px; }
.group-note__inner {
  background: var(--tint); border: 1px solid var(--border);
  border-left: 4px solid var(--gold);
  border-radius: var(--r-sm);
  padding: 28px 32px;
  display: flex; flex-direction: column; gap: 10px;
  max-width: var(--narrow);
}
.group-note__label {
  font-size: 12.5px; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--gold-hover);
}
.group-note__body { font-size: 16px; line-height: 1.65; color: var(--muted); }
.group-note__body a { font-weight: 700; text-decoration: underline;
                      text-underline-offset: 2px; }

/* ---------- CTA band ---------------------------------------------------- */

.cta-band { max-width: var(--max); margin: 0 auto; padding: 96px var(--gutter); }
.cta-band__panel {
  background: var(--charcoal); border-radius: var(--r-band);
  padding: 72px 64px;
  display: flex; justify-content: space-between; align-items: center; gap: 48px;
}
.cta-band__panel h2 { font-size: clamp(28px, 3.6vw, 40px); color: #FFFFFF; }
.cta-band__panel p { font-size: 17px; color: var(--on-dark); margin-top: 12px; }
.cta-band__actions {
  display: flex; flex-direction: column; gap: 14px; align-items: center; flex-shrink: 0;
}
.cta-band__phone { font-size: 16px; font-weight: 700; color: #FFFFFF; }
.cta-band__phone:hover { color: var(--gold); }

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

.contact-grid {
  max-width: var(--max); margin: 0 auto;
  padding: 72px var(--gutter) 96px;
  display: grid; grid-template-columns: 1fr 1.1fr; gap: 72px; align-items: start;
}
.contact-info { display: flex; flex-direction: column; gap: 28px; }
.contact-info > p { font-size: 18px; line-height: 1.65; color: var(--muted); }
.contact-block { display: flex; flex-direction: column; gap: 8px; }
.contact-block h2 {
  font-size: 14px; font-weight: 800; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--gold-hover);
}
.contact-block__phone { font-size: clamp(24px, 3vw, 28px); font-weight: 800;
                        color: var(--charcoal); }
.contact-block address { font-size: 17px; line-height: 1.65; color: var(--body); }
.contact-social { display: flex; gap: 18px; font-size: 15px; font-weight: 700;
                  flex-wrap: wrap; }

.contact-photo { margin-top: 4px; }
.contact-photo img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
  border-radius: var(--r-panel);
}

.form-card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--r-panel);
  padding: 40px; display: flex; flex-direction: column; gap: 18px;
  box-shadow: var(--sh-form);
}
.form-card h2 { font-size: 24px; font-weight: 800; margin-bottom: 4px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px;
         font-size: 13.5px; font-weight: 700; color: var(--muted); }
.field input, .field textarea {
  border: 1px solid var(--input-border); border-radius: 10px;
  padding: 13px 14px; font-size: 15px; font-family: inherit;
  background: var(--bg); color: var(--body); width: 100%;
}
.field textarea { resize: vertical; min-height: 120px; }
.field input:invalid:not(:placeholder-shown),
.field textarea:invalid:not(:placeholder-shown) { border-color: #C2453B; }
.field__error { font-size: 12.5px; font-weight: 600; color: #C2453B; min-height: 0; }
.form-note { font-size: 12.5px; line-height: 1.5; color: var(--faint); }
.form-status {
  padding: 14px 16px; border-radius: 10px; font-size: 15px; font-weight: 600;
  background: var(--tint); color: var(--charcoal);
}
.form-status[hidden] { display: none; }
.form-status--ok { background: #EAF3E8; color: #2B5227; }
.form-status--error { background: #FBEAE7; color: #8A2B1E; }

/* Honeypot. Off-screen rather than display:none, because some bots skip
   display:none fields. Never focusable, never announced. */
.hp {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

.form-notice {
  background: #FFF6E2; border: 1px solid var(--gold);
  border-radius: 10px; padding: 14px 16px;
  font-size: 13.5px; line-height: 1.55; color: var(--charcoal);
}

/* ---------- Case study -------------------------------------------------- */

.case-hero { display: flex; flex-direction: column; gap: 20px; }
.case-lead { font-size: clamp(17px, 1.9vw, 20px); line-height: 1.6; color: var(--muted);
             max-width: 60ch; }
.case-services { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }
.case-services li {
  font-size: 13.5px; font-weight: 600; color: var(--muted);
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--r-pill); padding: 8px 16px;
}
.case-nav { display: flex; flex-wrap: wrap; gap: 16px; padding-top: 12px; }

/* ---------- Blog -------------------------------------------------------- */

.post-list { display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); }
.post-list--2 { grid-template-columns: repeat(2, 1fr); }
.post-list--3 { grid-template-columns: repeat(3, 1fr); }
.post-card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--r-card);
  padding: 26px; display: flex; flex-direction: column; gap: 10px;
}
.post-card__meta { font-size: 13px; color: var(--faint); }
.post-card h3 { font-size: 20px; }
.post-card p { font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.post-card__link { margin-top: auto; padding-top: 8px; font-size: 14px;
                   font-weight: 700; color: var(--gold-hover); }

.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }
.chips li {
  font-size: 13.5px; font-weight: 600; color: var(--muted);
  border: 1px solid var(--border); border-radius: var(--r-pill); padding: 7px 15px;
}

/* ---------- To confirm marker ------------------------------------------ */

.to-confirm {
  display: inline-block; font-family: var(--mono); font-size: 12px;
  background: #FFF1CC; border: 1px dashed var(--gold-hover);
  color: #7A5600; padding: 3px 8px; border-radius: 4px;
}

/* ---------- 404 --------------------------------------------------------- */

.notfound {
  max-width: var(--narrow); margin: 0 auto;
  padding: 120px var(--gutter);
  text-align: center; display: flex; flex-direction: column; gap: 22px;
  align-items: center;
}
.notfound__code { font-size: 15px; font-weight: 800; letter-spacing: 0.08em;
                  text-transform: uppercase; color: var(--gold-hover); }

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

/* White ground. The logo used to sit on its own white chip against charcoal,
   which read as a sticker stuck on the footer; with the whole footer white the
   chip is unnecessary and gone. Everything that depended on the dark ground
   flips with it - gold headings and --fainter text both fail contrast on
   white, and the phone number was painted --bg, which would vanish. */
.site-foot {
  background: #FFFFFF; color: var(--body); margin-top: 0;
  border-top: 1px solid var(--border);
}
.site-foot a { color: var(--body); }
.site-foot a:hover { color: var(--charcoal); text-decoration: underline; }
.site-foot__inner {
  max-width: var(--max); margin: 0 auto; padding: 72px var(--gutter) 40px;
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 48px;
}
.site-foot__brand { display: flex; flex-direction: column; gap: 18px; }
/* align-self is load-bearing. .site-foot__brand is a column flex container, so
   the default align-items: stretch made this image a full-width flex item, and
   `width: auto` on a stretched item resolves to the track width rather than
   the intrinsic ratio - it rendered 342x40 from a natural 300x124. Removing
   the stretch lets the ratio govern again. object-fit is a second guard: if
   anything ever constrains both axes, the image letterboxes instead of
   distorting. */
.site-foot__logo {
  align-self: flex-start;
  height: 46px; width: auto; max-width: 100%;
  object-fit: contain;
}
.site-foot__brand p { font-size: 14.5px; line-height: 1.65; max-width: 34ch;
                      color: var(--muted); }
.site-foot__social { display: flex; gap: 16px; font-size: 14px; font-weight: 600;
                     flex-wrap: wrap; }
.site-foot__col { display: flex; flex-direction: column; gap: 10px; }
/* Gold moves from the heading text to a rule under it: still the brand accent,
   but decoration rather than 13px type at 1.9:1 against white. */
.site-foot__col h2 {
  font-size: 13px; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--charcoal); margin-bottom: 6px;
  align-self: flex-start; padding-bottom: 7px;
  border-bottom: 2px solid var(--gold);
}
.site-foot__col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.site-foot__col a, .site-foot__col address { font-size: 14.5px; line-height: 1.7; }
.site-foot__col address { color: var(--muted); font-style: normal; }
.site-foot__phone { font-size: 17px; font-weight: 700; color: var(--charcoal) !important; }
.site-foot__phone:hover { color: var(--charcoal) !important; }
.site-foot__email { font-size: 14.5px; }
.site-foot__bar { border-top: 1px solid var(--border); }
.site-foot__bar-inner {
  max-width: var(--max); margin: 0 auto; padding: 20px var(--gutter);
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; font-size: 13px; flex-wrap: wrap; color: var(--muted);
}
.site-foot__legal { display: flex; gap: 20px; }
.site-foot__credit {
  text-align: center; padding: 0 var(--gutter) 24px;
  font-size: 12.5px; color: var(--muted);
}
.site-foot__credit a { color: var(--charcoal); font-weight: 600; }

/* ==========================================================================
   Responsive. The mock is desktop-only at 1320px; these are the collapse
   rules the handoff asked for (grids 4 > 2 > 1, collage to a scroll strip).
   ========================================================================== */

@media (max-width: 1100px) {
  :root { --gutter: 24px; }

  .site-nav {
    position: fixed; inset: 84px 0 auto; margin: 0;
    background: var(--bg); border-bottom: 1px solid var(--border);
    box-shadow: var(--sh-menu);
    max-height: calc(100vh - 84px); overflow-y: auto;
    transform: translateY(-8px); opacity: 0; pointer-events: none;
    transition: transform 0.18s ease, opacity 0.18s ease;
  }
  .site-nav.is-open { transform: none; opacity: 1; pointer-events: auto; }
  .site-nav__list {
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 12px var(--gutter) 28px;
  }
  .site-nav__list > li { border-bottom: 1px solid var(--border); }
  .site-nav__link { padding: 16px 0; font-size: 16px; width: 100%; text-align: left; }
  .site-nav__trigger { display: flex; justify-content: space-between; align-items: center; }
  .site-nav__cta { border-bottom: none; margin: 20px 0 0; }
  .site-nav__cta .btn { display: block; width: 100%; padding: 16px; }

  .mega {
    position: static; transform: none; width: auto;
    flex-direction: column; gap: 22px;
    box-shadow: none; border: none; border-radius: 0;
    padding: 0 0 20px; background: transparent; animation: none;
  }
  .mega--narrow { width: auto; padding: 0 0 20px; }
  .nav-toggle { display: flex; }

  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .post-list--3 { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); gap: 36px; padding: 60px var(--gutter); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .mstrip { grid-template-columns: 1fr; gap: 28px; padding: 32px; }
  .mstrip__links { grid-template-columns: repeat(2, 1fr); }
  .site-foot__inner { grid-template-columns: 1fr 1fr; gap: 40px; }

  .collage {
    margin: 44px 0 0; padding: 0 var(--gutter) 56px;
    overflow-x: auto; justify-content: flex-start;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }
  .collage__tile { scroll-snap-align: start; }
  .collage__tile--1, .collage__tile--3, .collage__tile--5, .collage__tile--7 { margin-top: 0; }
  .collage__tile--2, .collage__tile--4, .collage__tile--6 { margin-top: 32px; }
}

@media (max-width: 900px) {
  .split, .split--even { grid-template-columns: 1fr; gap: 36px; padding-bottom: 56px; }
  .split--reverse > :first-child { order: 0; }
  .contact-grid { grid-template-columns: 1fr; gap: 44px; }
  .reasons, .values { grid-template-columns: 1fr; gap: 32px; }
  .grid--3, .post-list, .steps--3, .steps--6 { grid-template-columns: repeat(2, 1fr); }
  .shots--3 { grid-template-columns: repeat(2, 1fr); }
  .post-list--2, .post-list--3 { grid-template-columns: repeat(2, 1fr); }
  .cta-band__panel { flex-direction: column; align-items: flex-start; padding: 44px 32px; }
  .cta-band__actions { align-items: flex-start; width: 100%; }
  .cta-band { padding: 64px var(--gutter); }
  .section, .band__inner { padding: 64px var(--gutter); }
  .tick-list--3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px) {
  .grid--4, .grid--3, .grid--2, .post-list,
  .steps, .steps--3, .steps--6, .stats { grid-template-columns: 1fr; }
  .shots--1, .shots--2, .shots--3 { grid-template-columns: 1fr; }
  .post-list--2, .post-list--3 { grid-template-columns: 1fr; }
  .client-mark { height: 64px; }
  .mstrip__links { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .tick-list--2, .tick-list--3 { grid-template-columns: 1fr; }
  .site-foot__inner { grid-template-columns: 1fr; gap: 32px; }
  .site-foot__bar-inner { flex-direction: column; align-items: flex-start; }
  .section-head { flex-direction: column; align-items: flex-start; }
  .form-card { padding: 26px; }
  .post__body > p, .post__body li { font-size: 16.5px; line-height: 1.75; }
  .pager { gap: 8px 12px; }
  .pager__nums a { min-width: 38px; height: 38px; padding: 0 9px; }
  .hero-centre { padding-top: 44px; }
  .hero-actions .btn { width: 100%; }
  .pull-quote { padding-left: 20px; }
  .collage__tile--1 { flex-basis: 240px; height: 260px; }
  .collage__tile--2 { flex-basis: 260px; height: 300px; }
  .collage__tile--3 { flex-basis: 230px; height: 270px; }
  .collage__tile--4 { flex-basis: 280px; height: 330px; }
  .collage__tile--5 { flex-basis: 230px; height: 260px; }
  .collage__tile--6 { flex-basis: 260px; height: 290px; }
  .collage__tile--7 { flex-basis: 240px; height: 270px; }
}

@media print {
  .site-head, .site-nav, .nav-toggle, .cta-band, .skip-link { display: none; }
  body { background: #fff; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 11px; }
}

/* ==========================================================================
   Text on a dark ground
   ==========================================================================
   This block is last on purpose.

   `.split__body > p` and `.reason p` set --muted for the light-ground versions
   of those components, and both appear after `.band--dark p` in this file. At
   equal specificity the later rule wins, so inside a dark band the body copy
   was rendering #5A6771 on #2E3A42 - measured 2.01:1, well under the 4.5:1
   floor, which is what made it hard to read. Anchoring on the dark container
   and sitting last settles it without touching the light-ground rules.

   Gold headings are deliberately left alone: they measure 6.17:1 on charcoal
   and they are the brand accent in these bands. */
.band--dark .split__body > p,
.band--dark .reason p,
.band--dark address,
.band--dark cite,
.band--dark blockquote { color: #FFFFFF; }