/* =========================================================
   CSR Scaffolding Services Ltd
   Built by WebHunted
   ========================================================= */

/* ---------- 1. Colours and sizes ----------
   Change a colour here and it changes everywhere. */
:root {
  --charcoal: #1a1a1a;
  --charcoal-soft: #242424;
  --line: #34506b;
  --blue: #4fa9de;
  --gold: #cdb972;
  --gold-dark: #b8a35c;
  --white: #f5f5f2;
  --grey: #a7adb2;

  --navy: #0e2438;
  --navy-soft: #163552;
  --navy-line: #2b4d6d;
  --panel: rgba(14, 36, 56, 0.88);
  --header-h: 72px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- 2. Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
}

body {
  background: var(--charcoal);
  color: var(--white);
  font-family: "Barlow", system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

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

/* ---------- 3. Headings ---------- */
h1,
h2,
h3 {
  font-family: "Barlow Condensed", "Barlow", sans-serif;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0.01em;
}

h1 {
  font-size: clamp(2.3rem, 5.5vw, 4.5rem);
  max-width: 18ch;
}

h2 {
  font-size: clamp(2rem, 4.5vw, 3rem);
  margin-bottom: 0.75rem;
}

h3 {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--gold);
}

/* ---------- 4. Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.6rem 1.5rem;
  border: 2px solid transparent;
  border-radius: 4px;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.btn-gold {
  background: var(--gold);
  color: var(--charcoal);
}

.btn-gold:hover {
  background: var(--white);
}

.btn-outline {
  background: transparent;
  border-color: var(--white);
  color: var(--white);
}

.btn-outline:hover {
  background: var(--white);
  color: var(--charcoal);
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

/* ---------- 5. Skip link (for keyboard users) ---------- */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  padding: 0.5rem 1rem;
  background: var(--gold);
  color: var(--charcoal);
}

.skip-link:focus {
  top: 1rem;
}

/* ---------- 6. Header ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 var(--gutter);
  transition: background-color 0.3s;
}

/* Goes solid once you scroll past the top (main.js adds the class) */
.site-header.is-scrolled {
  background: rgba(26, 26, 26, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
}

.brand img {
  width: 70px;
  height: auto;
}

.brand-name {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 1.75rem;
}

.main-nav a:not(.btn) {
  text-decoration: none;
  font-weight: 500;
  padding: 0.25rem 0;
  border-bottom: 2px solid transparent;
}

.main-nav a:not(.btn):hover {
  border-color: var(--gold);
}

.nav-call {
  min-height: 42px;
  font-size: 1.1rem;
}

.menu-toggle {
  display: none;
}

/* ---------- 7. Full-screen photos ---------- */
.backdrops {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--charcoal);
}

/* Darkens the bottom and left so text is always readable */
.backdrops::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(26, 26, 26, 0.92) 0%, rgba(26, 26, 26, 0.25) 55%, rgba(26, 26, 26, 0.45) 100%);
}

.backdrop {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s var(--ease);
}

.backdrop.is-active {
  opacity: 1;
}

.backdrop img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.backdrop-img {
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
  transform: scale(1.06);
  transition: transform 8s linear;
}

/* A very slow drift on the photo you're looking at */
.backdrop.is-active .backdrop-img {
  transform: scale(1);
}

/* The blurred copy only shows on phones (see section 12) */
.backdrop-blur {
  display: none;
  object-fit: cover;
  filter: blur(28px) brightness(0.5);
  transform: scale(1.2);
}

.backdrop figcaption {
  position: absolute;
  right: var(--gutter);
  bottom: 1.25rem;
  z-index: 2;
  font-size: 0.85rem;
  color: var(--grey);
}

/* ---------- 8. Scaffold pole page guide ---------- */
.pole {
  position: fixed;
  left: 2rem;
  top: 50%;
  z-index: 40;
  height: 50vh;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* The pole itself */
.pole::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -1.5rem;
  bottom: -1.5rem;
  width: 4px;
  transform: translateX(-50%);
  border-radius: 2px;
  background: var(--gold);
  opacity: 0.6;
}

/* The couplers */
.pole a {
  position: relative;
  display: block;
  width: 22px;
  height: 12px;
  border: 2px solid var(--gold);
  border-radius: 3px;
  background: var(--charcoal);
  transition: background-color 0.3s, transform 0.3s var(--ease);
}

.pole a.is-active {
  background: var(--gold);
  transform: scaleX(1.3);
}

.pole a span {
  position: absolute;
  left: 2.25rem;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  font-size: 0.9rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

.pole a:hover span,
.pole a:focus-visible span {
  opacity: 1;
}

/* ---------- 9. Sections ---------- */
.chapter {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: calc(var(--header-h) + 2rem) var(--gutter) 4rem calc(var(--gutter) + 4rem);
}

.chapter-right {
  justify-content: flex-end;
}

.panel {
  position: relative;
  max-width: 36rem;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border-radius: 4px;
  background: var(--panel);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.panel-small {
  max-width: 26rem;
}

.panel-wide {
  max-width: 48rem;
}

/* Services list goes into two columns on big screens */
@media (min-width: 1100px) {
  .panel-services {
    max-width: 52rem;
  }

  .service-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 2rem;
  }

  .service-list li:last-child {
    padding-bottom: 1rem;
  }
}

.panel-lead {
  color: var(--grey);
  margin-bottom: 1.5rem;
}

.panel-lead a {
  color: var(--white);
}

.panel p + h3,
.panel h2 + h3 {
  margin-top: 0.25rem;
  margin-bottom: 0.4rem;
}

/* ---------- 10. Hero ---------- */
.hero {
  align-items: flex-end;
  padding-bottom: 7rem;
}

.hero-content {
  max-width: 44rem;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
}

.hero-motto {
  color: var(--gold);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.35rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.hero-lead {
  max-width: 34rem;
  margin-top: 1.25rem;
  font-size: 1.2rem;
}

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%);
  font-size: 0.9rem;
  color: var(--grey);
  text-decoration: none;
}

.scroll-cue::after {
  content: "";
  display: block;
  width: 2px;
  height: 28px;
  margin: 0.5rem auto 0;
  background: var(--gold);
  animation: cue 1.8s var(--ease) infinite;
  transform-origin: top;
}

@keyframes cue {
  0% { transform: scaleY(0); }
  50% { transform: scaleY(1); }
  100% { transform: scaleY(1); opacity: 0; }
}

/* ---------- 11. Services and steps ---------- */
.service-list,
.steps {
  list-style: none;
}

.service-list li,
.steps li {
  padding: 1rem 0;
  border-top: 1px solid var(--line);
}

.service-list li:last-child,
.steps li:last-child {
  padding-bottom: 0;
}

.service-list h2,
.service-list h3 {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--gold);
  margin-bottom: 0.2rem;
}

.service-list p,
.steps p {
  color: var(--grey);
}

.steps {
  counter-reset: step;
  margin-top: 1rem;
}

.steps li {
  position: relative;
  padding-left: 3rem;
  counter-increment: step;
}

.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0.9rem;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border: 2px solid var(--blue);
  border-radius: 50%;
  color: var(--blue);
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
}

/* ---------- 11b. The story sections ---------- */

/* A plain dark "photo" for the trust section, a pause in the story */
.backdrop-plain {
  background: var(--charcoal);
}

/* The pain: big lines, no panel */
.chapter-statement {
  align-items: center;
}

.statement {
  max-width: 50rem;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.7);
}

.statement-line {
  font-family: "Barlow Condensed", sans-serif;
  font-size: clamp(2rem, 5vw, 3.75rem);
  font-weight: 700;
  line-height: 1.1;
}

.statement-hit {
  color: var(--gold);
  margin-top: 0.4em;
}

.statement-sub {
  max-width: 32rem;
  margin-top: 1.5rem;
  font-size: 1.2rem;
}

.big-text {
  font-size: 1.25rem;
  margin-bottom: 1.5rem;
}

.text-link {
  color: var(--gold);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid currentColor;
}

.text-link:hover {
  color: var(--white);
}

/* The proof: one bold word per photo */
.proof {
  position: relative;
  max-width: 34rem;
  margin-right: 1rem;
  padding: 1.75rem 1.75rem 1.5rem;
  border-radius: 4px;
  background: var(--panel);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.proof h2 {
  font-size: clamp(2.1rem, 4vw, 3.4rem);
  margin-bottom: 0.5rem;
}

.proof p {
  font-size: 1.15rem;
}

/* The trust: the aerial photo stays, dimmed right down, with big numbers over it */
.chapter-trust {
  justify-content: flex-start;
  background: linear-gradient(to bottom,
    rgba(26, 26, 26, 0) 0%,
    rgba(26, 26, 26, 0.85) 25%,
    rgba(26, 26, 26, 0.85) 75%,
    rgba(26, 26, 26, 0) 100%);
}

.trust {
  width: 100%;
  max-width: 78rem;
}

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-bottom: 3rem;
}

/* Each number sits on a gold "ledger", like a board on the scaffold */
.stat {
  padding-top: 1.25rem;
  border-top: 4px solid var(--gold);
}

.stat strong {
  display: block;
  font-family: "Barlow Condensed", sans-serif;
  font-size: clamp(3.5rem, 9vw, 10rem);
  font-weight: 700;
  line-height: 0.9;
  color: var(--gold);
}

.stat span {
  display: block;
  margin-top: 0.5rem;
  font-size: clamp(1rem, 1.4vw, 1.5rem);
  color: var(--white);
}

.trust h2 {
  max-width: 22ch;
  font-size: clamp(2rem, 3.5vw, 3.75rem);
}

.towns {
  margin-top: 1.5rem;
  font-size: clamp(1rem, 1.3vw, 1.35rem);
  color: var(--blue);
  font-weight: 500;
}

/* The difference: four promises */
.promises {
  list-style: none;
  margin: 1.25rem 0;
}

.promises li {
  padding: 0.85rem 0 0.85rem 1.75rem;
  border-top: 1px solid var(--line);
  position: relative;
  color: var(--grey);
  font-size: 1.1rem;
}

.promises li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.3rem;
  width: 0.8rem;
  height: 4px;
  background: var(--gold);
}

.promises strong {
  display: block;
  color: var(--white);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.45rem;
  font-weight: 600;
  line-height: 1.15;
}

.small-print {
  font-size: 0.95rem;
  color: var(--grey);
}

/* The trust: real reviews */
.reviews {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin: 1.5rem 0 2rem;
}

.review {
  position: relative;
  padding: 1.75rem 1.5rem 1.25rem;
  border-radius: 4px;
  background: var(--panel);
}

.review p {
  font-size: clamp(1.05rem, 1.2vw, 1.3rem);
  line-height: 1.5;
}

.review cite {
  display: block;
  margin-top: 0.75rem;
  font-style: normal;
  font-size: 0.9rem;
  color: var(--gold);
}

.trust-line {
  max-width: 48rem;
  color: var(--grey);
  font-size: clamp(1rem, 1.2vw, 1.25rem);
}

/* The one moment of motion: story sections rise in as you reach them */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}

.reveal.is-in {
  opacity: 1;
  transform: none;
}

.statement.reveal .statement-line,
.statement.reveal .statement-sub {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.statement.reveal.is-in .statement-line,
.statement.reveal.is-in .statement-sub {
  opacity: 1;
  transform: none;
}

.statement.reveal.is-in .statement-line:nth-child(2) { transition-delay: 0.5s; }
.statement.reveal.is-in .statement-line:nth-child(3) { transition-delay: 1.1s; }
.statement.reveal.is-in .statement-sub { transition-delay: 1.8s; }

/* Services page heading */
.panel-services h1 {
  font-size: clamp(2.4rem, 5vw, 3.5rem);
  margin-bottom: 0.75rem;
}

/* Privacy notice and other text pages */
.chapter-doc {
  align-items: flex-start;
}

.panel-doc {
  max-width: 46rem;
}

.panel-doc h1 {
  font-size: clamp(2.4rem, 5vw, 3.5rem);
  margin-bottom: 0.5rem;
}

.panel-doc h2 {
  font-size: 1.6rem;
  color: var(--gold);
  margin: 1.75rem 0 0.5rem;
}

.panel-doc p,
.doc-list {
  color: var(--grey);
  margin-bottom: 0.75rem;
}

.panel-doc a {
  color: var(--white);
}

.doc-list {
  padding-left: 1.25rem;
}

.doc-list li {
  margin-bottom: 0.35rem;
}

.form-note a {
  color: var(--white);
}

/* ---------- 12. Quote form ---------- */
.quote-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.25rem;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.field-full {
  grid-column: 1 / -1;
}

.field label,
.contact-pref legend {
  font-weight: 500;
  font-size: 0.95rem;
}

.quote-form input:not([type="radio"]),
.quote-form select,
.quote-form textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--navy-line);
  border-radius: 4px;
  background: var(--navy-soft);
  color: var(--white);
  font: inherit;
}

.quote-form textarea {
  resize: vertical;
}

.quote-form input:focus,
.quote-form select:focus,
.quote-form textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(79, 169, 222, 0.25);
}

.contact-pref {
  border: 0;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}

.contact-pref legend {
  width: 100%;
  margin-bottom: 0.35rem;
}

.contact-pref label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
}

.contact-pref input {
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--gold);
}

.form-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: 0.5rem;
}

.form-note {
  font-size: 0.9rem;
  color: var(--grey);
}

.form-status:empty {
  display: none;
}

.form-status {
  padding: 0.75rem 1rem;
  border-left: 3px solid var(--blue);
  background: var(--navy-soft);
}

.form-status.is-error {
  border-color: #e0685f;
}

/* Hidden trap for spam bots */
.botcheck {
  display: none;
}

/* ---------- 13. Footer ---------- */
.site-footer {
  position: relative;
  background: var(--charcoal);
  border-top: 4px solid var(--gold);
  padding: 3.5rem var(--gutter) 2rem;
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 2.5rem 4rem;
  max-width: 70rem;
  margin: 0 auto;
}

.footer-logo {
  width: 220px;
  height: auto;
}

.footer-col h2 {
  font-size: 1.4rem;
  color: var(--gold);
  margin-bottom: 0.5rem;
}

.footer-col p {
  margin-bottom: 0.3rem;
}

.footer-col a {
  text-decoration: none;
}

.footer-col a:hover {
  color: var(--gold);
}

.footer-small {
  max-width: 70rem;
  margin: 2.5rem auto 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-size: 0.85rem;
  color: var(--grey);
}

/* ---------- 13b. Big monitors ----------
   Scales the whole site up so it doesn't look lost on wide screens. */
@media (min-width: 1800px) {
  html {
    font-size: 20px;
  }
}

@media (min-width: 2400px) {
  html {
    font-size: 24px;
  }
}

/* ---------- 14. Tablets and smaller laptops ---------- */
@media (max-width: 1000px) {
  .pole {
    display: none;
  }

  .chapter {
    padding-left: var(--gutter);
  }
}

/* ---------- 15. Phones ---------- */
@media (max-width: 820px) {
  .brand-name {
    display: none;
  }

  .menu-toggle {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 44px;
    padding: 0 0.25rem;
    border: 0;
    background: none;
    color: var(--white);
    font: 600 1.1rem "Barlow Condensed", sans-serif;
    cursor: pointer;
    z-index: 60;
  }

  .menu-toggle-bars,
  .menu-toggle-bars::before,
  .menu-toggle-bars::after {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--gold);
    transition: transform 0.3s var(--ease), background-color 0.3s;
  }

  .menu-toggle-bars {
    position: relative;
  }

  .menu-toggle-bars::before,
  .menu-toggle-bars::after {
    content: "";
    position: absolute;
    left: 0;
  }

  .menu-toggle-bars::before { top: -7px; }
  .menu-toggle-bars::after { top: 7px; }

  .menu-open .menu-toggle-bars { background: transparent; }
  .menu-open .menu-toggle-bars::before { transform: translateY(7px) rotate(45deg); }
  .menu-open .menu-toggle-bars::after { transform: translateY(-7px) rotate(-45deg); }

  /* Full-screen menu */
  .main-nav {
    position: fixed;
    inset: 0;
    z-index: 55;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 1.25rem;
    padding: var(--header-h) var(--gutter) 2rem;
    background: var(--charcoal);
    border-left: 4px solid var(--gold);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
  }

  .menu-open .main-nav {
    opacity: 1;
    visibility: visible;
  }

  .main-nav a:not(.btn) {
    font-family: "Barlow Condensed", sans-serif;
    font-size: 2.4rem;
    font-weight: 700;
  }

  .nav-call {
    margin-top: 1rem;
  }

  .menu-open {
    overflow: hidden;
  }

  /* Sections sit lower so you see the photo above the text */
  .chapter,
  .chapter-right {
    align-items: flex-end;
    justify-content: flex-start;
    padding-bottom: 3rem;
  }

  .hero {
    padding-bottom: 2.5rem;
  }

  .hero-lead {
    font-size: 1.05rem;
  }

  .scroll-cue {
    display: none;
  }

  .quote-form {
    grid-template-columns: 1fr;
  }

  .chapter-trust {
    align-items: center;
  }

  .reviews {
    grid-template-columns: 1fr;
  }

  .stats {
    gap: 1.25rem;
  }

  .button-row .btn {
    flex: 1 1 100%;
  }
}

/* ---------- 15b. Extra-wide screens ----------
   On very wide monitors, filling the screen would cut off the top and
   bottom of every photo. Instead the whole photo shows, full height,
   over on the right, with a blurred copy of itself filling the rest.
   The words all sit on the left over the blur, so nothing covers
   the photo. All the photos are 4:3, so the sharp photo is 133.33vh
   wide, and the soft fade at its edges is worked out from that. */
@media (min-aspect-ratio: 17/10) {
  .backdrop-img {
    object-fit: contain;
    object-position: 80% 50%;
    -webkit-mask-image: linear-gradient(90deg,
      transparent calc(80vw - 106.67vh),
      #000 calc(80vw - 90vh),
      #000 calc(80vw + 16vh),
      transparent calc(80vw + 26.67vh));
    mask-image: linear-gradient(90deg,
      transparent calc(80vw - 106.67vh),
      #000 calc(80vw - 90vh),
      #000 calc(80vw + 16vh),
      transparent calc(80vw + 26.67vh));
  }

  .backdrop-blur {
    display: block;
  }

  .chapter-right {
    justify-content: flex-start;
  }
}

/* ---------- 16. Upright screens (phones held normally) ----------
   Photos fill the whole screen. Each photo has its own --pos-m
   (set in the HTML) so the scaffold stays in view when the sides
   are trimmed to fit a tall screen. */
@media (orientation: portrait) {
  .backdrop-img {
    object-position: var(--pos-m, 50% 50%);
  }

  .backdrops::after {
    background: linear-gradient(to top,
      rgba(26, 26, 26, 0.95) 0%,
      rgba(26, 26, 26, 0.6) 40%,
      rgba(26, 26, 26, 0.1) 70%,
      rgba(26, 26, 26, 0.4) 100%);
  }

  .backdrop figcaption {
    display: none;
  }
}

/* ---------- 17. Reduced motion ----------
   Respects people who've turned off animations on their device. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    animation: none !important;
  }

  .reveal,
  .statement.reveal .statement-line,
  .statement.reveal .statement-sub {
    opacity: 1;
    transform: none;
  }
}

/* ---------- 18. Staff area ---------- */
.staff-chapter {
  align-items: flex-start;
}

/* The "Show this job on the website" tick box */
.checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 500;
  cursor: pointer;
}

.quote-form .checkbox-label input {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  min-height: 0;
  padding: 0;
  accent-color: var(--gold);
}

/* The "Choose files" box */
.quote-form input[type="file"] {
  padding: 0.6rem;
  cursor: pointer;
}

.quote-form input[type="file"]::file-selector-button {
  margin-right: 1rem;
  padding: 0.5rem 1.1rem;
  border: 0;
  border-radius: 4px;
  background: var(--gold);
  color: var(--charcoal);
  font: 600 1.05rem "Barlow Condensed", sans-serif;
  cursor: pointer;
}

/* Thumbnails of the photos chosen */
.photo-previews {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 0.6rem;
}

.photo-previews:empty {
  display: none;
}

.photo-previews img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 2px solid transparent;
  border-radius: 4px;
}

.photo-previews img.is-main {
  border-color: var(--gold);
}

/* The "Your jobs" list */
.job-list {
  display: grid;
  gap: 0.75rem;
  margin-top: 1rem;
}

.job-row {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem;
  border-left: 3px solid var(--gold);
  border-radius: 4px;
  background: var(--navy-soft);
}

.job-row.is-hidden {
  opacity: 0.55;
  border-left-color: var(--grey);
}

.job-row img {
  width: 96px;
  height: 72px;
  object-fit: cover;
  border-radius: 3px;
}

.job-text h3 {
  font-size: 1.3rem;
  margin-bottom: 0.1rem;
}

.job-text p {
  font-size: 0.9rem;
  color: var(--grey);
}

.job-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.job-actions .btn {
  min-height: 40px;
  padding: 0.35rem 1rem;
  font-size: 1rem;
}

.btn-danger {
  border-color: #e0685f;
  color: #f0a39d;
}

.btn-danger:hover {
  background: #e0685f;
  color: var(--white);
}

@media (max-width: 640px) {
  .job-row {
    grid-template-columns: 72px 1fr;
  }

  .job-row img {
    width: 72px;
    height: 54px;
  }

  .job-actions {
    grid-column: 1 / -1;
  }
}

/* ---------- 19. Our work page ---------- */
.work-page {
  max-width: 90rem;
  margin: 0 auto;
  padding: calc(var(--header-h) + 2.5rem) var(--gutter) 4rem;
}

.work-intro {
  max-width: 44rem;
  margin-bottom: 2.5rem;
}

.work-intro h1 {
  font-size: clamp(2.6rem, 5vw, 4rem);
  margin-bottom: 0.5rem;
}

.work-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
  gap: 1.25rem;
}

.work-message {
  grid-column: 1 / -1;
  padding: 1.5rem;
  background: var(--panel);
}

.work-cta {
  margin-top: 3rem;
}

/* One project card */
.work-card {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 4px;
  background: var(--navy);
  color: var(--white);
  text-align: left;
  cursor: pointer;
}

.work-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.001);
  transition: transform 1.4s var(--ease), filter 0.8s var(--ease);
}

/* Darkening from the bottom so the words are readable */
.work-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(14, 36, 56, 0.95) 0%, rgba(14, 36, 56, 0.35) 45%, rgba(14, 36, 56, 0) 70%);
  opacity: 0.55;
  transition: opacity 0.6s var(--ease);
}

/* The gold line that draws up the left edge */
.work-card::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  width: 4px;
  height: 100%;
  background: var(--gold);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.7s var(--ease);
}

.work-card-info {
  position: absolute;
  left: 1.5rem;
  right: 1.5rem;
  bottom: 1.25rem;
  z-index: 2;
  display: flex;
  flex-direction: column;
  transform: translateY(2.2rem);
  transition: transform 0.6s var(--ease);
}

.work-card-title {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.1;
}

.work-card-town {
  color: var(--gold);
  font-weight: 500;
}

.work-card-view {
  margin-top: 0.6rem;
  font-size: 0.9rem;
  opacity: 0;
  transition: opacity 0.5s var(--ease);
}

/* Hover (and keyboard focus) brings it all to life */
.work-card:hover img,
.work-card:focus-visible img {
  transform: scale(1.08);
}

.work-card:hover::after,
.work-card:focus-visible::after {
  opacity: 1;
}

.work-card:hover::before,
.work-card:focus-visible::before {
  transform: scaleY(1);
}

.work-card:hover .work-card-info,
.work-card:focus-visible .work-card-info {
  transform: translateY(0);
}

.work-card:hover .work-card-view,
.work-card:focus-visible .work-card-view {
  opacity: 1;
  transition-delay: 0.15s;
}

/* Phones have no hover, so everything shows all the time */
@media (hover: none) {
  .work-card::after { opacity: 1; }
  .work-card::before { transform: scaleY(1); }
  .work-card-info { transform: none; }
  .work-card-view { opacity: 1; }
}

/* ---------- 20. Full-screen project viewer ---------- */
.viewer {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: #0a1420;
  color: var(--white);
}

.viewer::backdrop {
  background: rgba(0, 0, 0, 0.6);
}

.viewer[open] {
  display: grid;
  grid-template-rows: 1fr auto;
}

.viewer-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 3;
  min-height: 44px;
  padding: 0 1.25rem;
  border: 2px solid var(--white);
  border-radius: 4px;
  background: transparent;
  color: var(--white);
  font: 600 1.1rem "Barlow Condensed", sans-serif;
  cursor: pointer;
}

.viewer-close:hover {
  background: var(--white);
  color: var(--charcoal);
}

.viewer-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 4.5rem 4rem 1rem;
}

.viewer-stage img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 4px;
}

.viewer-arrow {
  position: absolute;
  top: 50%;
  width: 3rem;
  height: 3rem;
  transform: translateY(-50%);
  border: 2px solid var(--gold);
  border-radius: 50%;
  background: rgba(14, 36, 56, 0.8);
  color: var(--gold);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
}

.viewer-arrow:hover {
  background: var(--gold);
  color: var(--charcoal);
}

.viewer-prev { left: 1rem; }
.viewer-next { right: 1rem; }

.viewer-info {
  max-width: 50rem;
  padding: 0 var(--gutter) 2rem;
}

.viewer-count {
  font-size: 0.9rem;
  color: var(--grey);
}

.viewer-info h2 {
  margin: 0.25rem 0 0.1rem;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
}

.viewer-town {
  color: var(--gold);
  font-weight: 500;
  margin-bottom: 0.5rem;
}

.viewer-desc {
  color: var(--grey);
}

@media (max-width: 640px) {
  .viewer-stage {
    padding: 4.5rem 0.75rem 1rem;
  }

  /* On phones the arrows sit over the photo itself, halfway down
     each side. The stage has 4.5rem of space above the photo and
     1rem below, so halfway down the photo is 1.75rem below the
     middle of the stage. */
  .viewer-arrow {
    top: calc(50% + 1.75rem);
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.6rem;
    background: rgba(14, 36, 56, 0.75);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }

  .viewer-prev { left: 1.35rem; }
  .viewer-next { right: 1.35rem; }
}

/* ---------- 21. Info cards (services and pull testing) ----------
   Each point sits in its own card. They rise in one after another
   as you scroll, and on a computer each lifts with a gold line
   drawing across the top when you hover over it. */
.page-stack {
  display: grid;
  gap: 1.25rem;
  width: 100%;
  max-width: 62rem;
}

.page-intro {
  max-width: 44rem;
}

.page-intro h1 {
  font-size: clamp(2.4rem, 5vw, 3.5rem);
  margin-bottom: 0.75rem;
}

.page-intro .panel-lead {
  margin-bottom: 0;
}

.card-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: 1.25rem;
}

/* The cards arrive one after another */
.card-grid > .reveal {
  transition-delay: calc(var(--i, 0) * 0.12s);
}

.info-card {
  position: relative;
  height: 100%;
  padding: 1.75rem 1.75rem 1.5rem;
  overflow: hidden;
  border-radius: 4px;
  background: var(--panel);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), background-color 0.5s var(--ease);
}

/* A short gold line along the top, which runs the full width on hover */
.info-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--gold);
  transform: scaleX(0.2);
  transform-origin: left;
  transition: transform 0.7s var(--ease);
}

.info-card h2 {
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--gold);
  margin-bottom: 0.4rem;
}

.info-card p {
  color: var(--grey);
}

.info-card a {
  color: var(--gold);
}

@media (hover: hover) {
  .info-card:hover {
    transform: translateY(-6px);
    background: rgba(22, 53, 82, 0.94);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  }

  .info-card:hover::before {
    transform: scaleX(1);
  }
}

/* ---------- 22. One look for every box on the site ----------
   Every navy box carries a short gold line along its top edge.
   On a computer, hovering draws the line right across; the
   smaller cards also lift slightly. */
.panel::before,
.proof::before,
.review::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  border-radius: 4px 4px 0 0;
  background: var(--gold);
  transform: scaleX(0.2);
  transform-origin: left;
  transition: transform 0.7s var(--ease);
}

.review::before {
  background: var(--blue);
}

.review {
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), background-color 0.5s var(--ease);
}

.proof {
  transition: opacity 0.9s var(--ease), transform 0.5s var(--ease), box-shadow 0.5s var(--ease), background-color 0.5s var(--ease);
}

.info-card h3 {
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--gold);
  margin-bottom: 0.4rem;
}

.card-grid-single {
  grid-template-columns: 1fr;
  max-width: 46rem;
}

.doc-card h2 {
  font-size: 1.6rem;
}

.doc-card p,
.doc-card .doc-list {
  margin-bottom: 0.75rem;
}

.doc-card p:last-child {
  margin-bottom: 0;
}

.doc-card a {
  color: var(--white);
}

.chapter-doc .page-stack {
  max-width: 46rem;
}

@media (hover: hover) {
  .panel:hover::before,
  .proof:hover::before,
  .review:hover::before {
    transform: scaleX(1);
  }

  .proof:hover,
  .review:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
    background: rgba(22, 53, 82, 0.94);
  }
}

/* ---------- 23. Small gold labels above headings ---------- */
.eyebrow {
  margin-bottom: 0.5rem;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--gold);
}

.proof .eyebrow,
.trust .eyebrow {
  text-shadow: none;
}

/* ---------- 24. Closing statement before the footer ---------- */
.closing-band {
  position: relative;
  padding: clamp(4rem, 10vw, 7rem) var(--gutter);
  background: var(--navy);
  text-align: center;
}

.closing-band::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 6rem;
  height: 3px;
  transform: translateX(-50%);
  background: var(--gold);
}

.closing-inner {
  max-width: 52rem;
  margin: 0 auto;
}

.closing-band h2 {
  font-size: clamp(2.2rem, 5vw, 4rem);
  margin-bottom: 0.75rem;
}

.closing-band p {
  color: var(--grey);
  font-size: 1.15rem;
}

.closing-band .button-row {
  justify-content: center;
}

/* ---------- 25. Tap animation on phones ----------
   Phones can't hover, so tapping a box plays the same effect:
   the gold line draws across and the card lifts. Tapping it
   again, or tapping another box, puts it back. */
.panel,
.proof,
.review,
.info-card {
  -webkit-tap-highlight-color: transparent;
}

@media (hover: none) {
  .panel.is-tapped::before,
  .proof.is-tapped::before,
  .review.is-tapped::before,
  .info-card.is-tapped::before {
    transform: scaleX(1);
  }

  .proof.is-tapped,
  .review.is-tapped,
  .info-card.is-tapped {
    transform: translateY(-6px);
    background: rgba(22, 53, 82, 0.94);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  }
}

/* ---------- 26. Questions (FAQ) ----------
   Each question opens and closes when tapped or clicked. */
.faq-list {
  display: grid;
  gap: 0.75rem;
  max-width: 52rem;
}

.faq-item {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  background: var(--panel);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background-color 0.4s var(--ease);
}

.faq-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--gold);
  transform: scaleX(0.12);
  transform-origin: left;
  transition: transform 0.7s var(--ease);
}

.faq-item[open] {
  background: rgba(22, 53, 82, 0.94);
}

.faq-item[open]::before {
  transform: scaleX(1);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  list-style: none;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

/* The gold plus that turns into a cross when open */
.faq-item summary::after {
  content: "+";
  flex: none;
  color: var(--gold);
  font-size: 2rem;
  font-weight: 400;
  line-height: 1;
  transition: transform 0.4s var(--ease);
}

.faq-item[open] summary::after {
  transform: rotate(45deg);
}

.faq-answer {
  padding: 0 1.5rem 1.4rem;
  color: var(--grey);
  font-size: 1.1rem;
}

.faq-item[open] .faq-answer {
  animation: faq-in 0.5s var(--ease);
}

@keyframes faq-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}

@media (hover: hover) {
  .faq-item:hover::before {
    transform: scaleX(1);
  }
}

.page-intro .big-text:last-child {
  margin-bottom: 0;
}

/* ---------- 27. Choosing the main photo ---------- */
.preview-item {
  position: relative;
}

.preview-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 1.6rem;
  height: 1.6rem;
  border: 0;
  border-radius: 50%;
  background: rgba(14, 36, 56, 0.85);
  color: var(--white);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.preview-remove:hover {
  background: #e0685f;
}

.preview-button {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.preview-button:hover img:not(.is-main) {
  border-color: var(--white);
}

.preview-badge {
  position: absolute;
  left: 4px;
  bottom: 4px;
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
  background: var(--gold);
  color: var(--charcoal);
  font-size: 0.75rem;
  font-weight: 600;
}

/* ---------- 28. Logo watermark behind the project viewer ----------
   Small white logos, faded right down and set at a slight angle,
   repeat across the whole screen like branded paper, so they show
   around the photo on every size of screen. */
.viewer {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

.viewer[open] {
  grid-template-rows: minmax(0, 1fr) auto;
}

.viewer::before {
  content: "";
  position: fixed;
  inset: -50%;
  background: url("../images/watermark.png") 0 0 / 360px auto repeat;
  opacity: 0.07;
  transform: rotate(-12deg);
  pointer-events: none;
}

.viewer-stage,
.viewer-info,
.viewer-close {
  position: relative;
  z-index: 1;
}

/* Keep the Close button above the photo area so it can be clicked */
.viewer-close {
  position: absolute;
  z-index: 3;
}

/* A long description scrolls inside its own space, never the page */
.viewer-info {
  max-height: 38vh;
  max-height: 38dvh;
  overflow-y: auto;
}

/* Stop the page behind from scrolling while a project is open */
body:has(.viewer[open]) {
  overflow: hidden;
}

/* ---------- 29. Back to home link on inner pages ---------- */
.back-link {
  margin-bottom: 1.25rem;
  font-size: 1rem;
}