/* Corrib Removals & Storage — single stylesheet.
   No build step, no framework. Brand greens carried over from the old site. */

:root {
  --green-900: #1c412c;
  --green-800: #26523a;
  --green-700: #356b4b;
  --green-600: #43805b;
  --green-100: #e9f3ed;
  --green-050: #f4f9f6;
  --red: #b3122b;
  --ink: #171d19;
  --charcoal: #222625;
  --accent: #83c99f; /* the old site's light green */
  --muted: #56635d;
  --line: #dde6e0;
  --white: #fff;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(23, 29, 25, 0.06), 0 8px 24px rgba(23, 29, 25, 0.07);
  --wrap: 1120px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
}

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

html {
  scroll-behavior: smooth;
  /* The sticky nav is about 59px tall: keep anchor and skip-link targets clear of it. */
  scroll-padding-top: 4.5rem;
}

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

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--white);
  -webkit-text-size-adjust: 100%;
  /* Enlarged text on a narrow screen: let an unbreakable string (the footer email address, a long word) break
     rather than push the page wider than the screen. Only takes effect when it would otherwise overflow. */
  overflow-wrap: anywhere;
}

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

a {
  color: var(--green-700);
  text-underline-offset: 2px;
}

a:hover {
  color: var(--green-900);
}

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

/* ---------- layout ---------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--white);
  color: var(--ink);
  padding: 0.75rem 1rem;
  z-index: 100;
  font-weight: 700;
}

.skip:focus {
  left: 1rem;
  top: 1rem;
}

/* ---------- header ---------- */

.site-header {
  background: var(--green-700);
  color: var(--white);
}

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 0.9rem;
  flex-wrap: wrap;
}

.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

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

.masthead-actions {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}

/* On large screens the wrapper disappears and the buttons sit in the row as before. */
.masthead-cta {
  display: contents;
}

.header-phone {
  color: var(--white);
  text-decoration: none;
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.header-phone:hover {
  color: var(--white);
  text-decoration: underline;
}

.header-phone span {
  display: block;
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.8;
}

/* Phones: logo and phone number on one row, then the two buttons as an equal-width pair (it used to be a
   phone number and one button with the second button orphaned underneath: 202px tall, 247px at 320px).
   Built to survive enlarged text: the first row wraps (the phone number drops under the logo only if there is
   no room), the button tracks are minmax(0, 1fr) and their labels may wrap, so nothing forces a horizontal
   scroll at 150-250% text. */
@media (max-width: 600px) {
  .masthead {
    gap: 0.75rem 1rem;
    padding-block: 0.8rem;
  }

  /* The logo must shrink with its column, or at 320px it runs under the phone number. */
  .brand {
    display: block;
    flex: 1 1 110px;
    min-width: 0;
  }

  .brand img {
    width: min(190px, 100%);
  }

  .masthead-actions {
    display: contents;
  }

  .header-phone {
    flex: 0 0 auto;
    margin-left: auto;
    font-size: 1.1rem;
    line-height: 1.25;
    text-align: right;
  }

  .masthead-cta {
    flex: 1 1 100%;
    display: grid;
    /* Two equal columns at normal text size; the rem-based minimum makes them stack into one column once
       text is enlarged, instead of squeezing a long word like "payment" out of its button. */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 7.5rem), 1fr));
    gap: 0.6rem;
  }

  .masthead-cta .btn {
    min-height: 46px;
    padding: 0.6rem 0.4rem;
    font-size: 0.95rem;
    line-height: 1.2;
    text-align: center;
  }
}

@media (max-width: 359px) {
  .masthead-cta .btn {
    font-size: 0.88rem;
  }
}

/* ---------- buttons ---------- */

.btn {
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.8rem 1.4rem;
  border-radius: 6px;
  border: 2px solid transparent;
  font: inherit;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn-primary {
  background: var(--green-600);
  color: var(--white);
}

.btn-primary:hover {
  background: var(--green-800);
  color: var(--white);
}

.btn-light {
  background: var(--white);
  color: var(--green-800);
}

.btn-light:hover {
  background: var(--green-100);
  color: var(--green-900);
}

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

.btn-outline:hover {
  background: rgba(255, 255, 255, 0.14);
  color: var(--white);
}

.btn-lg {
  padding: 1rem 1.75rem;
  font-size: 1.0625rem;
}

/* ---------- navigation ---------- */

/* The nav sits outside the header so it can stick on its own while the logo
   band scrolls away, as on the old site. Pure CSS: position: sticky. */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--accent);
  border-bottom: 1px solid rgba(28, 65, 44, 0.25);
  box-shadow: 0 2px 10px rgba(23, 29, 25, 0.12);
}

.site-nav .nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.35rem;
  margin: 0;
  padding: 0.55rem 0;
  list-style: none;
}

.site-nav a {
  display: block;
  padding: 0.45rem 0;
  color: var(--green-900);
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

.site-nav a:hover {
  border-bottom-color: var(--green-900);
  color: var(--green-900);
}

.site-nav a[aria-current] {
  border-bottom-color: var(--green-900);
}

/* Moving drop-down: opens on hover and on keyboard focus. */
.has-sub {
  position: relative;
}

.has-sub > a::after {
  content: "";
  display: inline-block;
  margin-left: 0.4em;
  border: 4px solid transparent;
  border-top-color: currentColor;
  border-bottom-width: 0;
  vertical-align: middle;
}

.sub {
  position: absolute;
  top: 100%;
  left: -0.9rem;
  min-width: 13rem;
  margin: 0;
  padding: 0.4rem 0;
  list-style: none;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  visibility: hidden;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

.has-sub:hover > .sub,
.has-sub:focus-within > .sub {
  visibility: visible;
  opacity: 1;
  transform: none;
}

/* Escape (see site.js) hides it even while still hovered or focused: WCAG 1.4.13. */
.has-sub.is-dismissed > .sub {
  visibility: hidden;
  opacity: 0;
  transform: translateY(-4px);
}

.sub a {
  padding: 0.55rem 1rem;
  border-bottom: 0;
}

.sub a:hover,
.sub a[aria-current] {
  background: var(--green-100);
}

/* On narrow screens the row scrolls sideways (one compact line, every link
   reachable, no JavaScript). The drop-down would be clipped there, so the
   Moving pages are shown inline instead. */
@media (max-width: 1020px), (hover: none) {
  .site-nav .nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 1.15rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .site-nav .nav::-webkit-scrollbar {
    display: none;
  }
  .site-nav a {
    white-space: nowrap;
  }
  .has-sub,
  .sub {
    display: contents;
  }
  .has-sub > a {
    display: none;
  }
  .sub {
    position: static;
    visibility: visible;
    opacity: 1;
    transform: none;
  }
  .sub a {
    padding: 0.45rem 0;
  }
  .sub a:hover,
  .sub a[aria-current] {
    background: none;
  }
}

/* Phones and small tablets: the links go behind a "Menu" button. It is a checkbox and a label, so it works
   without JavaScript and does not shift the layout while the page loads (site.js adds Escape to close). */
.nav-toggle-input,
.nav-toggle {
  display: none;
}

@media (max-width: 820px) {
  .nav-toggle-input {
    display: block;
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
  }

  .nav-toggle {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 3rem;
    color: var(--green-900);
    font-weight: 700;
    cursor: pointer;
  }

  .nav-bars,
  .nav-bars::before,
  .nav-bars::after {
    display: block;
    width: 22px;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
    transition: transform 0.15s ease, background-color 0.15s ease;
  }

  .nav-bars {
    position: relative;
  }

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

  .nav-bars::before {
    top: -7px;
  }

  .nav-bars::after {
    top: 7px;
  }

  .nav-toggle-input:checked + .nav-toggle .nav-bars {
    background: transparent;
  }

  .nav-toggle-input:checked + .nav-toggle .nav-bars::before {
    top: 0;
    transform: rotate(45deg);
  }

  .nav-toggle-input:checked + .nav-toggle .nav-bars::after {
    top: 0;
    transform: rotate(-45deg);
  }

  .nav-toggle-input:focus-visible + .nav-toggle {
    outline: 3px solid var(--green-900);
    outline-offset: 2px;
    border-radius: 4px;
  }

  .site-nav .nav {
    display: none;
  }

  .nav-toggle-input:checked ~ .nav {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0;
    max-height: calc(100vh - 6rem);
    max-height: calc(100dvh - 6rem);
    padding: 0 0 0.5rem;
    overflow-x: visible;
    overflow-y: auto;
    border-top: 1px solid rgba(28, 65, 44, 0.25);
  }

  .site-nav .nav a {
    padding: 0.8rem 0.25rem;
    font-size: 1rem;
    white-space: normal;
    border-bottom: 1px solid rgba(28, 65, 44, 0.18);
  }

  .site-nav .nav a[aria-current] {
    padding-left: 0.65rem;
    border-left: 4px solid var(--green-900);
    border-bottom-color: rgba(28, 65, 44, 0.18);
  }
}

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

.hero {
  position: relative;
  isolation: isolate;
  /* Clear photo above the title band. The band is in normal flow below this padding, so when text is
     enlarged the band (and the hero) grows instead of the band spilling out of a fixed height and being
     clipped; the photo area above it keeps its size. */
  padding-top: clamp(230px, 27vw, 450px);
  background: var(--green-800);
  overflow: hidden;
}

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

/* As on the old site: the photo is left clear (no dark wash) and the heading sits in a white band, 90%
   opaque, along the bottom edge. The quote button and phone number live in the header only. */
.hero-band {
  padding: 0.85rem 0 1rem;
  text-align: center;
  color: #616060;
  background: rgba(255, 255, 255, 0.9);
}

.hero-band h1 {
  margin: 0;
  font-size: clamp(1.45rem, 1rem + 1.9vw, 2.4rem);
  font-weight: 800;
  line-height: 1.15;
  color: #616060;
  text-wrap: balance;
}

.hero-band p {
  margin: 0.3rem 0 0;
  font-size: clamp(1rem, 0.9rem + 0.45vw, 1.2rem);
  font-weight: 600;
  color: #616060;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

.btn-row-start {
  justify-content: flex-start;
}

/* Phones: a pair of CTAs stacks as two equal full-width buttons rather than two different-width pills
   hugging the left edge. */
@media (max-width: 600px) {
  .btn-row,
  .btn-row-start {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.7rem;
  }

  .btn-row .btn,
  .form-actions .btn {
    width: 100%;
  }
}

/* inner-page banner */

.page-head {
  background: var(--green-800);
  color: var(--white);
  padding-block: 2.6rem 2.4rem;
  position: relative;
  overflow: hidden;
}

.page-head h1 {
  margin: 0;
  font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.4rem);
  line-height: 1.2;
}

.page-head p {
  margin: 0.6rem 0 0;
  max-width: 62ch;
  opacity: 0.9;
}

.page-head p a {
  color: inherit;
}

/* ---------- sections ---------- */

.section {
  padding-block: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
}

.section-tint {
  background: var(--green-050);
}

.section-dark {
  background: var(--green-900);
  color: var(--white);
}

.section-dark a {
  color: var(--green-100);
}

.section-head {
  max-width: 62ch;
  margin-bottom: 2.25rem;
}

.section-head h2 {
  margin: 0 0 0.5rem;
  font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.1rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.section-head p {
  margin: 0;
  color: var(--muted);
}

.section-dark .section-head p {
  color: rgba(255, 255, 255, 0.78);
}

.lede {
  font-size: 1.15rem;
  color: var(--muted);
  max-width: 66ch;
}

.prose {
  max-width: 72ch;
}

.prose h2 {
  margin-top: 2.5rem;
  font-size: 1.4rem;
  line-height: 1.3;
}

.prose h3 {
  margin-top: 1.9rem;
  font-size: 1.15rem;
}

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

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

.cards {
  display: grid;
  gap: 1.75rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}

.card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.card img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.card-body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  flex: 1;
}

.card h3 {
  margin: 0;
  font-size: 1.3rem;
  line-height: 1.25;
}

.card p {
  margin: 0;
  color: var(--muted);
}

.card .btn {
  align-self: start;
  margin-top: auto;
}

.tick-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.5rem;
  color: var(--muted);
}

.tick-list li {
  position: relative;
  padding-left: 1.6rem;
}

.tick-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.52em;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--green-600);
}

/* ---------- feature strip ---------- */

.features {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.features li {
  padding: 1.5rem;
  border-radius: var(--radius);
  background: var(--white);
  border: 1px solid var(--line);
}

.features strong {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 1.05rem;
  color: var(--green-800);
}

.features span {
  color: var(--muted);
  font-size: 0.97rem;
}

/* ---------- testimonials ---------- */

/* full review list */

/* Masonry: CSS columns balance cards of very different lengths without the gaps a row grid leaves. */
.reviews {
  column-gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 720px) {
  .reviews {
    columns: 2;
  }
}

@media (min-width: 1040px) {
  .reviews {
    columns: 3;
  }
}

.reviews > li {
  break-inside: avoid;
  margin: 0 0 1.25rem;
  padding: 1.6rem;
  border-radius: var(--radius);
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.reviews blockquote {
  margin: 0 0 1rem;
  color: var(--ink);
}

.reviews footer {
  font-size: 0.9rem;
  color: var(--muted);
}

.reviews footer strong {
  color: var(--green-800);
}

/* ---------- clients ---------- */

/* Client logos, shown in the footer on every page. As on the old site: a plain black band, a centred
   heading and the logos as light marks at natural size, no tiles. The old CSS chose a treatment per
   logo: dark artwork on white or transparent is greyscaled and inverted (light on black), artwork
   that is already light is only greyscaled, and TG4 and Ashford Castle are left alone. */
.client-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.client-grid li {
  padding: 0.5rem;
}

.client-grid img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 90px;
}

.client-grid img[src$="client-courts.webp"],
.client-grid img[src$="client-hse.webp"],
.client-grid img[src$="client-fexco.webp"],
.client-grid img[src$="client-galway-city-council.webp"],
.client-grid img[src$="client-galway-county-council.webp"],
.client-grid img[src$="client-opw.webp"],
.client-grid img[src$="client-gretb.webp"],
.client-grid img[src$="client-dept-education.webp"] {
  filter: grayscale(1) invert(1);
}

.client-grid img[src$="client-planet-payments.webp"],
.client-grid img[src$="client-nuig.webp"] {
  filter: grayscale(1);
}

/* On phones scale the marks down so about two sit side by side instead of a long single column. */
@media (max-width: 600px) {
  .client-grid {
    gap: 0;
  }
  .client-grid li {
    padding: 0.4rem 0.6rem;
  }
  .client-grid img {
    max-height: 44px;
    max-width: 40vw;
  }
}

.accreditation {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: center;
  margin-top: 2rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
}

.accreditation img {
  max-height: 84px;
  width: auto;
}

.accreditation p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--muted);
  max-width: 46ch;
}

/* ---------- split (image + text) ---------- */

.split {
  display: grid;
  gap: 2.5rem;
  align-items: center;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 860px) {
  .split {
    grid-template-columns: 1.05fr 1fr;
  }
  .split-reverse > :first-child {
    order: 2;
  }
}

.split img {
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* ---------- gallery ---------- */

.gallery {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.gallery a {
  display: block;
  border-radius: 8px;
  overflow: hidden;
  background: var(--green-100);
}

.gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.gallery a:hover img {
  transform: scale(1.03);
}

/* ---------- lightbox (assets/js/lightbox.js) ---------- */

.gallery a {
  cursor: zoom-in;
}

html.lightbox-open {
  overflow: hidden;
}

.lightbox {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--white);
}

.lightbox::backdrop {
  background: rgba(10, 16, 12, 0.92);
}

.lightbox[open] {
  display: flex;
  align-items: center;
  justify-content: center;
  animation: lightbox-in 0.18s ease;
}

@keyframes lightbox-in {
  from {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lightbox[open] {
    animation: none;
  }
}

.lightbox-figure {
  max-width: 100%;
  margin: 0;
  padding: 4rem 5rem 4.5rem;
  text-align: center;
}

.lightbox-img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100vh - 10rem);
  max-height: calc(100dvh - 10rem);
  margin-inline: auto;
  border-radius: 6px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  user-select: none;
  /* Vertical scroll and pinch-zoom stay with the browser (low-vision users need to magnify a photo); only
     horizontal swipes are left to lightbox.js. */
  touch-action: pan-y pinch-zoom;
}

.lightbox-img.is-loading {
  opacity: 0.35;
}

.lightbox-error {
  margin: 1rem 0 0;
  color: var(--white);
  font-weight: 600;
}

.lightbox-error[hidden] {
  display: none;
}

.lightbox-caption {
  max-width: 60ch;
  margin: 0.9rem auto 0;
  font-size: 0.95rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.9);
}

.lightbox-count {
  /* Full width, so on phones it sits over the centre of both arrow buttons: it must not catch their taps. */
  pointer-events: none;
  position: absolute;
  bottom: 1.2rem;
  left: 0;
  right: 0;
  margin: 0;
  font-size: 0.85rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.75);
}

.lightbox-close,
.lightbox-nav {
  position: absolute;
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  padding: 0 0 0.15rem;
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.4);
  color: var(--white);
  font: inherit;
  font-size: 1.9rem;
  line-height: 1;
  cursor: pointer;
}

.lightbox-nav[hidden] {
  display: none;
}

.lightbox-close:hover,
.lightbox-nav:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: var(--white);
}

.lightbox-close:focus-visible,
.lightbox-nav:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

.lightbox-close {
  top: 1rem;
  right: 1rem;
}

.lightbox-prev,
.lightbox-next {
  top: 50%;
  margin-top: -1.45rem;
}

.lightbox-prev {
  left: 1rem;
}

.lightbox-next {
  right: 1rem;
}

/* Phones: the arrows move to the bottom, either side of the counter, so the photo gets the full width. */
@media (max-width: 700px) {
  .lightbox-figure {
    padding: 4rem 0.5rem 5.5rem;
  }

  .lightbox-img {
    max-height: calc(100vh - 11rem);
    max-height: calc(100dvh - 11rem);
  }

  .lightbox-prev,
  .lightbox-next {
    top: auto;
    bottom: 0.8rem;
    margin-top: 0;
  }

  .lightbox-prev {
    left: calc(50% - 6.2rem);
  }

  .lightbox-next {
    right: calc(50% - 6.2rem);
  }

  .lightbox-count {
    bottom: 1.4rem;
  }
}

/* Short screens (a phone held sideways): give the photo the height. The caption is dropped (screen readers
   still get it from the status line), the counter becomes a small pill over the photo, and the arrows go back
   to the sides. Must come after the phone rules above. */
@media (max-height: 520px) {
  .lightbox-figure {
    padding: 0.75rem 4.5rem;
  }

  .lightbox-img {
    max-height: calc(100vh - 1.5rem);
    max-height: calc(100dvh - 1.5rem);
  }

  .lightbox-caption {
    display: none;
  }

  .lightbox-prev,
  .lightbox-next {
    top: 50%;
    bottom: auto;
    margin-top: -1.45rem;
  }

  .lightbox-prev {
    left: 1rem;
  }

  .lightbox-next {
    right: 1rem;
  }

  .lightbox-count {
    left: 50%;
    right: auto;
    bottom: 0.9rem;
    padding: 0.15rem 0.7rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.6);
    transform: translateX(-50%);
  }
}

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

.faq {
  border-top: 1px solid var(--line);
}

.faq details {
  border-bottom: 1px solid var(--line);
}

.faq summary {
  cursor: pointer;
  padding: 1.15rem 2.5rem 1.15rem 0;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--green-800);
  position: relative;
  list-style: none;
}

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

.faq summary::after {
  content: "+";
  position: absolute;
  right: 0.4rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--green-600);
}

.faq details[open] summary::after {
  content: "\2212";
}

.faq .faq-body {
  padding-bottom: 1.35rem;
  max-width: 70ch;
}

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

.faq .faq-body > :last-child {
  margin-bottom: 0;
}

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

.steps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1.25rem;
  counter-reset: step;
}

.steps > li {
  position: relative;
  padding: 1.4rem 1.5rem 1.4rem 4rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.steps > li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 1.25rem;
  top: 1.3rem;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--green-700);
  color: var(--white);
  font-weight: 700;
  font-size: 0.95rem;
}

.steps h3 {
  margin: 0 0 0.4rem;
  font-size: 1.1rem;
}

.steps p {
  margin: 0;
  color: var(--muted);
}

/* ---------- callout ---------- */

.callout {
  background: var(--green-100);
  border-left: 4px solid var(--green-600);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.25rem 1.5rem;
  margin: 0;
}

.callout p {
  margin: 0;
}

.callout p + p {
  margin-top: 0.75rem;
}

/* ---------- contact blocks ---------- */

.contact-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.contact-grid li {
  padding: 1.5rem;
  border-radius: var(--radius);
  background: var(--white);
  border: 1px solid var(--line);
}

.contact-grid h3 {
  margin: 0 0 0.4rem;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.contact-grid p {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
}

.contact-grid a {
  text-decoration: none;
}

.contact-grid a:hover {
  text-decoration: underline;
}

/* ---------- form ---------- */

.form-grid {
  display: grid;
  gap: 1.15rem;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 700px) {
  .form-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .form-grid .full {
    grid-column: 1 / -1;
  }
}

.field {
  display: grid;
  gap: 0.35rem;
}

.field label {
  font-weight: 600;
  font-size: 0.95rem;
}

.field .hint {
  font-weight: 400;
  color: var(--muted);
  font-size: 0.87rem;
}

.field input,
.field select,
.field textarea {
  min-width: 0;
  max-width: 100%;
  font: inherit;
  padding: 0.7rem 0.8rem;
  border: 1px solid #c8d4cc;
  border-radius: 6px;
  background: var(--white);
  color: var(--ink);
  width: 100%;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 3px solid var(--green-600);
  outline-offset: 1px;
  border-color: var(--green-700);
}

.field textarea {
  min-height: 9rem;
  resize: vertical;
}

fieldset {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.15rem 1.25rem;
  margin: 0;
}

legend {
  font-weight: 700;
  padding-inline: 0.4rem;
  font-size: 0.95rem;
}

.checkbox-grid {
  display: grid;
  gap: 0.6rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
}

.checkbox-grid label {
  display: flex;
  gap: 0.55rem;
  align-items: center;
  font-weight: 400;
}

.checkbox-grid input {
  width: auto;
  margin: 0;
}

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

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

/* ---------- footer ---------- */

/* Colours follow the old site (charcoal body, light-green bottom bar) with
   contrast checked for the new text sizes. */
.site-footer {
  background: var(--charcoal);
  color: rgba(255, 255, 255, 0.82);
  padding-top: 3rem;
  font-size: 0.95rem;
}

.site-footer a {
  color: #f0f0f0;
}

.site-footer a:hover {
  color: var(--accent);
}

.footer-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}

.site-footer h2 {
  margin: 0 0 0.85rem;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.site-footer p {
  margin: 0 0 0.6rem;
}

.site-footer address {
  font-style: normal;
}

.footer-links {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.4rem;
}

.footer-clients {
  margin-top: 2.5rem;
  padding-block: 1.25rem 1.5rem;
  background: #000;
  text-align: center;
}

/* The old strip ran the full width of the page (two rows on a wide screen), not the 1120px column. */
.footer-clients .wrap {
  max-width: none;
}

.site-footer .footer-clients h2 {
  margin: 0 0 1rem;
  font-size: 1.2rem;
  letter-spacing: 0;
  /* The markup says "Our clients"; the old site's heading was "Our Clients". */
  text-transform: capitalize;
  color: var(--white);
}

.accreditation-solo {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.footer-bottom {
  background: var(--accent);
  color: var(--charcoal);
  font-size: 0.87rem;
}

.footer-bottom .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  align-items: center;
  padding-block: 0.75rem;
}

.footer-bottom p {
  margin: 0;
}

.site-footer .footer-bottom a {
  color: var(--charcoal);
  font-weight: 600;
}

.site-footer .footer-bottom a:hover {
  color: #000;
}

/* "Created by NETLINK" badge, copied from the old site's CSS (.footer .credits a.link): Georgia italic, grey
   on a black pill at half opacity, 0.8 on hover, the logo as a 16px icon on the left. The old bar put it at the
   far right, so it is pushed there. */
.footer-bottom .credit-slot {
  margin-left: auto;
}

.site-footer .footer-bottom .credits a.link {
  font-family: Georgia, serif;
  font-size: 1rem;
  font-weight: 400;
  display: inline-block;
  text-decoration: none;
  text-shadow: none;
  line-height: 16px;
  color: #787878;
  background: url("/assets/img/netlink-logo.svg") no-repeat 2% 50% / 16px 16px #000;
  opacity: 0.5;
  border-radius: 5px;
  padding: 8px 8px 8px 24px;
  margin-left: 10px;
}

.site-footer .footer-bottom .credits a.link:hover {
  opacity: 0.8;
}

.footer-leo img {
  max-height: 68px;
  width: auto;
  margin-top: 0.4rem;
  padding: 0.5rem 0.75rem;
  background: var(--white);
  border-radius: 8px;
}

/* ---------- utilities ---------- */

.stack > * + * {
  margin-top: 1rem;
}

.mt-2 {
  margin-top: 2rem;
}

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

@media (max-width: 600px) {
  .masthead {
    justify-content: center;
    text-align: center;
    gap: 0.75rem;
  }
  .masthead-actions {
    justify-content: center;
    gap: 1rem;
  }
  .brand img {
    width: 200px;
  }
  .header-phone span {
    display: none;
  }
  .header-phone {
    font-size: 1.1rem;
  }
}

/* ---------- hero slideshow (pure CSS crossfade, 5 slides x 6 s) ---------- */

.hero-slides {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero-slides img:not(.slide-base) {
  opacity: 0;
  animation: hero-fade 30s linear infinite;
}

.hero-slides img:nth-child(2) { animation-delay: 6s; }
.hero-slides img:nth-child(3) { animation-delay: 12s; }
.hero-slides img:nth-child(4) { animation-delay: 18s; }
.hero-slides img:nth-child(5) { animation-delay: 24s; }

@keyframes hero-fade {
  0% { opacity: 0; }
  4% { opacity: 1; }
  20% { opacity: 1; }
  24%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-slides img:not(.slide-base) {
    animation: none;
  }
}

/* Pause control (WCAG 2.2.2): a checkbox, so it works by keyboard. It is only shown once site.js has
   added the extra slides (.hero-live): with no slideshow running there is nothing to pause. */
.hero-pause-input {
  display: none;
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
}

.hero-pause {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
  display: none;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 999px;
  background: rgba(16, 38, 25, 0.55);
  color: var(--white);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.hero-pause::before {
  content: "";
  width: 0.7rem;
  height: 0.7rem;
  border-inline: 0.2rem solid currentColor;
}

.hero-live .hero-pause-input {
  display: block;
}

.hero-live .hero-pause {
  display: inline-flex;
}

/* If reduced motion is switched on after the slides were added, the slideshow stops: hide the control. */
@media (prefers-reduced-motion: reduce) {
  .hero-live .hero-pause-input,
  .hero-live .hero-pause {
    display: none;
  }
}

/* Pressed (paused) state: filled pill. The label stays constant; the checkbox state is the signal. */
.hero-pause-input:checked + .hero-pause {
  background: var(--white);
  color: var(--green-900);
}

.hero-pause-input:focus-visible + .hero-pause {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

.hero-pause-input:checked ~ .hero-slides img {
  animation-play-state: paused;
}

/* ---------- testimonial carousel ---------- */

.carousel {
  position: relative;
}

.carousel-track {
  display: flex;
  gap: 1.25rem;
  margin: 0;
  padding: 0.25rem 0 1rem;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-color: rgba(255, 255, 255, 0.4) transparent;
  overscroll-behavior-x: contain;
}

.carousel-track:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

.carousel .slide {
  flex: 0 0 min(88%, 26rem);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.75rem;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.carousel blockquote {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.6;
}

/* Long quotes are shortened on the home page only; every one of those is shown in full on
   /reviews/. Quotes on the service pages are never cut off. */
.carousel-clamp blockquote {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 9;
  line-clamp: 9;
  overflow: hidden;
}

.carousel footer {
  margin-top: auto;
  font-size: 0.97rem;
  color: var(--white);
}

.carousel-controls {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.5rem;
}

.carousel-controls[hidden] {
  display: none;
}

.carousel-btn {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.6);
  background: transparent;
  color: var(--white);
  font: inherit;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

.carousel-btn:hover,
.carousel-btn:focus-visible {
  background: rgba(255, 255, 255, 0.16);
  border-color: var(--white);
}

/* ---------- fully clickable cards ---------- */

.card {
  position: relative;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(23, 29, 25, 0.08), 0 14px 32px rgba(23, 29, 25, 0.12);
}

.card-link {
  color: inherit;
  text-decoration: none;
}

.card-link::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Above the positioned .tick-list rows, which would otherwise swallow clicks. */
  z-index: 1;
}

.card-link:focus-visible {
  outline: none;
}

.card:has(.card-link:focus-visible) {
  outline: 3px solid var(--green-600);
  outline-offset: 2px;
}

.card:hover .btn-primary {
  background: var(--green-800);
}

/* long URLs in policy text must wrap on phones */
.prose a {
  overflow-wrap: anywhere;
}

/* ---------- contact form extras ---------- */

/* Honeypot: off-screen rather than display:none, so naive bots still fill it in. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}