/* =================================================================
   Affordable Homes — Landing Page
   Design reference: 1728px artboard (16" laptop)
   ================================================================= */

/* ---------------------------- FONTS ----------------------------- */
@font-face {
  font-family: 'Adani';
  src: url('../fonts/adani-regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/*
 * Alkatra, for the promo banner's opening line. Subset to Latin and served as
 * woff2 — the supplied TTFs carry a full Devanagari set and run ~500KB each,
 * which is far too much to spend on one line of display type.
 */
@font-face {
  font-family: 'Alkatra';
  src: url('../fonts/alkatra-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Alkatra';
  src: url('../fonts/alkatra-medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Alkatra';
  src: url('../fonts/alkatra-semibold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Alkatra';
  src: url('../fonts/alkatra-bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Open Sans';
  src: url('../fonts/OpenSans-Light-webfont.eot');
  src: url('../fonts/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'),
       url('../fonts/OpenSans-Light-webfont.woff') format('woff'),
       url('../fonts/OpenSans-Light-webfont.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Open Sans';
  src: url('../fonts/OpenSans-Regular-webfont.eot');
  src: url('../fonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
       url('../fonts/OpenSans-Regular-webfont.woff') format('woff'),
       url('../fonts/OpenSans-Regular-webfont.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Open Sans';
  src: url('../fonts/OpenSans-Semibold-webfont.eot');
  src: url('../fonts/OpenSans-Semibold-webfont.eot?#iefix') format('embedded-opentype'),
       url('../fonts/OpenSans-Semibold-webfont.woff') format('woff'),
       url('../fonts/OpenSans-Semibold-webfont.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Open Sans';
  src: url('../fonts/OpenSansBold-webfont.eot');
  src: url('../fonts/OpenSansBold-webfont.eot?#iefix') format('embedded-opentype'),
       url('../fonts/OpenSansBold-webfont.woff') format('woff'),
       url('../fonts/OpenSansBold-webfont.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* --------------------------- TOKENS ----------------------------- */
:root {
  --navy:        #113B83;
  --ink:         #272727;
  --blue:        #1758C4;   /* link blue — 6.5:1 on white */
  --blue-soft:   #D7ECFE;
  --grey:        #F4F4F4;
  --orange:      #F48024;
  --gold:        #FFC107;
  --line:        #505050;
  --divider:     #508EF8;

  --font-head: 'Adani', 'Open Sans', Arial, sans-serif;
  --font-script: 'Alkatra', 'Adani', Georgia, serif;
  --font-body: 'Open Sans', Arial, Helvetica, sans-serif;
}

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

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

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

h1, h2, h3, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

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

/* -------------------------- CONTAINERS -------------------------- */
.container {
  width: 100%;
  max-width: 1454px;          /* 1406 content + 2 × 24 gutter */
  margin: 0 auto;
  padding: 0 24px;
}

.container--wide { max-width: 1492px; }   /* 1444 content + gutters */

/* ---------------------------- BUTTON ---------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  /*
   * A minimum rather than a fixed width: at Open Sans 18 the longest label
   * ("Get a Free Quote") needs 247px, so a hard 246px clipped it. Shorter
   * labels still sit at the design's 246px.
   */
  min-width: 246px;
  height: 45px;
  padding: 0 33px;
  gap: 12px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  transition: background-color .25s ease, transform .25s ease;
}

.btn--primary { background: var(--navy); color: #fff; }
.btn--primary:hover { background: #0d2f6a; }
.btn__arrow { flex: none; }

/* =================================================================
   HEADER
   ================================================================= */
.header { background: #fff; }

.header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 92px;
}

.header__logo img { width: 273px; height: auto; }

.header__btn { justify-self: center; }

.header__contact {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 36px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
}

.header__email { color: var(--ink); }
.header__phone { color: var(--navy); }
.header__email:hover,
.header__phone:hover { opacity: .8; }

/* =================================================================
   HERO
   ================================================================= */
.hero {
  position: relative;
  height: 569px;
  z-index: 2;
}

.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* #000000 at 40% over the photo */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .4);
}

.hero__container {
  position: relative;
  z-index: 1;
  height: 100%;
}

.hero__content {
  position: relative;
  padding-top: 220px;
  max-width: 860px;
  color: #fff;
}

.hero__title {
  font-family: var(--font-head);
  font-size: 60px;
  line-height: 70px;
  font-weight: 400;
}

.hero__text {
  margin-top: 10px;
  max-width: 690px;
  font-family: var(--font-head);
  font-size: 24px;
  line-height: 29px;
}

/* --------------------------- ENQUIRY ---------------------------- */
.enquiry {
  position: absolute;
  top: 79px;
  right: 24px;
  z-index: 5;
  width: 370px;
  padding: 36px 31px 22px;
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .10);
}

.enquiry__title {
  font-family: var(--font-head);
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
}

.enquiry__text {
  margin-top: 12px;
  font-family: var(--font-head);
  font-size: 17px;
  line-height: 25px;
}

.enquiry__form { margin-top: 17px; }

.field { margin-bottom: 20px; }
.field:last-of-type { margin-bottom: 0; }

.field input,
.field textarea {
  width: 100%;
  height: 50px;
  padding: 0 15px;
  font-family: var(--font-head);
  font-size: 16px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.field textarea {
  display: block;
  height: 79px;
  padding: 13px 15px;
  line-height: 22px;
  resize: vertical;
}

.field ::placeholder { color: #333; opacity: 1; }

/* phone row: fixed NZ dialling code + number */
.field--phone {
  display: flex;
  height: 50px;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.field--phone input { height: 48px; }

.field--phone input[type="tel"] {
  border: 0;
  border-radius: 0 12px 12px 0;
}

.field__code {
  flex: none;
  display: flex;
  align-items: center;
  width: 94px;
  padding: 0 15px;
  font-family: var(--font-head);
  font-size: 16px;
  color: var(--ink);
  border-right: 1px solid var(--line);
}

.enquiry__submit {
  display: block;
  width: 256px;
  height: 42px;
  margin: 20px auto 0;
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 400;
  color: #fff;
  background: var(--navy);
  border-radius: 999px;
  transition: background-color .25s ease;
}

.enquiry__submit:hover { background: #0d2f6a; }

/* honeypot — must stay in the layout for bots, invisible to people */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.field input.has-error,
.field textarea.has-error,
.field--phone:has(input.has-error) { border-color: #C0392B; }

.enquiry__status {
  margin: 0;
  font-family: var(--font-head);
  font-size: 14px;
  line-height: 20px;
}

.enquiry__status.is-error {
  margin-top: 14px;
  color: #C0392B;
}

.enquiry__submit:disabled { opacity: .65; cursor: default; }

/* =================================================================
   THANK YOU / NOTICE PAGES
   ================================================================= */
.thanks { padding: 90px 0 110px; }

.thanks__box {
  max-width: 820px;
  margin: 0 auto;
  padding: 64px 60px 60px;
  background: var(--blue-soft);
  border-radius: 24px;
  text-align: center;
}

.thanks__tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 78px;
  height: 78px;
  margin-bottom: 30px;
  background: var(--navy);
  border-radius: 50%;
}

.thanks__title {
  font-family: var(--font-head);
  font-size: 48px;
  line-height: 57px;
  font-weight: 400;
}

.thanks__text {
  max-width: 620px;
  margin: 18px auto 0;
  font-size: 17px;
  line-height: 26px;
}

.thanks__text a {
  color: var(--navy);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.thanks__actions { margin-top: 36px; }
.thanks__actions .btn { justify-content: center; gap: 14px; }

.notice { padding: 120px 0; text-align: center; }

.notice__title {
  font-family: var(--font-head);
  font-size: 40px;
  line-height: 50px;
  font-weight: 400;
}

.notice__errors {
  margin: 20px 0 34px;
  font-size: 17px;
  line-height: 28px;
  color: #C0392B;
}

/* =================================================================
   INTRO
   ================================================================= */
.intro { padding-top: 34px; }

.intro__title {
  max-width: 800px;
  font-size: 30px;
  line-height: 41px;
  font-weight: 700;
}

.intro__text {
  margin-top: 20px;
  max-width: 760px;
  font-size: 16px;
  line-height: 22px;
}

/* =================================================================
   PROCESS
   ================================================================= */
.process { margin-top: 80px; }

.process__box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 258px;
  padding: 0 40px;
  background: var(--blue-soft);
  border-radius: 24px;
}

.process__step {
  position: relative;
  flex: none;
  width: 212px;
  height: 201px;
  background: #fff;
  border-radius: 50%;
  text-align: center;
}

/* icons sit on a shared baseline, labels are centred on a shared axis */
.process__icon {
  position: absolute;
  left: 50%;
  bottom: 48.26%;              /* 104px above the circle's base */
  transform: translateX(-50%);
  object-fit: contain;
}

.process__icon--consult     { width: 65px; height: 58px; }
.process__icon--quote       { width: 57px; height: 64px; }
.process__icon--contractor  { width: 64px; height: 64px; }
.process__icon--management  { width: 56px; height: 64px; }

.process__label {
  position: absolute;
  left: 0;
  right: 0;
  top: 72.14%;                 /* label block centred on y = 145px */
  transform: translateY(-50%);
  font-size: 18px;
  line-height: 25px;
  font-weight: 700;
  color: var(--ink);
}

.process__arrow { flex: none; display: flex; }

/* =================================================================
   SUPPLIERS
   ================================================================= */
.suppliers { margin-top: 52px; }

.suppliers__title {
  font-size: 26px;
  line-height: 35px;
  font-weight: 400;
  text-align: center;
}

.suppliers__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 27px;
  margin-top: 18px;
  min-height: 70px;
}

.supplier { object-fit: contain; }
.supplier--resene      { width: 137px; height: 70px; }
.supplier--lbp         { width: 64px;  height: 64px; }
.supplier--mb          { width: 44px;  height: 59px; }
.supplier--carters     { width: auto;  height: 38px; }
.supplier--nzcb        { width: 137px; height: 58px; }
.supplier--apb         { width: 88px;  height: 34px; }
.supplier--placemakers { width: 95px;  height: 26px; }

/* =================================================================
   SERVICES
   ================================================================= */
.services { margin-top: 54px; }

.services__box {
  padding: 60px 42px 48px;
  background: var(--grey);
  border-radius: 24px;
}

.services__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
}

.services__intro { min-width: 0; }

.services__title {
  font-family: var(--font-head);
  font-size: 48px;
  line-height: 57px;
  font-weight: 400;
}

.services__text {
  margin-top: 8px;
  max-width: 860px;
  font-size: 16px;
  line-height: 22px;
}

.services__btn { flex: none; margin-top: 50px; }

.services__list {
  display: grid;
  grid-template-columns: 387fr 358fr 307fr 270fr;
  grid-auto-flow: column;
  grid-template-rows: repeat(8, auto);
  row-gap: 26px;
  margin-top: 46px;
}

.services__list li,
.healthy__list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-head);
  font-size: 20px;
  line-height: 27px;
  color: var(--ink);
}

/* bullet icon — images/bullet.svg */
.bullet {
  flex: none;
  width: 15px;
  height: 15px;
  background: url('../images/bullet.svg') center / 15px 15px no-repeat;
}

/* =================================================================
   PROJECTS
   ================================================================= */
.projects { margin-top: 85px; }

.projects__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 20px;
  row-gap: 54px;
}

.project__img {
  width: 100%;
  height: 230px;
  object-fit: cover;
  border-radius: 12px;
}

.project__title {
  margin-top: 11px;
  font-size: 30px;
  line-height: 41px;
  font-weight: 700;
}

.project__text {
  margin-top: 15px;
  max-width: 690px;
  font-size: 16px;
  line-height: 22px;
}

.project .btn { margin-top: 21px; }

/* =================================================================
   HEALTHY HOMES
   ================================================================= */
.healthy { margin-top: 115px; }

.healthy__box {
  position: relative;
  padding: 48px 42px 62px;
  background: var(--blue-soft);
  border-radius: 24px;
}

.healthy__content { position: relative; z-index: 2; max-width: 760px; }

.healthy__title {
  font-family: var(--font-head);
  font-size: 48px;
  line-height: 57px;
  font-weight: 400;
}

.healthy__text {
  margin-top: 14px;
  max-width: 800px;
  font-size: 16px;
  line-height: 22px;
}

.healthy__list {
  display: grid;
  grid-template-columns: 166px auto;
  justify-content: start;
  row-gap: 12px;
  margin-top: 38px;
}

.healthy .btn { margin-top: 37px; }

.healthy__media { position: absolute; inset: 0; }

.healthy__img {
 position: absolute;
  top: 13px;
  right: 29px;
  width: 530px;
  object-fit: cover;
  object-position: center;
}


/* =================================================================
   RECENTLY DONE JOBS
   ================================================================= */
.jobs { margin-top: 103px; }

.jobs__title {
  font-family: var(--font-head);
  font-size: 48px;
  line-height: 57px;
  font-weight: 400;
  text-align: center;
}

.jobs__filters {
  display: flex;
  gap: 12px;
  margin-top: 44px;
  overflow-x: auto;
  scrollbar-width: none;
}

.jobs__filters::-webkit-scrollbar { display: none; }

.filter {
  flex: none;
  height: 35px;
  padding: 0 15px;
  font-family: var(--font-head);
  font-size: 17px;
  line-height: 35px;
  color: var(--ink);
  background: var(--blue-soft);
  border-radius: 999px;
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease;
}

.filter:hover { background: #c6e2fb; }

.filter.is-active {
  background: var(--navy);
  color: #fff;
}

.jobs__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 25px;
  row-gap: 23px;
  margin-top: 33px;
}

.job {
  position: relative;
  height: 278px;
  border-radius: 12px;
  overflow: hidden;
}

.job img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .45s ease;
}

/* Hovering the tile eases the photo in a little. */
.job:hover img,
.job:focus-within img { transform: scale(1.07); }

/* A light scrim so the white button reads on pale photos. */
.job::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(17, 59, 131, .18);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}

.job:hover::after,
.job:focus-within::after { opacity: 1; }

/*
 * The expand button sits in the middle of the tile and only appears on hover.
 * Solid white rather than a white outline: most of these photos are pale
 * interiors, and an outline would disappear against them.
 */
.job__zoom {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  color: var(--navy);
  background: #fff;
  border: 0;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
  cursor: pointer;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.82);
  transition: opacity .25s ease, transform .25s ease, background-color .2s ease, color .2s ease;
}

.job__zoom svg { width: 18px; height: 18px; }

.job:hover .job__zoom,
.job__zoom:focus-visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.job__zoom:hover { color: #fff; background: var(--navy); }

/*
 * Touch devices never hover, so the button would be invisible and
 * unreachable. Show it permanently there.
 */
@media (hover: none) {
  .job__zoom { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  .job::after { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .job:hover img,
  .job:focus-within img { transform: none; }
}

.job.is-hidden { display: none; }

/* =================================================================
   TESTIMONIALS
   ================================================================= */
.testimonials { margin-top: 63px; }

.testimonials__title {
  font-family: var(--font-head);
  font-size: 48px;
  line-height: 57px;
  font-weight: 400;
  text-align: center;
}

.testimonials__subtitle {
  margin-top: 5px;
  font-family: var(--font-head);
  font-size: 20px;
  line-height: 27px;
  text-align: center;
}

.testimonials__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  max-width: 1306px;
  margin: 36px auto 0;
}

.review {
  padding: 40px 45px 44px;
  background: var(--grey);
  border-radius: 20px;
}

.review__head {
  display: flex;
  align-items: center;
  gap: 14px;
}

.review__avatar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  font-family: var(--font-head);
  font-size: 23px;
  font-weight: 700;
  color: #fff;
  border-radius: 50%;
}

.review__avatar--dark  { background: #241111; }
.review__avatar--green { background: #28B346; }
.review__avatar--red   { background: #F04236; }

.review__name {
  font-family: var(--font-head);
  font-size: 15px;
  line-height: 20px;
  font-weight: 700;
}

.review__date {
  font-family: var(--font-head);
  font-size: 13px;
  line-height: 18px;
}

.review__stars {
  display: flex;
  gap: 1px;
  margin-top: 23px;
}

.review__stars svg {
  width: 22px;
  height: 22px;
  fill: var(--gold);
}

.review__text {
  margin-top: 22px;
  font-family: var(--font-head);
  font-size: 16px;
  line-height: 19px;
}

.review__source {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: 35px;
  font-family: var(--font-head);
  font-size: 12px;
  line-height: 17px;
}

.review__source img { width: 33px; height: 30px; }

/* =================================================================
   FOOTER
   ================================================================= */
.footer { margin: 70px 0 53px; }

.footer__box {
  background: var(--blue-soft);
  border-radius: 24px;
  overflow: hidden;
}

.footer__top {
  display: grid;
  grid-template-columns: 605px minmax(0, 1fr);
  padding: 48px 34px 0;
}

.footer__left { min-width: 0; }

.footer__logo { display: block; margin-top: 23px; }
.footer__logo img { width: 404px; height: auto; }

.footer__social-label {
  margin-top: 36px;
  font-family: var(--font-head);
  font-size: 20px;
  line-height: 27px;
}

.footer__social {
  display: flex;
  gap: 8px;
  margin-top: 15px;
  color: var(--ink);
}

.footer__social a { display: block; transition: opacity .2s ease; }
.footer__social svg { display: block; }
.footer__social a:hover { opacity: .6; }

.footer__right { min-width: 0; }

.footer__headline {
  font-family: var(--font-head);
  font-size: 54px;
  line-height: 65px;
  font-weight: 400;
}

.footer__headline strong { font-weight: 700; }

.footer__links {
  display: flex;
  align-items: center;
  gap: 54px;
  margin-top: 46px;
  font-family: var(--font-head);
  font-size: 32px;
  line-height: 44px;
}

.footer__link {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  white-space: nowrap;
}

.footer__link span {
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 1px;
}

.footer__link:hover { color: var(--navy); }

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 38px;
  padding: 20px 47px 30px 34px;
  border-top: 1px solid var(--divider);
  font-size: 16px;
  line-height: 8px;
}

.footer__bottom a:hover { text-decoration: underline; }

/* =================================================================
   LIGHTBOX
   ================================================================= */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 40px;
  background: rgba(0, 0, 0, .85);
}

.lightbox.is-open { display: flex; }

.lightbox__img {
  max-width: 90vw;
  max-height: 85vh;
  border-radius: 12px;
}

.lightbox__close {
  position: absolute;
  top: 24px;
  right: 34px;
  font-size: 46px;
  line-height: 1;
  color: #fff;
}

/* =================================================================
   RESPONSIVE
   ================================================================= */

/* ---- large laptops (design scales down proportionally) ---- */
@media (max-width: 1500px) {
  .healthy__img { width: 430px; height: 380px; right: 42px; }
  .healthy__content { max-width: 620px; }
}

@media (max-width: 1300px) {
  .header__contact { font-size: 20px; gap: 24px; }
  .header__logo img { width: 240px; }

  .hero { height: auto; }
  .hero__content { padding: 160px 0 120px; max-width: 60%; }
  .hero__title { font-size: 52px; line-height: 62px; }
  .hero__text { font-size: 21px; line-height: 27px; }

  .services__title,
  .healthy__title,
  .jobs__title,
  .testimonials__title { font-size: 40px; line-height: 50px; }

  .footer__headline { font-size: 44px; line-height: 54px; }
  .footer__links { font-size: 26px; gap: 36px; }
  .footer__left { width: 460px; }
  .footer__logo img { width: 330px; }

  .healthy__content { max-width: 540px; }
  .healthy__img { width: 360px; height: 330px; top: 90px; }
}

/* ---- tablets: enquiry card moves below the hero ---- */
@media (max-width: 1100px) {

  .header__inner {
    grid-template-columns: auto auto;
    align-items: center;
    row-gap: 16px;
    height: auto;
    padding-top: 20px;
    padding-bottom: 20px;
  }
  .header__logo    { grid-column: 1; grid-row: 1; }
  .header__contact { grid-column: 2; grid-row: 1; justify-self: end; }
  .header__btn     { grid-column: 1 / -1; grid-row: 2; justify-self: start; }

  .hero__content { max-width: 100%; padding: 120px 0 100px; }

  .enquiry {
    position: static;
    width: 100%;
    max-width: 560px;
    margin: 40px auto 0;
  }

  .hero__container { display: flex; flex-direction: column; }

  .intro { padding-top: 60px; }

  .process__box {
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
    height: auto;
    padding: 40px;
  }
  .process__arrow { display: none; }

  .services__head { flex-direction: column; }
  .services__btn { margin-top: 24px; }

  .services__list {
    grid-auto-flow: row;
    grid-template-rows: auto;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 30px;
  }

  .healthy__box { padding: 40px 32px; }
  .healthy__content { max-width: 100%; }
  .healthy__media { position: static; display: flex; margin-top: 40px; }
  .healthy__img { position: static; }
  .healthy__img { width: 100%; height: 380px; object-position: center; }

  .jobs__grid { grid-template-columns: repeat(3, 1fr); }
  .job { height: 240px; }

  .testimonials__grid { grid-template-columns: repeat(2, 1fr); }

  .footer__top { grid-template-columns: 1fr; gap: 40px; padding: 40px 32px 0; }
  .footer__left { width: auto; }
  .footer__bottom { padding: 20px 32px 40px; }
}

/* ---- small tablets / large phones ---- */
/*
 * With no "All" button every category is a destination, so on a wide screen
 * the bar wraps rather than hiding its tail behind a scrollbar-less scroller.
 * Narrow screens keep the horizontal scroll, which costs less vertical space.
 */
@media (min-width: 821px) {
  .jobs__filters {
    flex-wrap: wrap;
    row-gap: 12px;
    overflow-x: visible;
  }
}

@media (max-width: 820px) {
  .container, .container--wide { padding: 0 20px; }

  .header__contact { flex-direction: column; align-items: flex-end; gap: 4px; font-size: 16px; }
  .hero__title { text-wrap: balance; }

  .hero__content { padding: 90px 0 80px; }
  .hero__title { font-size: 42px; line-height: 50px; }
  .hero__text { font-size: 18px; line-height: 25px; }

  .intro__title { font-size: 26px; line-height: 36px; }

  .services__box { padding: 40px 24px; }
  .services__title,
  .healthy__title,
  .jobs__title,
  .testimonials__title { font-size: 32px; line-height: 42px; }

  .projects__grid { grid-template-columns: 1fr; row-gap: 46px; }

  .jobs__grid { grid-template-columns: repeat(2, 1fr); column-gap: 16px; row-gap: 16px; }
  .job { height: 200px; }

  .testimonials__grid { grid-template-columns: 1fr; max-width: 560px; }
  .review { padding: 32px 30px 36px; }

  .footer__headline { font-size: 32px; line-height: 42px; }
  .footer__links { flex-direction: column; align-items: flex-start; gap: 18px; font-size: 22px; margin-top: 30px; }
  .footer__logo img { width: 260px; }
  .footer__bottom { flex-direction: column; align-items: flex-start; gap: 8px; line-height: 22px; }
}

/* ---- phones ---- */
@media (max-width: 560px) {
  /* everything stacks: logo, email, phone, then the CTA */
  .header__inner {
    grid-template-columns: 1fr;
    justify-items: center;
    row-gap: 14px;
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .header__logo {
    grid-column: 1 / -1;
    grid-row: auto;
    order: 1;
  }

  .header__logo img { width: 190px; }

  .header__contact {
    grid-column: 1 / -1;
    grid-row: auto;
    order: 2;
    justify-self: center;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-size: 16px;
  }

  .header__btn {
    grid-column: 1 / -1;
    grid-row: auto;
    order: 3;
    justify-self: stretch;
    width: 100%;
    max-width: none;
    justify-content: center;
    gap: 14px;
  }

  .hero__title { font-size: 30px; line-height: 38px; }
  .hero__text { font-size: 16px; line-height: 23px; }
  .hero__content { padding: 60px 0 40px; }
  .enquiry { margin-top: 26px; }

  .enquiry { padding: 28px 20px; border-radius: 20px; }

  .intro { padding-top: 40px; }
  .intro__title { font-size: 22px; line-height: 32px; }

  .process { margin-top: 50px; }
  .process__box { padding: 30px 20px; gap: 18px; }
  .process__step { width: 160px; height: 152px; }
  .process__icon { height: 42px; margin-bottom: 14px; }
  .process__label { font-size: 15px; line-height: 21px; }

  .suppliers { margin-top: 46px; }
  .suppliers__title { font-size: 20px; line-height: 28px; }
  .suppliers__logos { gap: 20px; }

  .services { margin-top: 46px; }
  .services__title,
  .healthy__title,
  .jobs__title,
  .testimonials__title { font-size: 26px; line-height: 34px; }
  .services__list { grid-template-columns: 1fr; row-gap: 16px; margin-top: 30px; }
  .services__list li, .healthy__list li { font-size: 17px; }

  .projects { margin-top: 50px; }
  .project__img { height: 190px; }
  .project__title { font-size: 22px; line-height: 30px; }

  .healthy { margin-top: 60px; }
  .healthy__list { grid-template-columns: 1fr; row-gap: 14px; }
  .healthy__img { height: 240px; }

  .jobs { margin-top: 60px; }
  .jobs__filters { margin-top: 26px; }
  .jobs__grid { grid-template-columns: 1fr; }
  .job { height: 220px; }

  .testimonials { margin-top: 50px; }
  .footer { margin: 50px 0 30px; }
  .footer__headline { font-size: 26px; line-height: 34px; }
  .footer__links { font-size: 18px; }
  .footer__link span { text-underline-offset: 4px; }

  .thanks { padding: 50px 0 60px; }
  .thanks__box { padding: 40px 24px; border-radius: 20px; }
  .thanks__tick { width: 62px; height: 62px; margin-bottom: 22px; }
  .thanks__title { font-size: 26px; line-height: 34px; }
  .thanks__text { font-size: 16px; line-height: 24px; }
  .notice { padding: 70px 0; }
  .notice__title { font-size: 26px; line-height: 34px; }
}

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

/* =================================================================
   WORDPRESS ADDITIONS
   Everything above this line is the original landing page stylesheet.
   ================================================================= */

/* ---- accessibility: skip link + screen reader text ---- */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link:focus {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 1000;
  width: auto;
  height: auto;
  clip: auto;
  clip-path: none;
  padding: 12px 20px;
  font-family: var(--font-body);
  font-size: 15px;
  color: #fff;
  background: var(--navy);
  border-radius: 6px;
}

/* ---- a testimonial avatar can now be a photo instead of an initial ---- */
img.review__avatar { object-fit: cover; }

/* ---- the admin bar must not sit on top of the fixed header ---- */
body.admin-bar .lightbox { top: 32px; }

@media screen and (max-width: 782px) {
  body.admin-bar .lightbox { top: 46px; }
}

/* ---- content coming from the WordPress editor ---- */
.thanks__text p:first-child { margin-top: 0; }
.thanks__text p:last-child  { margin-bottom: 0; }
.thanks__text a             { color: var(--navy); }

.aligncenter { display: block; margin-inline: auto; }
.alignleft   { float: left;  margin: 0 20px 12px 0; }
.alignright  { float: right; margin: 0 0 12px 20px; }

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

/* ---- pagination on the fallback template ---- */
.pagination { margin-top: 30px; font-family: var(--font-body); }
.pagination .page-numbers {
  display: inline-block;
  padding: 6px 12px;
  color: var(--ink);
  text-decoration: none;
}
.pagination .page-numbers.current { color: #fff; background: var(--navy); border-radius: 4px; }

/* =================================================================
   HOME PAGE — navigation, extra sections, full footer
   The landing page uses only the styles above this block.
   ================================================================= */

/* ---------------------------- HEADER NAV ------------------------- */
.header__inner { gap: 24px; }

.header__nav { margin-left: auto; }

.header__menu {
  display: flex;
  align-items: center;
  gap: 30px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.header__menu a {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}

.header__menu a:hover,
.header__menu .current-menu-item > a,
.header__menu .current_page_item > a { color: var(--navy); }

/*
 * Desktop dropdown. Nothing uses it yet, but the mobile panel offers a
 * submenu control — without this, adding a child item would spill the whole
 * sub-menu across the header bar.
 */
.header__menu li { position: relative; }

.header__menu .sub-menu {
  position: absolute;
  top: 100%;
  left: -18px;
  z-index: 60;
  display: none;
  min-width: 220px;
  margin: 0;
  padding: 10px 0;
  list-style: none;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 16px 30px rgba(0, 0, 0, .12);
}

.header__menu li:hover > .sub-menu,
.header__menu li:focus-within > .sub-menu { display: block; }

.header__menu .sub-menu a {
  display: block;
  padding: 9px 20px;
  font-size: 15px;
  font-weight: 400;
  white-space: normal;
}

.header__menu .sub-menu a:hover { background: var(--grey); }

/* The control that opens a submenu exists on the mobile panel only. */
.header__sub-toggle { display: none; }

.header__actions {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-left: 8px;
}

.header__actions .header__phone {
  font-family: var(--font-body);
  font-size: 24px;
  font-weight: 700;
  color: var(--navy);
  text-decoration: none;
  white-space: nowrap;
}

/* burger — hidden until the nav needs to collapse */
.header__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  margin-left: auto;
  padding: 0 9px;
  background: none;
  border: 1px solid #DCDCDC;
  border-radius: 8px;
  cursor: pointer;
}

.header__toggle span {
  display: block;
  height: 2px;
  background: var(--navy);
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}

/*
 * Open state: the outer bars fold into a cross and the middle one fades.
 * The three 2px bars sit 5px apart, so each outer bar is 7px from centre —
 * that is the distance it has to travel to meet in the middle.
 */
body.nav-open .header__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.nav-open .header__toggle span:nth-child(2) { opacity: 0; }
body.nav-open .header__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (prefers-reduced-motion: reduce) {
  .header__toggle span { transition: none; }
}

/* ---------------------------- BUTTONS ---------------------------- */
.btn--ghost {
  color: var(--navy);
  background: transparent;
  border: 1.5px solid var(--navy);
}

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

.project__actions,
.suppliers__actions,
.cta__actions,
.entry__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.suppliers__actions,
.cta__actions { justify-content: center; margin-top: 26px; }

.project__actions { margin-top: 18px; }

/* ------------------ RECENT PROJECTS (dark variant) --------------- */
.jobs__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 26px;
}

.jobs__subtitle {
  margin: 6px 0 0;
  font-size: 16px;
  line-height: 24px;
  color: #5C5C5C;
}

/*
 * The blue is a panel, not a full band: it runs from the top of the section
 * and stops part-way down the first row of photos, so the tiles straddle the
 * edge and everything below stays white.
 *
 * The panel is drawn by a pseudo element anchored to the GRID rather than the
 * section, so its bottom edge lands a fixed distance into the first row no
 * matter how tall the heading or the filter list happens to be. It extends
 * far upward and is clipped by the section, which is what fills the top.
 */
.jobs--dark {
  position: relative;
  isolation: isolate;          /* keeps the z-index:-1 panel inside this section */
  overflow: hidden;
  padding: 60px 0 70px;
  margin-top: 60px;
  background: transparent;
}

.jobs--dark .jobs__grid { position: relative; }

.jobs--dark .jobs__grid::before {
  content: "";
  position: absolute;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  top: -4000px;
  bottom: calc(100% - 96px);   /* 96px down into the first row of photos */
  background: var(--navy);
  z-index: -1;
}

.jobs--dark .jobs__title,
.jobs--dark .jobs__subtitle { color: #fff; text-align: left; }

.jobs--dark .jobs__subtitle { opacity: .8; }

.jobs--dark .btn--ghost { color: #fff; border-color: rgba(255,255,255,.6); }
.jobs--dark .btn--ghost:hover { color: var(--navy); background: #fff; border-color: #fff; }

.jobs--dark .filter {
  color: #fff;
  background: rgba(255,255,255,.12);
  border-color: transparent;
}

.jobs--dark .filter.is-active { color: var(--navy); background: #fff; }

/* -------------------------- CTA BAND ----------------------------- */
.cta { padding: 60px 0; text-align: center; }

.cta__title {
  margin: 0;
  font-family: var(--font-head);
  font-size: 34px;
  line-height: 44px;
  font-weight: 400;
  color: var(--ink);
}

/* ----------------------------- FAQ ------------------------------- */
.faq { padding: 60px 0; background: var(--grey); }

.faq__title {
  margin: 0 0 30px;
  font-family: var(--font-head);
  font-size: 34px;
  line-height: 44px;
  font-weight: 400;
  text-align: center;
}

.faq__list {
  max-width: 900px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq__item {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
}

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 24px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}

.faq__q::-webkit-details-marker { display: none; }

.faq__icon {
  flex: none;
  display: inline-flex;
  color: var(--navy);
  transition: transform .2s ease;
}

.faq__item[open] .faq__icon { transform: rotate(180deg); }

.faq__a {
  padding: 0 24px 20px;
  font-size: 15px;
  line-height: 25px;
  color: #4A4A4A;
}

.faq__a p { margin: 0 0 12px; }
.faq__a p:last-child { margin-bottom: 0; }

/* ----------------------------- BLOG ------------------------------ */
.blog { padding: 60px 0; }

.blog__title {
  margin: 0;
  font-family: var(--font-head);
  font-size: 34px;
  line-height: 44px;
  font-weight: 400;
  text-align: center;
}

.blog__subtitle {
  margin: 6px 0 34px;
  font-size: 16px;
  color: #5C5C5C;
  text-align: center;
}

.blog__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.post__media { display: block; }

.post__img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 12px;
}

.post__img--placeholder { display: block; background: var(--blue-soft); }

.post__title {
  margin: 16px 0 6px;
  font-family: var(--font-head);
  font-size: 19px;
  line-height: 27px;
  font-weight: 400;
}

.post__title a { color: var(--ink); text-decoration: none; }
.post__title a:hover { color: var(--navy); }

.post__date { margin: 0 0 8px; font-size: 13px; color: #6B6B6B; }

.post__excerpt { margin: 0 0 14px; font-size: 15px; line-height: 24px; color: #4A4A4A; }

.post__more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
}

.post__more:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ----------------------- BOOK AN ASSESSMENT ---------------------- */
.assess { padding: 64px 0 70px; background: #241F1F; color: #fff; }

.assess__title {
  margin: 0;
  font-family: var(--font-head);
  font-size: 34px;
  line-height: 44px;
  font-weight: 400;
  text-align: center;
}

.assess__text {
  margin: 8px 0 32px;
  font-size: 16px;
  color: rgba(255,255,255,.72);
  text-align: center;
}

.assess__form { max-width: 860px; margin-inline: auto; }

.assess__legend {
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
}

.assess__options { margin-bottom: 26px; }

.assess__options .wpcf7-checkbox {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 26px;
}

.assess__options .wpcf7-list-item {
  display: block;
  margin: 0;
  text-align: left;
}

.assess__options .wpcf7-list-item label {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  font-size: 15px;
  line-height: 20px;
  color: rgba(255,255,255,.9);
  text-align: left;
  cursor: pointer;
}

/* CF7 pads the label text with literal spaces via pseudo elements. */
.assess__options .wpcf7-list-item-label::before,
.assess__options .wpcf7-list-item-label::after { content: none; }

.assess__options .wpcf7-list-item-label { flex: 0 1 auto; }

.assess__options .wpcf7-list-item input[type="checkbox"] {
  flex: none;
  width: 17px;
  min-width: 17px;
  height: 17px;
  margin: 0;
  accent-color: var(--navy);
  cursor: pointer;
}

.assess__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.assess .field { margin-bottom: 16px; }

.assess .field input,
.assess .field textarea {
  color: #fff;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.22);
}

.assess .field input::placeholder,
.assess .field textarea::placeholder { color: rgba(255,255,255,.5); }

.assess .field input:focus,
.assess .field textarea:focus { border-color: var(--divider); outline: none; }

.assess__submit {
  min-width: 190px;
  padding: 14px 30px;
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 400;
  color: #fff;
  background: var(--navy);
  border: 0;
  border-radius: 30px;
  cursor: pointer;
}

.assess__submit:hover { background: #0D2F69; }

/* --------------------------- SITE FOOTER ------------------------- */
/*
 * The footer is one grey card that rides up over the dark section above it.
 * The blue panel sits inside that card, and the grey strip left showing at
 * the bottom carries the small print.
 */
/*
 * The footer card rides up over the dark assessment band, which only exists
 * on the front page. Everywhere else it needs ordinary spacing or it would
 * overlap the content above it.
 */
.sfooter { position: relative; z-index: 2; margin-top: 70px; padding-bottom: 26px; }

/* Only where the dark band is there to be overlapped. */
body.has-assessment .sfooter { margin-top: -120px; }

.sfooter__card {
  background: #F4F4F4;
  border-radius: 26px;
  overflow: hidden;
}

.sfooter__box {
  display: grid;
  grid-template-columns: 1.5fr 0.9fr 1.1fr 1.1fr;
  gap: 40px;
  padding: 44px 48px 46px;
  background: var(--blue-soft);
  border-radius: 26px;
}

.sfooter__logo { display: inline-block; }
.sfooter__logo img { width: 250px; height: auto; }

.sfooter__about {
  margin: 18px 0 22px;
  font-size: 15px;
  line-height: 24px;
  color: #3C3C3C;
  max-width: 46ch;
}

.sfooter__contact { display: flex; flex-direction: column; gap: 12px; }

.sfooter__contact a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-head);
  font-size: 17px;
  color: var(--navy);
  text-decoration: none;
}

.sfooter__contact a:hover { text-decoration: underline; text-underline-offset: 4px; }

.sfooter__heading {
  margin: 0 0 18px;
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 400;
  color: var(--ink);
}

.sfooter__menu { margin: 0; padding: 0; list-style: none; }

/* Chevron bullets, as in the design. */
.sfooter__menu li {
  position: relative;
  margin-bottom: 10px;
  padding-left: 18px;
  font-size: 15px;
  line-height: 22px;
  color: #3C3C3C;
}

.sfooter__menu li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 6px;
  height: 6px;
  border-right: 1.6px solid var(--navy);
  border-top: 1.6px solid var(--navy);
  transform: rotate(45deg);
}

.sfooter__menu a { color: #3C3C3C; text-decoration: none; }
.sfooter__menu a:hover { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }

/* Kept for any list that still wants two columns. */
.sfooter__menu--split { columns: 2; column-gap: 30px; }
.sfooter__menu--split li { break-inside: avoid; }

/* ---- the small print strip ---- */
.sfooter__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
  padding: 20px 48px;
  font-size: 13px;
  /* #6B6B6B rather than a lighter grey: on the #F4F4F4 strip anything
     lighter drops under the 4.5:1 contrast minimum. */
  color: #6B6B6B;
}

.sfooter__copy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: #6B6B6B;
}

.sfooter__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sfooter__legal li::before { content: "|"; margin-right: 10px; color: #C4C4C4; }
.sfooter__legal a { color: #6B6B6B; text-decoration: none; }
.sfooter__legal a:hover { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }

.sfooter__bar .sfooter__social { display: flex; gap: 8px; margin: 0; color: #241F1F; }
.sfooter__bar .sfooter__social a { display: inline-flex; color: inherit; }
.sfooter__bar .sfooter__social a:hover { color: var(--navy); }

.sfooter__credit { margin: 0; color: #6B6B6B; }
.sfooter__credit a { color: #6B6B6B; text-decoration: none; }
.sfooter__credit a:hover { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------- ENTRY / ARCHIVE ----------------------- */
.entry { padding: 40px 0 60px; }

.entry__back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 34px;
  color: var(--blue);
  font-size: 17px;
}

.entry__back:hover { text-decoration: underline; }

.entry__title {
  margin: 0 0 14px;
  font-family: var(--font-head);
  font-size: clamp(30px, 4vw, 52px);
  line-height: 1.18;
  font-weight: 400;
}

.entry__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 26px;
  color: #6B6B6B;
  font-size: 15px;
}

.entry__meta-item { display: inline-flex; align-items: center; gap: 7px; }

.entry__meta-sep { color: #C9C9C9; }

.entry__rule {
  height: 0;
  margin: 0 0 22px;
  border: 0;
  border-top: 2px solid var(--navy);
}

/* Breadcrumbs */
.crumbs { margin: 0 0 40px; }

.crumbs__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: #4A4A4A;
  font-size: 15px;
}

.crumbs__list li { display: flex; align-items: center; gap: 16px; }

.crumbs__list li + li::before { content: '/'; color: #BFBFBF; }

.crumbs__list a { color: #4A4A4A; }
.crumbs__list a:hover { color: var(--navy); text-decoration: underline; }

.entry__media {
  max-width: 800px;
  margin: 0 auto 34px;
}

.entry__img { width: 100%; border-radius: 4px; }

.entry__content {
  max-width: 800px;
  margin: 0 auto;
  font-size: 16px;
  line-height: 28px;
  color: #3C3C3C;
}

.entry__content p { margin: 0 0 18px; }

.entry__content h2 {
  margin: 38px 0 14px;
  color: var(--ink);
  font-family: var(--font-head);
  font-size: 26px;
  font-weight: 400;
  line-height: 1.3;
}

.entry__content h3 {
  margin: 30px 0 12px;
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 700;
}

/* The global reset turns list markers off; prose needs them back. */
.entry__content ul,
.entry__content ol {
  margin: 0 0 18px;
  padding-left: 24px;
}

.entry__content ul { list-style: disc; }
.entry__content ol { list-style: decimal; }

.entry__content li { margin: 0 0 9px; padding-left: 4px; }

.entry__content li::marker { color: var(--navy); }

.entry__content strong { color: var(--ink); }

.entry__content a { color: var(--blue); text-decoration: underline; }
.entry__content a:hover { text-decoration: none; }

@media (max-width: 820px) {
  .entry { padding: 26px 0 40px; }
  .entry__back { margin-bottom: 22px; }
  .entry__meta { flex-wrap: wrap; font-size: 14px; }
  .crumbs { margin-bottom: 26px; }
  .crumbs__list { font-size: 14px; }
}

.entry__actions { margin-top: 30px; }

/* Room before the dark assessment band that follows every inner page. */
.projects--archive { padding: 50px 0 90px; }

.intro--archive { padding-bottom: 90px; }

.projects__heading {
  margin: 0 0 30px;
  font-family: var(--font-head);
  font-size: 36px;
  font-weight: 400;
  text-align: center;
}

.project__title a { color: inherit; text-decoration: none; }
.project__title a:hover { color: var(--navy); }

/* ------------------------ CONTACT FORM 7 ------------------------- */
/* CF7 wraps every control in a span, which would break the layout. */
.wpcf7-form-control-wrap { display: block; }

/* Text-like controls fill their field; checkboxes and radios must not. */
.enquiry__form .wpcf7-form-control-wrap input:not([type="checkbox"]):not([type="radio"]),
.enquiry__form .wpcf7-form-control-wrap textarea,
.assess .wpcf7-form-control-wrap input:not([type="checkbox"]):not([type="radio"]),
.assess .wpcf7-form-control-wrap textarea { width: 100%; }

.field--phone .wpcf7-form-control-wrap { flex: 1; }

.wpcf7-not-valid-tip {
  display: block;
  margin-top: 5px;
  font-size: 13px;
  color: #C0392B;
}

.assess .wpcf7-not-valid-tip { color: #FF8A80; }

.wpcf7-response-output:empty { display: none; }

.wpcf7-response-output {
  margin: 16px 0 0 !important;
  padding: 12px 16px !important;
  font-size: 14px;
  border-radius: 8px;
  border-width: 1px !important;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output { border-color: #C0392B !important; }

.wpcf7 form.sent .wpcf7-response-output { border-color: #1a7f37 !important; }

.assess .wpcf7-response-output { color: #fff; }

.wpcf7-spinner { margin: 0 0 0 10px; }

/* the honeypot must never be visible or focusable */
.ah-hp { position: absolute !important; left: -9999px !important; }

/* --------------------------- RESPONSIVE -------------------------- */
@media (max-width: 1100px) {
  .header__toggle { display: flex; }

  .header { position: relative; }

  /*
   * A full slide-down panel rather than a short dropdown: it holds the menu,
   * the contact details and the social links, so it needs to scroll on short
   * screens without taking the page with it.
   */
  .header__nav {
    position: fixed;
    top: var(--ah-header-h, 92px);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    display: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 8px 24px 40px;
    background: #fff;
    border-top: 1px solid #EEE;
  }

  body.nav-open .header__nav { display: block; }

  /* Stop the page behind scrolling while the panel is open. */
  body.nav-open { overflow: hidden; }

  /* One item per row, divided, as in the design. */
  .header__menu { flex-direction: column; align-items: stretch; gap: 0; }

  .header__menu > li { border-bottom: 1px solid #EAEAEA; }

  .header__menu > li > a {
    display: block;
    padding: 18px 2px;
    font-size: 19px;
    font-weight: 400;
  }

  /* Items with children get a control to open them. */
  .header__menu .menu-item-has-children > a { padding-right: 62px; }

  .header__sub-toggle {
    display: flex;
    position: absolute;
    top: 12px;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: var(--ink);
    background: none;
    border: 1px solid #DCDCDC;
    border-radius: 8px;
    cursor: pointer;
    transition: transform .2s ease;
  }

  .header__menu > li { position: relative; }

  .header__menu .menu-item-has-children.is-open > .header__sub-toggle { transform: rotate(90deg); }

  /* Inline list here, not the floating card the desktop bar uses. */
  .header__menu .sub-menu {
    position: static;
    display: none;
    min-width: 0;
    margin: 0 0 14px;
    padding: 0 0 0 14px;
    list-style: none;
    background: none;
    border-radius: 0;
    box-shadow: none;
  }

  .header__menu .menu-item-has-children.is-open > .sub-menu { display: block; }

  .header__menu .sub-menu a {
    display: block;
    padding: 11px 2px;
    font-size: 16px;
    font-weight: 400;
    color: #4A4A4A;
    background: none;
  }

  .header__actions { width: 100%; margin: 0; justify-content: flex-end; }

  /* ---- the contact and social block below the menu ---- */
  .header__nav .navpanel { display: block; padding-top: 30px; }

  .navpanel__heading {
    margin: 0 0 18px;
    font-family: var(--font-body);
    font-size: 24px;
    font-weight: 700;
    color: var(--ink);
  }

  .navpanel__contact { margin: 0 0 34px; padding: 0; list-style: none; }

  .navpanel__contact li {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
    font-size: 16px;
    line-height: 24px;
    color: var(--ink);
  }

  .navpanel__contact a {
    display: flex;
    align-items: center;
    gap: 16px;
    color: inherit;
    text-decoration: none;
    word-break: break-word;
  }

  .navpanel__icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    color: var(--ink);
    border: 1px solid #DCDCDC;
    border-radius: 50%;
  }

  .navpanel__social { display: flex; flex-wrap: wrap; gap: 12px; color: var(--ink); }

  .navpanel__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    color: inherit;
    border: 1px solid #DCDCDC;
    border-radius: 50%;
  }

  .navpanel__social svg { width: 28px; height: 28px; }

  /*
   * The outline icons draw their own ring, which would sit inside the button's
   * border as a second circle. Hide just that ring and keep the glyph.
   */
  .navpanel__social svg > circle[r="14.75"] { display: none; }
}

/* The panel belongs to the mobile menu only. */
.navpanel { display: none; }

@media (max-width: 900px) {
  .sfooter__box { grid-template-columns: repeat(3, 1fr); }
  .sfooter__brand { grid-column: 1 / -1; }
  .blog__grid { grid-template-columns: repeat(2, 1fr); }
  .assess__options .wpcf7-checkbox { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .header__actions .header__phone { display: none; }

  .jobs--dark { padding: 44px 0 50px; margin-top: 44px; }
  .jobs__head { flex-direction: column; align-items: flex-start; }

  .cta { padding: 44px 0; }
  .cta__title { font-size: 26px; line-height: 34px; }

  .faq { padding: 44px 0; }
  .faq__title, .blog__title, .assess__title { font-size: 26px; line-height: 34px; }

  .blog { padding: 44px 0; }
  .blog__grid { grid-template-columns: 1fr; }

  .assess { padding: 44px 0 50px; }
  .assess__row { grid-template-columns: 1fr; gap: 0; }
  .assess__options .wpcf7-checkbox { grid-template-columns: 1fr; }

  .sfooter__box { grid-template-columns: 1fr; padding: 32px 24px; border-radius: 20px; }
  .sfooter__col { margin-top: 4px; }
  .sfooter__logo img { width: 200px; }
  .sfooter__bar { flex-direction: column; align-items: flex-start; }

  .entry { padding: 36px 0 44px; }
  .entry__title { font-size: 27px; line-height: 36px; }
}

/* ---- mobile header: logo and burger share the top row ---- */
@media (max-width: 560px) {
  body.is-site .header__inner {
    grid-template-columns: 1fr auto;
    justify-items: start;
    align-items: center;
  }

  body.is-site .header__logo   { grid-column: 1; order: 1; justify-self: start; }
  body.is-site .header__toggle { grid-column: 2; order: 1; margin-left: 0; }

  body.is-site .header__nav,
  body.is-site .header__actions { grid-column: 1 / -1; order: 3; }

  body.is-site .header__actions { justify-content: stretch; }
  body.is-site .header__actions .btn { width: 100%; justify-content: center; }
}

/* =================================================================
   HOME PAGE — vertical rhythm
   The original margins were tuned for the landing page's section
   order. The home page reorders them and adds four more, so it gets
   one consistent gap instead. Scoped to body.is-site so the landing
   page keeps its original spacing exactly.
   ================================================================= */
body.is-site {
  --section-gap: 90px;
}

body.is-site .intro      { padding-top: 64px; }
body.is-site .services,
body.is-site .projects,
body.is-site .healthy,
body.is-site .process,
body.is-site .suppliers  { margin-top: var(--section-gap); }

/* Full-width bands carry their own padding, so they need no margin. */
body.is-site .jobs--dark { margin-top: var(--section-gap); }
body.is-site .cta        { margin-top: 0; padding: 72px 0; }

/*
 * Testimonials and the FAQ share one continuous grey band, as in the
 * design — the cards turn white so they still read as cards.
 */
/* White from the gallery all the way down to the FAQ band. */
body.is-site .testimonials--grey {
  margin-top: 0;
  padding: 20px 0 80px;
  background: transparent;
}

body.is-site .faq { padding: 70px 0 80px; }

/* The dark band below supplies the gap, so the blog does not pad twice. */
/* The gap before the dark band lives here, not as a margin on the band —
   a margin would show the white page through between two coloured sections. */
body.is-site .blog { padding: 74px 0 var(--section-gap); }

/* The dark assessment band, and the footer that rides up over it. */
body.is-site .assess { margin-top: 0; }

/* Reserves the height the footer card overlaps into. */
body.has-assessment .assess { padding-bottom: 170px; }

@media (max-width: 1100px) {
  body.is-site { --section-gap: 70px; }
}

@media (max-width: 767px) {
  body.is-site { --section-gap: 50px; }

  body.is-site .intro { padding-top: 44px; }
  body.is-site .cta   { padding: 46px 0; }
  body.is-site .testimonials--grey { padding: 10px 0 50px; }
  body.is-site .faq   { padding: 46px 0 50px; }
  body.has-assessment .assess { padding-bottom: 130px; }

  body.has-assessment .sfooter { margin-top: -100px; }
  .sfooter__box { padding: 32px 24px 34px; }
  .sfooter__bar { padding: 18px 24px; }
  .sfooter__menu--split { columns: 1; }
}

/* The blue panel gets shallower as the tiles do. */
@media (max-width: 1100px) {
  .jobs--dark .jobs__grid::before { bottom: calc(100% - 84px); }
}

@media (max-width: 820px) {
  .jobs--dark .jobs__grid::before { bottom: calc(100% - 70px); }
}

@media (max-width: 767px) {
  .jobs--dark .jobs__grid::before { bottom: calc(100% - 60px); }
}

/* ------------------- PROCESS: background artwork ----------------- */
/*
 * A faint architectural sketch sitting behind the process panel. The PNG is
 * already about 10% opacity, so it needs no dimming here — it only needs to
 * sit behind the panel and be ignored by pointer and screen readers.
 */
.process--art {
  position: relative;
  isolation: isolate;
}

.process__art {
  position: absolute;
  left: 0;
  bottom: -348px;
  z-index: -1;
  width: 470px;
  max-width: 46%;
  height: auto;
  pointer-events: none;
  user-select: none;
}

.process--art .container { position: relative; }

@media (max-width: 1100px) {
  .process__art { width: 380px; bottom: -50px; }
}

@media (max-width: 820px) {
  .process__art { width: 300px; max-width: 62%; bottom: -30px; opacity: .75; }
}

@media (max-width: 560px) {
  .process__art { display: none; }
}

/* ---------------------- GALLERY: load more ----------------------- */
.jobs__more {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 30px;
}

.jobs__more[hidden] { display: none; }

.jobs__more-btn { cursor: pointer; }

.jobs__count {
  margin: 0;
  font-family: var(--font-body);
  font-size: 14px;
  color: #6B6B6B;
}

/*
 * No dark-band overrides here: the blue panel stops part-way through the
 * first row of photos, so the button and counter always sit on white.
 */

/* ------------------- ACCESSIBILITY: touch targets ---------------- */
/*
 * The header contact links were only as tall as their text — under the 24px
 * minimum tap target, and too close together once they stack on narrow
 * screens. Give them a real hit area without changing how they look.
 */
.header__email,
.header__phone {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
}

@media (max-width: 820px) {
  .header__contact { gap: 8px; }
}

/* The honeypot must be unreachable, not merely invisible. */
.hp,
.ah-hp {
  pointer-events: none;
}

/* ------------------ PROJECT PAGE: photo gallery ------------------ */
.jobs--project { margin-top: 20px; padding-bottom: 10px; }

.jobs--project .jobs__title {
  font-size: 34px;
  line-height: 44px;
  text-align: left;
}

.jobs--project .jobs__head { margin-bottom: 20px; }

/* Projects archive: the cards read as a grid of blocks. */
.projects--archive .projects__grid { row-gap: 46px; }

/* =================================================================
   SERVICE DETAIL PAGE
   ================================================================= */

/* ---------------------------- hero ------------------------------- */
/*
 * The navy band is sized by the heading and lead alone. The form card is
 * positioned out of flow so its height cannot stretch the band — it starts
 * inside the navy and hangs well below it onto the white, as in the design.
 */
:root { --shero-card: 400px; --shero-gap: 64px; }

.shero {
  position: relative;
  padding: 76px 0 82px;
  background: var(--navy);
}

.shero__inner { position: relative; }

.shero__content {
  /* Keep the text clear of the card that floats over the right. */
  max-width: calc(100% - var(--shero-card) - var(--shero-gap));
  color: #fff;
}

.shero__title {
  margin: 0;
  font-family: var(--font-head);
  font-size: 60px;
  line-height: 70px;
  font-weight: 400;
  color: #fff;
}

.shero__text {
  margin: 14px 0 0;
  max-width: 46ch;
  font-size: 20px;
  line-height: 30px;
  color: rgba(255, 255, 255, .9);
}

.shero__form {
  position: absolute;
  top: -22px;
  right: 0;
  z-index: 5;
  width: var(--shero-card);
  margin: 0;
}

/* --------------------------- intro ------------------------------- */
/*
 * The card overhangs the band, so the intro column stays narrow enough to sit
 * beside it rather than running underneath.
 */
.sintro {
  padding: 66px 0 0;
  /*
   * The card hangs about 410px below the navy band. Reserving that height
   * means a short intro cannot let the next section slide up underneath it —
   * measured, not guessed. A longer intro simply grows past it.
   */
  min-height: 440px;
}

.sintro__title,
.sintro__text,
.sintro__actions {
  max-width: calc(100% - var(--shero-card) - var(--shero-gap));
}

.sintro__title {
  margin: 0 0 14px;
  font-family: var(--font-head);
  font-size: 30px;
  line-height: 40px;
  font-weight: 400;
}

.sintro__text { font-size: 16px; line-height: 27px; color: #3C3C3C; }
.sintro__text p { margin: 0 0 14px; }
.sintro__text p:last-child { margin-bottom: 0; }

.sintro__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }

/* ------------------------ content blocks ------------------------- */
.sblocks { padding: 70px 0 10px; }

.sblock {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
  margin-bottom: 70px;
}

/* Even blocks put the image on the right by reordering, so the markup
   keeps a sensible reading order for screen readers either way. */
.sblock--flip .sblock__media { order: 2; }

/* Without an image there is no second column to fill. */
.sblock--noimg { grid-template-columns: 1fr; }
.sblock--noimg .sblock__body { max-width: 78ch; }

.sblock__media { position: relative; }

.sblock__media img {
  display: block;
  width: 100%;
  height: 500px;
  object-fit: cover;
  border-radius: 16px;
}

/*
 * The call to action sits over the bottom of the photo, on whichever side
 * faces the text — right when the image leads, left when it follows.
 */
.sblock__btn {
  position: absolute;
  right: 22px;
  bottom: 22px;
  z-index: 2;
}

.sblock--flip .sblock__btn { right: auto; left: 22px; }

.sblock__title {
  margin: 0;
  font-family: var(--font-head);
  font-size: 30px;
  line-height: 40px;
  font-weight: 400;
}

.sblock__sub {
  margin: 10px 0 16px;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
}

.sblock__text { margin: 0 0 16px; font-size: 15px; line-height: 25px; color: #3C3C3C; }

/* A real heading, not body text — it introduces the list beneath it. */
.sblock__list-title {
  margin: 22px 0 14px;
  font-family: var(--font-body);
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
  color: var(--ink);
}

.sblock__list { margin: 0 0 16px; padding: 0; list-style: none; }

.sblock__list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 9px;
  font-size: 15px;
  line-height: 24px;
  color: #3C3C3C;
}

.sblock__list .bullet { margin-top: 4px; }

.sblock__foot { margin: 16px 0 0; font-size: 15px; line-height: 24px; color: #3C3C3C; }

/* A service card with no image still fills its cell. */
.project__img--placeholder {
  display: block;
  width: 100%;
  height: 260px;
  background: var(--blue-soft);
  border-radius: 12px;
}

/* --------------------------- responsive -------------------------- */
@media (max-width: 1100px) {
  /* Card drops below the heading and the columns go full width. */
  .shero { padding: 54px 0 0; }
  .shero__content,
  .sintro__title,
  .sintro__text,
  .sintro__actions { max-width: 100%; }

  .shero__form {
    position: static;
    width: 100%;
    max-width: 560px;
    margin: 34px auto -90px;
  }

  .sintro { padding-top: 120px; min-height: 0; }
  .sblock { gap: 34px; margin-bottom: 56px; }
  .sblock__media img { height: 340px; }
}

@media (max-width: 820px) {
  .shero { padding-top: 34px; }
  .shero__title { font-size: 40px; line-height: 50px; }
  .shero__text { font-size: 17px; line-height: 27px; }
  .sblock { grid-template-columns: 1fr; }
  /* Stacked, the image always leads — so does its button. */
  .sblock--flip .sblock__media { order: 0; }
  .sblock--flip .sblock__btn { right: 14px; left: auto; }
  .sblock__media img { height: 260px; }
  .sintro__title, .sblock__title { font-size: 26px; line-height: 35px; }
}

@media (max-width: 560px) {
  .shero__title { font-size: 30px; line-height: 39px; }
  .sintro { padding-top: 110px; }
  .sblocks { padding-top: 46px; }
}

/* The overlaid button needs room on small photos and on narrow screens. */
@media (max-width: 820px) {
  /*
   * No left variant here: below this width the blocks stack and the image
   * always leads, so every button belongs on the right. Setting it left would
   * override the stacked rule above and make the flipped block the odd one out.
   */
  .sblock__btn { right: 14px; bottom: 14px; }
  .sblock__list-title { font-size: 21px; line-height: 29px; }
}

@media (max-width: 560px) {
  /* Too cramped to overlay — put it back under the text. */
  .sblock__btn,
  .sblock--flip .sblock__btn {
    position: static;
    margin-top: 16px;
    width: 100%;
    justify-content: center;
  }
  .sblock__list-title { font-size: 19px; line-height: 27px; }
}

/* =================================================================
   FINANCE OPTIONS PAGE
   ================================================================= */

/* ---------------------------- intro ------------------------------ */
.fintro__title {
  margin: 0 0 6px;
  font-family: var(--font-body);
  font-size: 26px;
  line-height: 34px;
  font-weight: 700;
  color: var(--ink);
  max-width: calc(100% - var(--shero-card) - var(--shero-gap));
}

.fintro__sub {
  margin: 0 0 18px;
  font-size: 15px;
  color: #4A4A4A;
  max-width: calc(100% - var(--shero-card) - var(--shero-gap));
}

/* ------------------------ "What Is It?" -------------------------- */
.fbanner { margin-top: 56px; }

.fbanner__box {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 540px;
  padding: 56px 64px;
  border-radius: 20px;
  overflow: hidden;
  background: var(--navy);
}

.fbanner__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/*
 * A neutral scrim, not a navy one: tinting the whole frame blue washed the
 * photo out. This darkens only the left, where the copy sits, and clears by
 * about 60% so the picture reads in its own colours.
 */
.fbanner__box::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg,
    rgba(18, 20, 26, .74) 0%,
    rgba(18, 20, 26, .58) 24%,
    rgba(18, 20, 26, .20) 46%,
    rgba(18, 20, 26, 0) 62%);
}

.fbanner__box--plain::after { background: none; }

.fbanner__panel { position: relative; z-index: 2; max-width: 430px; color: #fff; }

.fbanner__eyebrow {
  margin: 0 0 12px;
  font-family: var(--font-body);
  font-size: 22px;
  line-height: 30px;
  font-weight: 700;
  color: #fff;
}

.fbanner__text { margin: 0 0 36px; font-size: 14px; line-height: 22px; color: rgba(255,255,255,.9); }

.fbanner__headline {
  margin: 0;
  font-family: var(--font-head);
  font-size: 31px;
  line-height: 45px;
  color: #fff;
}

/* ---------------------- how does it work ------------------------- */
.fsteps { padding: 66px 0 0; }

.fsteps__title {
  margin: 0 0 40px;
  font-family: var(--font-head);
  font-size: 34px;
  line-height: 44px;
  font-weight: 400;
  text-align: center;
}

.fsteps__row {
  display: flex;
  align-items: flex-start;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fstep { flex: 1 1 0; min-width: 0; }

.fstep__img {
  display: block;
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 16px;
}

.fstep__img--placeholder { background: var(--blue-soft); }

.fstep__title {
  margin: 0 0 8px;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 23px;
  font-weight: 700;
  color: var(--ink);
}

.fstep__text { margin: 0; font-size: 14px; line-height: 22px; color: #4A4A4A; }

/* The dashed connector and its arrowhead, between steps. */
.fsteps__link {
  flex: 0 0 92px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  /* Top keeps it level with the middle of the 150px photos; the side padding
     stops the arrowhead butting up against the next photo. */
  padding: 75px 18px 0 10px;
  color: var(--navy);
}

.fsteps__dash {
  flex: 1;
  height: 0;
  border-top: 2px dashed var(--navy);
  opacity: .55;
}

.fsteps__chev { flex: none; }

/* The flow turns downward into the section below. */
.fsteps__down {
  display: flex;
  justify-content: center;
  margin-top: 34px;
  color: var(--navy);
}

/* ---------------------- interest-free term ----------------------- */
.fterm { padding: 40px 0 0; }

/*
 * Narrower than the container and centred: the design sets this block in from
 * both edges rather than letting the photo run half the page width.
 */
.fterm__box {
  display: grid;
  grid-template-columns: 530px minmax(0, 1fr);
  gap: 56px;
  align-items: center;
  max-width: 960px;
  margin-inline: auto;
}

.fterm__box--noimg { grid-template-columns: 1fr; }

.fterm__media img {
  width: 100%;
  height: 430px;
  object-fit: cover;
  border-radius: 16px;
}

.fterm__title {
  margin: 0 0 14px;
  font-family: var(--font-body);
  font-size: 26px;
  line-height: 35px;
  font-weight: 700;
}

.fterm__text { margin: 0; font-size: 15px; line-height: 25px; color: #4A4A4A; }

/* -------------------------- terms and fees ----------------------- */
.fterms { padding: 70px 0 96px; }

.fterms__title {
  margin: 0 0 46px;
  font-family: var(--font-head);
  font-size: 34px;
  line-height: 44px;
  font-weight: 400;
  text-align: center;
}

.fterms__box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 54px;
  align-items: center;
}

.fterms__box--noimg { grid-template-columns: 1fr; }

/*
 * Each heading hugs its own paragraph and takes its space from above, so the
 * two blocks read as pairs rather than four evenly spaced lumps.
 */
.fterms__heading {
  margin: 42px 0 14px;
  font-family: var(--font-body);
  font-size: 21px;
  line-height: 29px;
  font-weight: 700;
  color: var(--ink);
}

.fterms__heading:first-child { margin-top: 0; }

.fterms__text { margin: 0; font-size: 15px; line-height: 25px; color: #4A4A4A; }

.fterms__media img {
  width: 100%;
  height: 360px;
  object-fit: cover;
  border-radius: 16px;
}

/* ---------------------------- responsive ------------------------- */
@media (max-width: 1100px) {
  .fintro__title, .fintro__sub { max-width: 100%; }
  .fbanner__box { min-height: 420px; padding: 40px; }
  .fbanner__panel { max-width: 58%; }
  .fbanner__headline { font-size: 28px; line-height: 38px; }
  .fstep__img { height: 120px; }
  .fsteps__link { flex-basis: 62px; padding: 60px 12px 0 6px; }
  .fterm__box { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); max-width: 100%; }
}

@media (max-width: 900px) {
  /* Two per row, so the photos stay large enough to read. */
  .fsteps__row { flex-wrap: wrap; gap: 30px 0; }
  .fstep { flex: 0 0 calc(50% - 22px); }
  .fsteps__link { flex-basis: 52px; padding: 60px 10px 0 6px; }
  .fterm__box, .fterms__box { grid-template-columns: 1fr; gap: 28px; max-width: 620px; }
  .fterm__media { order: -1; }
  .fterm__media img, .fterms__media img { height: 280px; }
  .fterms { padding-bottom: 70px; }
}

@media (max-width: 640px) {
  /* Stacked: the dashed links would point nowhere, so they go. */
  .fsteps__row { flex-direction: column; gap: 26px; }
  .fstep { flex: 1 1 auto; width: 100%; }
  .fsteps__link { display: none; }
  .fstep__img { height: 190px; }
  .fbanner__box { min-height: 0; padding: 30px 24px; }
  .fbanner__panel { max-width: 100%; }
  /* Too narrow to keep the photo clear — darken the whole frame instead. */
  .fbanner__box::after { background: rgba(18, 20, 26, .62); }
  .fbanner__eyebrow { font-size: 19px; line-height: 26px; }
  .fbanner__headline { font-size: 24px; line-height: 33px; }
  .fsteps__title, .fterms__title { font-size: 26px; line-height: 35px; }
  .fterms { padding: 46px 0 56px; }
  .fterms__heading { margin-top: 32px; }
  .fterm__title { font-size: 22px; line-height: 30px; }
}

/* =================================================================
   GET A FREE QUOTE PAGE
   ================================================================= */

/* Without the form card the hero copy can use the full width. */
.shero--wide .shero__content { max-width: 72%; padding-bottom: 96px; }

/* ---------------------------- the form --------------------------- */
/*
 * The dark card rides up over the navy band, so the section is pulled up by
 * the same amount its card overlaps.
 */
/*
 * z-index because the hero is positioned: without it the navy band paints
 * over the top of this card and swallows the legend.
 */
.qform {
  position: relative;
  z-index: 2;
  margin-top: -90px;
}

/*
 * Inset from the container, as the design sets it.
 *
 * Body-scoped so it outweighs `body.is-site .assess`, whose tall bottom
 * padding exists for the full-width band on the home page — where the footer
 * card rides up over it — and would otherwise leave 170px of dead space
 * inside this card.
 */
body.is-site .qform__card {
  max-width: 1180px;
  margin-inline: auto;
  padding: 44px 48px 48px;
  background: #241F1F;
  color: #fff;
  border-radius: 20px;
}

/* It is a card here, not a full-width band. */
.qform .assess__form { max-width: 100%; margin: 0; }

.qform .assess__legend { margin-bottom: 18px; font-size: 17px; }

.qform .assess__options .wpcf7-checkbox { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.qform .field input,
.qform .field textarea { background: #fff; color: var(--ink); border-color: #fff; }

.qform .field input::placeholder,
.qform .field textarea::placeholder { color: #8A8A8A; }

.qform .field textarea { min-height: 120px; }

/* Pale pill, as in the design, rather than the navy used on the dark band. */
.qform .assess__submit {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--navy);
  background: var(--blue-soft);
}

.qform .assess__submit:hover { color: #fff; background: var(--navy); }

/* -------------------------- contact cards ------------------------ */
.qcards { padding: 46px 0 20px; }

.qcards__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  max-width: 1180px;
  margin-inline: auto;
}

.qcard {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 290px;
  padding: 46px 42px 50px;
  text-align: center;
  border-radius: 18px;
}

.qcard--phone { background: var(--blue-soft); }
.qcard--email { background: #EDEDED; }

.qcard__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 78px;
  height: 78px;
  margin-bottom: 26px;
  color: #fff;
  border-radius: 50%;
}

.qcard__icon svg { width: 34px; height: 34px; }

.qcard--phone .qcard__icon { background: var(--navy); }
.qcard--email .qcard__icon { background: #241F1F; }

.qcard__link {
  display: inline-block;
  margin-bottom: 22px;
  font-family: var(--font-head);
  font-size: 29px;
  line-height: 38px;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 7px;
}

.qcard--email .qcard__link { text-decoration: none; }
.qcard__link:hover { color: var(--navy); }

.qcard__text { margin: 0; max-width: 40ch; font-size: 15px; line-height: 25px; color: #3C3C3C; }

/* ---------------------------- responsive ------------------------- */
@media (max-width: 1100px) {
  .shero--wide .shero__content { max-width: 100%; padding-bottom: 80px; }
  body.is-site .qform__card { padding: 34px 30px 38px; }
}

@media (max-width: 767px) {
  .qform { margin-top: -70px; }
  body.is-site .qform__card { padding: 26px 20px 30px; border-radius: 16px; }
  .qform .assess__options .wpcf7-checkbox { grid-template-columns: 1fr; }
  .qcards__grid { grid-template-columns: 1fr; gap: 20px; }
  .qcard { min-height: 0; padding: 34px 24px 38px; }
  .qcard__icon { width: 64px; height: 64px; margin-bottom: 20px; }
  .qcard__icon svg { width: 28px; height: 28px; }
  .qcard__link { font-size: 24px; line-height: 32px; margin-bottom: 16px; }
  .qcards { padding: 34px 0 10px; }
}

/* ------------------- compact hero (listing pages) ---------------- */
/*
 * A shallower band for pages that lead straight into a grid, rather than the
 * tall hero a service or finance page opens with.
 */
.shero--compact { padding: 48px 0 52px; }

/*
 * The wide hero pads its content to clear the form card that overlaps it.
 * A compact hero has no card, so that padding would just be dead navy.
 */
.shero--compact .shero__content { padding-bottom: 0; }

.shero--compact .shero__title { font-size: 42px; line-height: 52px; }

.shero--compact .shero__text {
  margin-top: 12px;
  max-width: 62ch;
  font-size: 17px;
  line-height: 27px;
}

/* The hero supplies the heading, so the grid starts closer to it. */
body.is-site .projects--after-hero { margin-top: 0; padding-top: 56px; }

@media (max-width: 820px) {
  .shero--compact { padding: 34px 0 38px; }
  .shero--compact .shero__title { font-size: 30px; line-height: 40px; }
  .shero--compact .shero__text { font-size: 16px; line-height: 25px; }
  body.is-site .projects--after-hero { padding-top: 40px; }
}

/* =================================================================
   FAQs PAGE — questions grouped by service
   ================================================================= */
.faqpage { padding: 62px 0 20px; }

.faqgroup { margin-bottom: 46px; }
.faqgroup:last-child { margin-bottom: 0; }

.faqgroup__title {
  margin: 0 0 18px;
  font-family: var(--font-head);
  font-size: 28px;
  line-height: 37px;
  font-weight: 400;
  color: var(--ink);
}

.faqgroup__title a { color: inherit; text-decoration: none; }
.faqgroup__title a:hover { color: var(--navy); text-decoration: underline; text-underline-offset: 5px; }

.faqpage .faq__list { max-width: 100%; gap: 12px; }

/* ---- alternating rows: photo one side, questions the other ---- */
.faqrow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 54px;
  align-items: center;
  margin-bottom: 64px;
}

.faqrow:last-child { margin-bottom: 0; }

/* Reordering rather than reversing keeps the reading order intact. */
.faqrow--flip .faqrow__media { order: 2; }

.faqrow--noimg { grid-template-columns: 1fr; }

.faqrow__media img {
  width: 100%;
  height: 430px;
  object-fit: cover;
  border-radius: 16px;
}

/* The accordions sit on white here, so they need an outline to read. */

.faqpage .faq__item {
  background: #fff;
  border: 1px solid #E4E4E4;
}

.faqpage .faq__item[open] { border-color: var(--blue-soft); }

@media (max-width: 1100px) {
  .faqrow { gap: 34px; margin-bottom: 48px; }
  .faqrow__media img { height: 340px; }
}

@media (max-width: 900px) {
  /* Stacked, the photo always leads its questions. */
  .faqrow { grid-template-columns: 1fr; gap: 24px; }
  .faqrow--flip .faqrow__media { order: 0; }
  .faqrow__media img { height: 260px; }
}

@media (max-width: 767px) {
  .faqpage { padding: 40px 0 10px; }
  .faqgroup { margin-bottom: 34px; }
  .faqrow { margin-bottom: 38px; }
  .faqgroup__title { font-size: 23px; line-height: 31px; }
}

/* =================================================================
   LEGAL DOCUMENTS — terms, payment policy, privacy policy
   Long dense text, so it gets a narrow measure, clear clause
   numbering and enough leading to stay readable on a phone.
   ================================================================= */
.legal {
  padding: 70px 0 40px;
}

.legal__doc {
  max-width: 860px;
  margin: 0 auto;
  color: #3F3F3F;
  font-size: 16px;
  line-height: 1.75;
}

.legal__doc > :first-child { margin-top: 0; }

.legal__doc p { margin: 0 0 18px; }

.legal__doc h2,
.legal__doc h3 {
  margin: 42px 0 14px;
  color: var(--navy);
  font-family: var(--font-head);
  line-height: 1.3;
}

.legal__doc h2 { font-size: 26px; }
.legal__doc h3 { font-size: 20px; }

.legal__doc ol,
.legal__doc ul {
  margin: 0 0 18px;
  padding-left: 24px;
}

.legal__doc ul { list-style: disc; }
.legal__doc ol { list-style: decimal; }

.legal__doc li { margin: 0 0 10px; }

/*
 * Most clauses carry their own a) / b) label in the text, so those lists must
 * not add a second marker on top. The label hangs into the left margin, which
 * keeps wrapped lines aligned under the first word rather than under it.
 */
.legal__doc .legal__clauses {
  padding-left: 0;
  list-style: none;
}

.legal__doc .legal__clauses > li {
  padding-left: 30px;
  text-indent: -30px;
}

.legal__doc .legal__clauses > li > b:first-child {
  display: inline-block;
  min-width: 26px;
  text-indent: 0;
}

.legal__doc b,
.legal__doc strong { color: var(--navy); font-weight: 700; }

.legal__doc a { color: var(--blue); text-decoration: underline; }

.legal__doc a:hover { text-decoration: none; }

.legal__updated {
  max-width: 860px;
  margin: 34px auto 0;
  padding-top: 20px;
  border-top: 1px solid #E6E6E6;
  color: #6B6B6B;   /* 5.3:1 on white — #8A8A8A failed AA */
  font-size: 14px;
}

@media (max-width: 820px) {
  .legal { padding: 44px 0 30px; }
  .legal__doc { font-size: 15px; }
  .legal__doc h2 { font-size: 22px; }
  .legal__doc h3 { font-size: 18px; }
}

/* =================================================================
   PROMO BANNER — replaces the old supplier logo strip
   A photo with the offer set over it as live text, then a heading
   and a single outline button underneath.
   ================================================================= */
.promo {
  padding: 20px 0 10px;
}

.promo__banner {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  aspect-ratio: 1500 / 500;
}

/* Until a photo is set the band still has to look deliberate. */
.promo__banner--plain {
  background: linear-gradient(120deg, var(--navy) 0%, #17427e 100%);
}

.promo__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*
 * A scrim, so the wording stays legible whatever photo is loaded — light
 * plans on a pale bench would otherwise wash the text out completely.
 */
.promo__banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .3) 55%, rgba(0, 0, 0, .12) 100%);
}

.promo__overlay {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 6%;
  right: 6%;
  transform: translateY(-50%);
}

.promo__script {
  margin: 0 0 18px;
  color: #fff;
  font-family: var(--font-script);
  font-size: clamp(30px, 4.4vw, 64px);
  font-weight: 500;
  line-height: 1.25;
}

.promo__bar {
  display: inline-block;
  margin: 0;
  padding: 10px 26px;
  color: var(--ink);
  background: #fff;
  font-family: var(--font-body);
  font-size: clamp(17px, 2.4vw, 34px);
  font-weight: 700;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: .01em;
}

.promo__heading {
  margin: 46px 0 0;
  color: var(--ink);
  font-family: var(--font-head);
  font-size: clamp(26px, 3.4vw, 46px);
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
}

.promo__actions {
  margin-top: 26px;
}

@media (max-width: 820px) {
  .promo__banner { aspect-ratio: 4 / 3; }
  .promo__overlay { left: 24px; right: 24px; }
  .promo__banner::after {
    background: linear-gradient(180deg, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, .6) 100%);
  }
  .promo__heading { margin-top: 30px; }
}

/* Blog listing — the archive reuses the home page cards. */
.blog--archive { padding: 60px 0 20px; }

.blog--archive .blog__grid { margin-top: 0; }

.blog--archive .post__title { font-size: 22px; }

.blog__empty { padding: 40px 0; color: #5A5A5A; }

.blog--archive .pagination {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 46px;
}

.blog--archive .page-numbers {
  min-width: 42px;
  padding: 9px 14px;
  color: var(--navy);
  text-align: center;
  background: var(--grey);
  border-radius: 8px;
}

.blog--archive .page-numbers.current,
.blog--archive .page-numbers:hover { color: #fff; background: var(--navy); }