/* =============================================================================
   Co-Construct: site stylesheet
   "On grade." A black site at dusk, with the electric green used the way a
   laser level paints a line across it: as a fine line or a point of light,
   never as a flood. Bodoni Moda carries the headlines, Jost everything else.
   Tokens first (dark is the brand default), then Bootstrap 5.3 mapped onto them.
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
:root {
  --cc-font-display: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --cc-font-text: "Jost", "Futura", "Avenir Next", "Helvetica Neue", Arial, sans-serif;

  --cc-nav-h: 4.75rem;
  --cc-section-y: clamp(4.5rem, 3rem + 5vw, 7.5rem);
  --cc-card-pad: clamp(1.5rem, 1.2rem + 1vw, 2.25rem);
  --cc-ease: cubic-bezier(.22, 1, .36, 1);
}

:root,
[data-bs-theme="dark"] {
  color-scheme: dark;
  --cc-bg: #0a0a0a;             /* pure black page */
  --cc-bg-2: #101010;           /* alternate sections */
  --cc-surface: #1a1a1a;        /* cards and panels */
  --cc-text: #efefea;
  --cc-muted: #9d9d97;
  --cc-line: rgb(239 239 234 / .12);
  --cc-line-strong: rgb(239 239 234 / .28);
  --cc-control-line: #6f6f6a;   /* outlines of inputs and controls: 3:1 on page and cards */
  --cc-laser: #00ff88;          /* electric green: lines, lights, actions */
  --cc-accent-text: #00ff88;    /* green used as text */
  --cc-accent-ink: #0a0a0a;     /* text on green */
  --cc-deep: #003322;           /* dark green bands */
  --cc-focus: #00ff88;
  --cc-glow: 0 0 10px rgb(0 255 136 / .55);
  --cc-danger: #ff7a7a;
  --cc-danger-bg: rgb(255 122 122 / .08);
  --cc-nav-bg: rgb(10 10 10 / .82);
  --cc-photo: saturate(.95) contrast(1.04) brightness(.93);
  --cc-btn-bg: #00ff88;
  --cc-btn-fg: #0a0a0a;
  --logo-green: #3f9a43;        /* logo colours, matched from the printed letterhead */
  --logo-grey: #d4d1cb;         /* the logo's grey, lightened to read on black */
}

[data-bs-theme="light"] {
  color-scheme: light;
  --cc-bg: #f4f5f2;
  --cc-bg-2: #eceeea;
  --cc-surface: #ffffff;
  --cc-text: #0a0a0a;
  --cc-muted: #4d524f;
  --cc-line: rgb(10 10 10 / .12);
  --cc-line-strong: rgb(10 10 10 / .28);
  --cc-control-line: #858a86;
  --cc-laser: #00b863;          /* the neon reads poorly on white, so lines go deeper */
  --cc-accent-text: #007a46;    /* 5:1 on the light ground */
  --cc-accent-ink: #0a0a0a;
  --cc-deep: #003322;
  --cc-focus: #007a46;
  --cc-glow: none;
  --cc-danger: #b42318;
  --cc-danger-bg: #fbeceb;
  --cc-nav-bg: rgb(244 245 242 / .88);
  --cc-photo: saturate(1) contrast(1.02);
  --cc-btn-bg: #003322;
  --cc-btn-fg: #efefea;
  --logo-green: #3f9a43;
  --logo-grey: #605d58;         /* the logo's own grey on light backgrounds */
}

:root,
[data-bs-theme] {
  --bs-body-bg: var(--cc-bg);
  --bs-body-color: var(--cc-text);
  --bs-emphasis-color: var(--cc-text);
  --bs-secondary-color: var(--cc-muted);
  --bs-heading-color: inherit;
  --bs-border-color: var(--cc-line);
  --bs-body-font-family: var(--cc-font-text);
  --bs-body-font-size: 1.0625rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.75;
  --bs-border-radius: 0;
  --bs-border-radius-sm: 0;
  --bs-border-radius-lg: 0;
  --bs-border-radius-xl: 0;
  --bs-border-radius-xxl: 0;
}

/* 2. Base ------------------------------------------------------------------- */
html {
  scroll-padding-top: calc(var(--cc-nav-h) + 1.25rem);
}

body {
  font-family: var(--cc-font-text);
  background-color: var(--cc-bg);
  color: var(--cc-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  color: inherit;
  font-family: var(--cc-font-display);
  font-optical-sizing: auto;
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -.015em;
  text-wrap: balance;
  margin-bottom: .65em;
}

h2 {
  font-size: clamp(2.25rem, 1.5rem + 2.9vw, 4rem);
}

h3 {
  font-size: clamp(1.4rem, 1.25rem + .5vw, 1.7rem);
  line-height: 1.2;
  letter-spacing: -.005em;
}

main p {
  max-width: 68ch;
  text-wrap: pretty;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: .25em;
  transition: color .3s var(--cc-ease), text-decoration-color .3s var(--cc-ease), background-color .3s var(--cc-ease), border-color .3s var(--cc-ease);
}

a:hover {
  color: var(--cc-accent-text);
}

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

#main:focus {
  outline: none;
}

::selection {
  background: var(--cc-laser);
  color: #0a0a0a;
}

img {
  max-width: 100%;
}

.text-muted-cc {
  color: var(--cc-muted);
}

.lead {
  font-size: clamp(1.125rem, 1.05rem + .3vw, 1.3rem);
  font-weight: 400;
  line-height: 1.65;
}

.link-line {
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--cc-laser);
}

.skip-link {
  position: fixed;
  top: .75rem;
  left: .75rem;
  z-index: 2000;
  padding: .7rem 1.1rem;
  font-weight: 500;
  text-decoration: none;
  color: #0a0a0a;
  background: #00ff88;
  transform: translateY(-250%);
}

.skip-link:focus {
  transform: none;
  outline-color: #0a0a0a;
}

/* 3. The laser line ---------------------------------------------------------
   One reusable element: a 1px green beam that draws itself from the left. */
.laser {
  display: block;
  height: 1px;
  background: var(--cc-laser);
  box-shadow: var(--cc-glow);
  transform-origin: left center;
}

/* 4. Buttons ---------------------------------------------------------------- */
.btn-cc {
  --btn-bg: transparent;
  --btn-fg: var(--cc-text);
  --btn-bd: var(--cc-line-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  min-height: 3.25rem;
  padding: .75rem 1.6rem;
  font-family: var(--cc-font-text);
  font-size: .9875rem;
  font-weight: 500;
  letter-spacing: .02em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1px solid var(--btn-bd);
  border-radius: 0;
  cursor: pointer;
  transition: background-color .35s var(--cc-ease), color .35s var(--cc-ease), border-color .35s var(--cc-ease), box-shadow .35s var(--cc-ease), transform .2s var(--cc-ease);
}

.btn-cc:hover {
  color: var(--cc-accent-text);
  border-color: var(--cc-laser);
}

.btn-cc:active {
  transform: translateY(1px);
}

.btn-cc[aria-disabled="true"] {
  cursor: progress;
  opacity: .7;
}

.btn-cc--primary {
  --btn-bg: var(--cc-btn-bg);
  --btn-fg: var(--cc-btn-fg);
  --btn-bd: var(--cc-btn-bg);
}

.btn-cc--primary:hover {
  color: #0a0a0a;
  background: #00ff88;
  border-color: #00ff88;
  box-shadow: 0 0 22px rgb(0 255 136 / .35);
}

/* On photographs and dark green bands, whatever the colour mode */
.btn-cc--light {
  --btn-fg: #efefea;
  --btn-bd: rgb(239 239 234 / .45);
}

.btn-cc--light:hover {
  color: #00ff88;
  border-color: #00ff88;
}

.on-dark .btn-cc--primary,
.hero .btn-cc--primary,
.page-hero .btn-cc--primary {
  --btn-bg: #00ff88;
  --btn-fg: #0a0a0a;
  --btn-bd: #00ff88;
}

.btn-cc--sm {
  min-height: 2.6rem;
  padding: .45rem 1.1rem;
  font-size: .9rem;
}

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  font-size: 1.05rem;
  color: var(--nav-fg, var(--cc-text));
  background: transparent;
  border: 1px solid var(--cc-control-line);
  border-radius: 50%;
  cursor: pointer;
  transition: color .3s var(--cc-ease), border-color .3s var(--cc-ease), box-shadow .3s var(--cc-ease);
}

.icon-btn:hover {
  color: var(--cc-laser);
  border-color: var(--cc-laser);
  box-shadow: var(--cc-glow);
}

/* Theme toggle: moon in dark mode (switch to light), sun in light mode */
.theme-toggle .bi-sun,
[data-bs-theme="light"] .theme-toggle .bi-moon-stars {
  display: none;
}

[data-bs-theme="light"] .theme-toggle .bi-sun {
  display: inline-block;
}

@keyframes cc-turn {
  from { transform: rotate(-90deg) scale(.5); opacity: 0; }
}

html.theme-changing .theme-toggle i {
  animation: cc-turn .5s var(--cc-ease);
}

/* 5. Fixed navigation -------------------------------------------------------- */
.site-nav {
  --nav-fg: #efefea;          /* over the dark hero photographs */
  --bs-navbar-padding-y: 0;
  --bs-navbar-color: var(--nav-fg);
  --bs-navbar-hover-color: var(--cc-laser);
  --bs-navbar-active-color: var(--nav-fg);
  --bs-navbar-nav-link-padding-x: 0;
  min-height: var(--cc-nav-h);
  color: var(--nav-fg);
  background: linear-gradient(180deg, rgb(10 10 10 / .55), rgb(10 10 10 / 0));
  transition: background-color .4s var(--cc-ease), color .4s var(--cc-ease), backdrop-filter .4s var(--cc-ease);
}

.site-nav::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--cc-laser);
  box-shadow: var(--cc-glow);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .9s var(--cc-ease);
}

.site-nav.is-scrolled {
  --nav-fg: var(--cc-text);
  background: var(--cc-nav-bg);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
}

.site-nav.is-scrolled::after {
  transform: scaleX(1);
}

/* Over the photograph the call to action is always the green one */
.site-nav:not(.is-scrolled) .nav-cta {
  --btn-bg: #00ff88;
  --btn-fg: #0a0a0a;
  --btn-bd: #00ff88;
}

.site-nav > .container {
  min-height: var(--cc-nav-h);
  flex-wrap: nowrap;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  margin: 0;
  padding: 0;
  color: var(--nav-fg);
  text-decoration: none;
}

.brand:hover {
  color: var(--nav-fg);
}

/* The logo is defined once per page (#cc-logo) and drawn with <use>, so its two
   colours follow --logo-green and --logo-grey from the surrounding context. */
.logo-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.brand__logo {
  display: block;
  flex: none;
  width: auto;
  height: 2.4rem;
  aspect-ratio: 1484 / 256;
}

/* Over the hero photograph the logo keeps its light grey, whatever the colour mode */
.site-nav:not(.is-scrolled) > .container > .brand {
  --logo-grey: #d4d1cb;
}

@media (max-width: 389.98px) {
  .brand__logo { height: 2.05rem; }
}

@media (max-width: 339.98px) {
  .brand__logo { height: 1.8rem; }
}

@media (min-width: 992px) {
  .brand__logo { height: 2.85rem; }
}

.site-nav .nav-link {
  position: relative;
  padding-block: .5rem;
  font-size: .975rem;
  font-weight: 400;
  letter-spacing: .02em;
  text-decoration: none;
}

.site-nav .nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: .15rem;
  height: 1px;
  background: var(--cc-laser);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .5s var(--cc-ease);
}

.site-nav .nav-link:hover::after,
.site-nav .nav-link.active::after {
  transform: scaleX(1);
}

.site-nav .nav-link.active::after {
  box-shadow: var(--cc-glow);
}

.nav-tools {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-left: 1.25rem;
}

/* Over the hero photograph the round controls need a lighter outline */
.site-nav:not(.is-scrolled) .icon-btn {
  border-color: rgb(239 239 234 / .55);
}

.menu-btn__bars,
.menu-btn__bars::before,
.menu-btn__bars::after {
  display: block;
  width: 1.15rem;
  height: 1.5px;
  background: currentColor;
}

.menu-btn__bars {
  position: relative;
}

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

.menu-btn__bars::before { top: -6px; }
.menu-btn__bars::after { top: 6px; width: .75rem; }

@media (min-width: 992px) {
  .site-nav .navbar-nav {
    gap: 2.25rem;
    margin-left: auto;
  }

  .site-nav .nav-cta {
    margin-left: 2.25rem;
  }
}

/* Mobile menu: Bootstrap's responsive offcanvas, full screen */
@media (max-width: 991.98px) {
  .site-menu.offcanvas {
    --bs-offcanvas-width: 100%;
    color: var(--cc-text);
    background: var(--cc-bg);
    border: 0;
  }

  .site-menu .offcanvas-header {
    min-height: var(--cc-nav-h);
    padding-block: 0;
    border-bottom: 1px solid var(--cc-line);
  }

  .site-menu .offcanvas-header .brand {
    color: var(--cc-text);
  }

  .site-menu .offcanvas-body {
    display: flex;
    flex-direction: column;
    padding: 2rem var(--bs-gutter-x, 1.5rem) 2.5rem;
  }

  .site-menu .navbar-nav {
    margin-bottom: 2rem;
  }

  .site-menu .nav-link {
    padding-block: .9rem;
    font-family: var(--cc-font-display);
    font-size: clamp(2rem, 1.5rem + 3vw, 2.75rem);
    font-weight: 500;
    letter-spacing: -.01em;
    color: var(--cc-text);
    border-bottom: 1px solid var(--cc-line);
  }

  .site-menu .nav-link::after {
    bottom: -1px;
  }

  .site-menu .nav-item {
    opacity: 0;
    transform: translateY(.75rem);
    transition: opacity .5s var(--cc-ease), transform .5s var(--cc-ease);
  }

  .site-menu.show .nav-item {
    opacity: 1;
    transform: none;
  }

  .site-menu.show .nav-item:nth-child(2) { transition-delay: .06s; }
  .site-menu.show .nav-item:nth-child(3) { transition-delay: .12s; }
  .site-menu.show .nav-item:nth-child(4) { transition-delay: .18s; }

  .site-menu .nav-cta {
    align-self: stretch;
  }

  .menu-meta {
    margin-top: auto;
    padding-top: 2rem;
    font-size: .95rem;
    color: var(--cc-muted);
  }

  .menu-meta a {
    display: block;
    margin-top: .35rem;
    font-size: 1.1rem;
    color: var(--cc-text);
    text-decoration: none;
  }

  .menu-close {
    margin-left: auto;
    color: var(--cc-text);
  }
}

/* 6. Hero ---------------------------------------------------------------------- */
.hero,
.page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #efefea;
  background: #0a0a0a;
}

.hero {
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding-block: calc(var(--cc-nav-h) + 3rem) 6rem;
  text-align: center;
}

.hero__media,
.page-hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero__media img,
.page-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.8) contrast(1.06) brightness(.8);
}

.hero::before,
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 70% 60% at 50% 48%, rgb(10 10 10 / .38), rgb(10 10 10 / .62)),
    linear-gradient(180deg, rgb(10 10 10 / .42) 0%, rgb(10 10 10 / .1) 40%, rgb(10 10 10 / .8) 88%, #0a0a0a 100%);
}

.hero__title {
  max-width: 14ch;
  margin: 0 auto 1.6rem;
  font-size: clamp(3rem, 1.4rem + 6.4vw, 7.25rem);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -.025em;
}

.hero__lead {
  max-width: 40rem;
  margin: 0 auto 2.5rem;
  font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem);
  line-height: 1.7;
  color: rgb(239 239 234 / .86);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

/* Ground level: the beam that crosses the foot of the hero */
.hero__laser,
.page-hero__laser {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 18%;
}

.page-hero__laser {
  bottom: 0;
}

.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 2rem;
  display: block;
  width: 1px;
  height: 3.5rem;
  overflow: hidden;
  background: rgb(239 239 234 / .25);
  transform: translateX(-50%);
}

.hero__scroll::after {
  content: "";
  position: absolute;
  left: 0;
  top: -40%;
  width: 1px;
  height: 40%;
  background: #00ff88;
  box-shadow: 0 0 8px rgb(0 255 136 / .7);
  animation: cc-drop 2.4s var(--cc-ease) 2s infinite;
}

.hero__scroll:focus-visible {
  width: 2.5rem;
  outline-offset: 4px;
  background: transparent;
}

@keyframes cc-drop {
  to { top: 100%; }
}

.page-hero {
  display: grid;
  place-items: center;
  min-height: clamp(26rem, 70vh, 40rem);
  min-height: clamp(26rem, 70svh, 40rem);
  padding-block: calc(var(--cc-nav-h) + 3rem) 4.5rem;
  text-align: center;
}

.page-hero__title {
  margin: 1.1rem 0 1.25rem;
  font-size: clamp(2.75rem, 1.6rem + 4.6vw, 5.5rem);
  line-height: 1.04;
  letter-spacing: -.02em;
}

.page-hero__lead {
  max-width: 42rem;
  margin: 0 auto;
  font-size: clamp(1.0625rem, 1rem + .3vw, 1.225rem);
  color: rgb(239 239 234 / .86);
}

.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .6rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: .9rem;
  letter-spacing: .02em;
  color: rgb(239 239 234 / .7);
}

.crumbs li + li::before {
  content: "/";
  margin-right: .6rem;
  color: #00ff88;
}

.crumbs a {
  color: #efefea;
  text-decoration: none;
}

.crumbs a:hover {
  color: #00ff88;
}

.hero :focus-visible,
.page-hero :focus-visible,
.on-dark :focus-visible {
  outline-color: #00ff88;
}

/* The one orchestrated entrance: the beam draws, then the words arrive */
@keyframes cc-draw {
  from { transform: scaleX(0); }
}

@keyframes cc-rise {
  from { opacity: 0; transform: translateY(1.25rem); }
}

@keyframes cc-settle {
  from { transform: scale(1.07); }
}

.js .hero__laser,
.js .page-hero__laser {
  animation: cc-draw 1.6s var(--cc-ease) .1s backwards;
}

.js .hero__media img,
.js .page-hero__media img {
  animation: cc-settle 7s var(--cc-ease) backwards;
}

.js [data-load] {
  animation: cc-rise 1s var(--cc-ease) backwards;
  animation-delay: calc(var(--load-i, 0) * 120ms + 350ms);
}

[data-load="1"] { --load-i: 1; }
[data-load="2"] { --load-i: 2; }
[data-load="3"] { --load-i: 3; }

/* 7. Sections ------------------------------------------------------------------- */
.section {
  padding-block: var(--cc-section-y);
}

.section--alt {
  background: var(--cc-bg-2);
}

.section-head {
  display: grid;
  gap: 1.25rem 3rem;
  margin-bottom: clamp(2.5rem, 1.8rem + 2.5vw, 4rem);
  padding-top: 2rem;
  border-top: 1px solid var(--cc-line);
}

.section-head > * {
  margin: 0;
}

.section-head p {
  max-width: 52ch;
  font-size: 1.125rem;
  color: var(--cc-muted);
}

@media (min-width: 992px) {
  .section-head {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    align-items: end;
  }
}

.section-foot {
  margin-top: 2.5rem;
}

/* 8. Cards ------------------------------------------------------------------------ */
.card-cc {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--cc-surface);
  border: 1px solid var(--cc-line);
  transition: border-color .5s var(--cc-ease), transform .5s var(--cc-ease);
}

/* Linked cards: the laser sweeps along the top edge on hover or focus */
.card-cc--link::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: -1px;
  left: -1px;
  right: -1px;
  height: 1px;
  background: var(--cc-laser);
  box-shadow: var(--cc-glow);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .7s var(--cc-ease);
}

.card-cc--link:hover,
.card-cc--link:focus-within {
  border-color: var(--cc-line-strong);
  transform: translateY(-4px);
}

.card-cc--link:hover::before,
.card-cc--link:focus-within::before {
  transform: scaleX(1);
}

.card-cc__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: .75rem;
  padding: var(--cc-card-pad);
}

.card-cc__body > * {
  margin: 0;
}

.card-cc__body p {
  color: var(--cc-muted);
}

.photo {
  position: relative;
  overflow: hidden;
  background: #111;
}

.photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: var(--cc-photo);
  transition: transform 1.2s var(--cc-ease), filter .7s var(--cc-ease);
}

.card-cc--link:hover .photo img,
.card-cc--link:focus-within .photo img {
  transform: scale(1.045);
  filter: saturate(.95) contrast(1.04) brightness(.92);
}

.photo--card {
  aspect-ratio: 4 / 3;
}

.photo--tall {
  height: 100%;
  min-height: 20rem;
}

.service-card h3 a {
  text-decoration: none;
}

.service-card h3 a:hover {
  color: inherit;
}

.card-cc__more {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin-top: auto !important;
  padding-top: .5rem;
  font-size: .9rem;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--cc-accent-text);
}

.card-cc__more::before {
  content: "";
  width: 1.5rem;
  height: 1px;
  background: currentColor;
  transition: width .5s var(--cc-ease);
}

.card-cc--link:hover .card-cc__more::before,
.card-cc--link:focus-within .card-cc__more::before {
  width: 2.75rem;
}

.icon-ring {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 3.25rem;
  height: 3.25rem;
  font-size: 1.35rem;
  color: var(--cc-accent-text);
  border: 1px solid var(--cc-line-strong);
  border-radius: 50%;
}

/* Figures */
.figure-cc {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: .4rem;
  padding: var(--cc-card-pad);
  border-left: 1px solid var(--cc-line);
}

.figure-cc dd {
  margin: 0;
  font-family: var(--cc-font-display);
  font-size: clamp(2.75rem, 2rem + 2.6vw, 4.25rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.02em;
}

.figure-cc dt {
  font-weight: 400;
  color: var(--cc-muted);
}

/* People */
.person__monogram {
  display: grid;
  place-items: center;
  width: 4.25rem;
  height: 4.25rem;
  margin-bottom: .5rem;
  font-family: var(--cc-font-display);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--cc-accent-text);
  border: 1px solid var(--cc-line-strong);
  border-radius: 50%;
}

.person__role {
  font-size: .95rem;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--cc-accent-text) !important;
}

/* Plant fleet: the tonnage is the headline */
.fleet__size {
  font-family: var(--cc-font-display);
  font-size: clamp(2.5rem, 2rem + 1.8vw, 3.5rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.02em;
}

.fleet__size span {
  font-size: .5em;
  letter-spacing: 0;
  color: var(--cc-muted);
}

/* Lists */
.tick-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--cc-line);
}

.tick-list li {
  position: relative;
  padding: .75rem 0 .75rem 2rem;
  border-bottom: 1px solid var(--cc-line);
}

.tick-list li::before {
  content: "\F272";                    /* bootstrap-icons check2 */
  position: absolute;
  top: .78rem;
  left: 0;
  font-family: "bootstrap-icons";
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--cc-accent-text);
}

@media (min-width: 576px) {
  .tick-list--split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 2rem;
  }
}

/* 9. Process ---------------------------------------------------------------------- */
.steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.step {
  position: relative;
  height: 100%;
  padding-top: 2.25rem;
  counter-increment: step;
}

/* A real sequence, so it is numbered; the beam runs through the numbers */
.step::before {
  content: "0" counter(step);
  content: "0" counter(step) / "";
  display: block;
  margin-bottom: 1rem;
  font-family: var(--cc-font-display);
  font-size: 2.75rem;
  font-style: italic;
  font-weight: 400;
  line-height: 1;
  color: var(--cc-accent-text);
}

.step::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--cc-line-strong);
}

.step h3 {
  margin-bottom: .6rem;
  font-size: 1.5rem;
}

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

/* 10. Work carousel: project photo beside the client's words ---------------------- */
.work-carousel .carousel-item {
  transition-duration: .9s;
}

.work-slide {
  border: 1px solid var(--cc-line);
  background: var(--cc-surface);
}

.work-slide__media {
  height: 100%;
  min-height: 18rem;
}

.work-slide__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  margin: 0;
  padding: clamp(2rem, 1.4rem + 2.5vw, 4rem);
}

.work-slide__project {
  margin: 0 0 1.5rem;
  font-size: .95rem;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--cc-accent-text);
}

.work-slide blockquote {
  margin: 0 0 1.75rem;
}

.work-slide blockquote p {
  margin: 0;
  font-family: var(--cc-font-display);
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -.01em;
}

.work-slide figcaption {
  display: flex;
  align-items: center;
  gap: .9rem;
  color: var(--cc-muted);
}

.work-slide figcaption::before {
  content: "";
  flex: none;
  width: 2.5rem;
  height: 1px;
  background: var(--cc-laser);
  box-shadow: var(--cc-glow);
}

.work-carousel__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: 1.75rem;
}

.work-carousel .carousel-indicators {
  position: static;
  flex: 1 1 auto;
  justify-content: flex-start;
  gap: .5rem;
  margin: 0;
}

.work-carousel .carousel-indicators [data-bs-target] {
  flex: 0 1 4rem;
  width: auto;
  height: 1px;
  margin: 0;
  padding: .75rem 0;
  background-color: transparent;
  background-image: linear-gradient(var(--cc-control-line), var(--cc-control-line));
  background-size: 100% 1px;
  background-position: center;
  background-repeat: no-repeat;
  border: 0;
  opacity: 1;
  transition: background-image .4s var(--cc-ease);
}

.work-carousel .carousel-indicators .active {
  background-image: linear-gradient(var(--cc-laser), var(--cc-laser));
  background-size: 100% 2px;
}

.carousel-arrows {
  display: flex;
  gap: .75rem;
}

.carousel-arrows .icon-btn {
  --nav-fg: var(--cc-text);
  width: 3.25rem;
  height: 3.25rem;
}

/* 11. Call to action band ---------------------------------------------------------- */
.cta-band {
  position: relative;
  padding-block: clamp(4rem, 3rem + 4vw, 6.5rem);
  color: #efefea;
  background: #003322;
}

.cta-band::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: #00ff88;
  box-shadow: 0 0 10px rgb(0 255 136 / .55);
}

.cta-band__inner {
  display: grid;
  align-items: end;
  gap: 2rem 4rem;
}

.cta-band h2 {
  margin: 0 0 1rem;
}

.cta-band p {
  max-width: 50ch;
  margin: 0;
  font-size: 1.125rem;
  color: rgb(239 239 234 / .82);
}

.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

@media (min-width: 992px) {
  .cta-band__inner {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  /* stack the buttons beside the text, so the two phone numbers don't squeeze the heading */
  .cta-band__actions {
    flex-direction: column;
  }
}

/* 12. Services page ------------------------------------------------------------------- */
.service-index {
  position: sticky;
  top: var(--cc-nav-h);
  z-index: 1020;
  background: var(--cc-nav-bg);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--cc-line);
}

.service-index__list {
  position: relative;
  display: flex;
  gap: 2rem;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  list-style: none;
  scrollbar-width: none;
}

.service-index__list::-webkit-scrollbar {
  display: none;
}

.service-index .nav-link {
  position: relative;
  display: block;
  padding: 1.1rem 0;
  font-size: .95rem;
  letter-spacing: .02em;
  white-space: nowrap;
  text-decoration: none;
  color: var(--cc-muted);
}

.service-index .nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--cc-laser);
  box-shadow: var(--cc-glow);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .5s var(--cc-ease);
}

.service-index .nav-link:hover,
.service-index .nav-link.active {
  color: var(--cc-text);
}

.service-index .nav-link.active::after {
  transform: scaleX(1);
}

@media (min-width: 1200px) {
  .service-index__list {
    justify-content: center;
    gap: 3rem;
  }
}

.service-detail {
  scroll-margin-top: 3.5rem;
}

.service-detail + .service-detail {
  margin-top: clamp(3rem, 2rem + 3vw, 5rem);
}

.service-detail__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
  height: 100%;
  padding: clamp(1.75rem, 1.2rem + 2vw, 3.25rem);
  background: var(--cc-surface);
  border: 1px solid var(--cc-line);
}

.service-detail__body > * {
  margin: 0;
}

.service-detail__body h2 {
  font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
}

.service-detail__body h3 {
  margin-top: .5rem;
  font-family: var(--cc-font-text);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--cc-accent-text);
}

/* 13. Forms --------------------------------------------------------------------------- */
.enquiry {
  padding: clamp(1.75rem, 1.2rem + 2vw, 3rem);
  background: var(--cc-surface);
  border: 1px solid var(--cc-line);
}

.enquiry h2 {
  margin-bottom: .5rem;
  font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
}

.field-label {
  display: block;
  margin-bottom: .5rem;
  font-size: .95rem;
  font-weight: 500;
  letter-spacing: .01em;
}

.field-label .optional {
  font-weight: 400;
  color: var(--cc-muted);
}

.field-hint {
  margin: -.2rem 0 .6rem;
  font-size: .9rem;
  color: var(--cc-muted);
}

.form-control,
.form-select {
  min-height: 3.25rem;
  padding: .75rem 1rem;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--cc-text);
  background-color: var(--cc-bg);
  border: 1px solid var(--cc-control-line);
  border-radius: 0;
  transition: border-color .3s var(--cc-ease), box-shadow .3s var(--cc-ease), background-color .3s var(--cc-ease);
}

.form-select {
  --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2300ff88' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m3 6 5 5 5-5'/%3e%3c/svg%3e");
  padding-right: 2.75rem;
}

[data-bs-theme="light"] .form-select {
  --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23007a46' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m3 6 5 5 5-5'/%3e%3c/svg%3e");
}

.form-select option {
  color: var(--cc-text);
  background: var(--cc-surface);
}

.form-control:focus,
.form-select:focus {
  color: var(--cc-text);
  background-color: var(--cc-bg);
  border-color: var(--cc-focus);
  box-shadow: 0 0 0 1px var(--cc-focus), var(--cc-glow);
  outline: none;
}

.form-control::placeholder {
  color: var(--cc-muted);
  opacity: .8;
}

textarea.form-control {
  min-height: 10rem;
  resize: vertical;
}

.field.has-error .form-control,
.field.has-error .form-select {
  border-color: var(--cc-danger);
  background-color: var(--cc-danger-bg);
}

.field-error {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  margin: .5rem 0 0;
  font-size: .925rem;
  font-weight: 500;
  color: var(--cc-danger);
}

.field-meta {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.char-count {
  margin: .5rem 0 0 auto;
  font-size: .875rem;
  color: var(--cc-muted);
  white-space: nowrap;
}

.form-summary,
.form-alert {
  margin-bottom: 1.75rem;
  padding: 1.25rem 1.5rem;
  background: var(--cc-danger-bg);
  border: 1px solid var(--cc-danger);
  border-left-width: 3px;
}

.form-summary h3,
.form-alert h3 {
  margin-bottom: .5rem;
  font-family: var(--cc-font-text);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--cc-danger);
}

.form-summary ul {
  margin: 0;
  padding-left: 1.1rem;
}

.form-summary a {
  color: var(--cc-danger);
}

.form-alert p {
  margin: 0;
}

.form-success {
  position: relative;
  padding: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
  color: #efefea;
  background: #003322;
  border: 1px solid rgb(0 255 136 / .4);
}

.form-success::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  height: 1px;
  background: #00ff88;
  box-shadow: 0 0 10px rgb(0 255 136 / .6);
}

.form-success h3 {
  margin-bottom: .75rem;
  font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem);
}

.form-success h3:focus {
  outline: none;
}

.form-success p {
  margin-bottom: .6rem;
  color: rgb(239 239 234 / .88);
}

.form-success p:last-child {
  margin-bottom: 0;
}

.form-success a {
  color: #00ff88;
}

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

/* Without JavaScript the handler redirects back to #sent or #not-sent */
.form-result {
  display: none;
  margin-bottom: 1.75rem;
}

.form-result:target {
  display: block;
}

.hp {
  position: absolute !important;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Contact details */
.contact-card {
  height: 100%;
  padding: clamp(1.75rem, 1.2rem + 2vw, 3rem);
  color: #efefea;
  background: #003322;
  border: 1px solid rgb(0 255 136 / .25);
}

.contact-card h2 {
  font-size: clamp(1.9rem, 1.5rem + 1.5vw, 2.5rem);
}

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

.contact-list li {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: .75rem;
  padding: 1.1rem 0;
  border-top: 1px solid rgb(239 239 234 / .14);
}

.contact-list li:first-child {
  padding-top: .25rem;
  border-top: 0;
}

.contact-list i {
  font-size: 1.15rem;
  line-height: 1.75;
  color: #00ff88;
}

.contact-list .label {
  display: block;
  font-size: .875rem;
  letter-spacing: .02em;
  color: rgb(239 239 234 / .68);
}

.contact-list a,
.contact-list address {
  margin: 0;
  font-weight: 500;
  color: #efefea;
  overflow-wrap: anywhere;
}

.contact-list a:hover {
  color: #00ff88;
}

.company-details {
  margin: 1.5rem 0 0;
  padding-top: 1.25rem;
  font-size: .875rem;
  color: rgb(239 239 234 / .68);
  border-top: 1px solid rgb(239 239 234 / .14);
}

/* FAQ accordion */
.accordion {
  --bs-accordion-color: var(--cc-text);
  --bs-accordion-bg: transparent;
  --bs-accordion-border-color: var(--cc-line);
  --bs-accordion-border-width: 1px;
  --bs-accordion-border-radius: 0;
  --bs-accordion-inner-border-radius: 0;
  --bs-accordion-btn-padding-x: 0;
  --bs-accordion-btn-padding-y: 1.5rem;
  --bs-accordion-btn-color: var(--cc-text);
  --bs-accordion-btn-bg: transparent;
  --bs-accordion-btn-icon-width: .95rem;
  --bs-accordion-btn-icon-transform: rotate(45deg);
  --bs-accordion-btn-icon-transition: transform .45s var(--cc-ease);
  --bs-accordion-btn-focus-box-shadow: none;
  --bs-accordion-body-padding-x: 0;
  --bs-accordion-body-padding-y: 0;
  --bs-accordion-active-color: var(--cc-text);
  --bs-accordion-active-bg: transparent;
}

.accordion-item {
  border-left: 0;
  border-right: 0;
}

.accordion-button {
  gap: 1.5rem;
  font-family: var(--cc-font-display);
  font-size: clamp(1.25rem, 1.15rem + .4vw, 1.5rem);
  font-weight: 500;
  line-height: 1.3;
}

.accordion-button::after,
.accordion-button:not(.collapsed)::after {
  background-image: none;
  background-color: var(--cc-accent-text);
  -webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M7.25 0h1.5v16h-1.5zM0 7.25h16v1.5H0z'/%3e%3c/svg%3e") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M7.25 0h1.5v16h-1.5zM0 7.25h16v1.5H0z'/%3e%3c/svg%3e") center / contain no-repeat;
}

.accordion-button:not(.collapsed) {
  box-shadow: none;
}

.accordion-button:hover {
  color: var(--cc-accent-text);
}

.accordion-button:focus-visible {
  z-index: 3;
  outline: 2px solid var(--cc-focus);
  outline-offset: 2px;
}

.accordion-body {
  padding-bottom: 1.5rem;
  color: var(--cc-muted);
}

.accordion-body p:last-child {
  margin-bottom: 0;
}

.faq-intro h2 {
  margin-bottom: 1rem;
}

@media (min-width: 992px) {
  .faq-intro {
    position: sticky;
    top: calc(var(--cc-nav-h) + 2rem);
  }
}

.notice {
  max-width: 52rem;
}

.notice p {
  color: var(--cc-muted);
}

/* 14. Footer ---------------------------------------------------------------------------- */
.site-footer {
  color: #efefea;
  background: #0a0a0a;
  border-top: 1px solid rgb(239 239 234 / .12);
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding-block: 1.75rem;
}

.site-footer__copy {
  margin: 0;
  font-size: .925rem;
  color: rgb(239 239 234 / .72);
}

.site-footer__copy a {
  margin-left: .75rem;
  color: #efefea;
}

.site-footer__copy a:hover {
  color: #00ff88;
}

.site-footer :focus-visible {
  outline-color: #00ff88;
}

.social-links {
  display: flex;
  gap: .6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.social-links a {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  font-size: 1rem;
  color: #efefea;
  text-decoration: none;
  border: 1px solid rgb(239 239 234 / .25);
  border-radius: 50%;
  transition: color .3s var(--cc-ease), border-color .3s var(--cc-ease), box-shadow .3s var(--cc-ease), transform .3s var(--cc-ease);
}

.social-links a:hover {
  color: #00ff88;
  border-color: #00ff88;
  box-shadow: 0 0 12px rgb(0 255 136 / .4);
  transform: translateY(-2px);
}

@media (max-width: 575.98px) {
  .site-footer__inner {
    flex-direction: column;
    text-align: center;
  }
}

/* 15. Back to top, with a ring that fills as you scroll ------------------------------- */
.back-to-top {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: calc(clamp(1rem, 3vw, 2rem) + var(--lift, 0px));
  z-index: 1025;
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  font-size: 1.1rem;
  color: var(--cc-text);
  text-decoration: none;
  background: var(--cc-nav-bg);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: 50%;
  opacity: 0;
  visibility: hidden;
  transform: translateY(1rem);
  transition: opacity .4s var(--cc-ease), transform .4s var(--cc-ease), visibility 0s linear .4s, color .3s var(--cc-ease);
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.back-to-top:hover {
  color: var(--cc-accent-text);
}

.back-to-top svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.back-to-top .ring-track {
  fill: none;
  stroke: var(--cc-line-strong);
  stroke-width: 1;
}

.back-to-top .ring-fill {
  fill: none;
  stroke: var(--cc-laser);
  stroke-width: 1.5;
  stroke-dasharray: 100;
  stroke-dashoffset: calc(100 - var(--progress, 0) * 100);
}

/* 16. Not found page --------------------------------------------------------------------- */
.not-found {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding-block: calc(var(--cc-nav-h) + 3rem) 4rem;
  text-align: center;
}

.not-found__code {
  margin: 0;
  font-family: var(--cc-font-display);
  font-size: clamp(6rem, 3rem + 14vw, 13rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.2;
  color: var(--cc-accent-text);
}

.not-found .laser {
  width: min(22rem, 70%);
  margin: 1.5rem auto 2rem;
}

.not-found h1 {
  font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
}

.not-found p {
  margin-inline: auto;
}

.not-found__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
}

/* 17. Motion ------------------------------------------------------------------------------ */
@keyframes cc-reveal {
  from { opacity: 0; transform: translateY(1.5rem); }
}

.js .reveal {
  opacity: 0;
}

.js .reveal.is-visible {
  opacity: 1;
  animation: cc-reveal 1s var(--cc-ease) var(--reveal-delay, 0ms) backwards;
}

html.theme-changing,
html.theme-changing *,
html.theme-changing *::before,
html.theme-changing *::after {
  transition: background-color .45s ease, color .45s ease, border-color .45s ease, fill .45s ease, stroke .45s ease !important;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  .hero__scroll::after {
    display: none;
  }
}

/* 18. Print ------------------------------------------------------------------------------- */
@media print {
  .site-nav,
  .service-index,
  .back-to-top,
  .cta-band,
  .social-links,
  .hero__media,
  .page-hero__media,
  .hero::before,
  .page-hero::before,
  .hero__scroll {
    display: none !important;
  }

  body,
  .hero,
  .page-hero,
  .card-cc,
  .contact-card,
  .site-footer {
    color: #000 !important;
    background: #fff !important;
  }

  .hero,
  .page-hero {
    min-height: 0;
    padding-block: 2rem;
  }

  .js .reveal {
    opacity: 1;
  }
}


/* 14. Refresh (November 2026): hero film, UK coverage, open cards, photo band ----------------- */
.hero__title,
.page-hero__title {
  text-shadow: 0 2px 30px rgb(0 0 0 / .35);
}

.hero__lead,
.page-hero__lead {
  text-shadow: 0 1px 18px rgb(0 0 0 / .5);
}

/* The still shows first. The film fades in over it once it is actually playing,
   and dips to dark for a moment at each loop so the restart reads as a cut. */
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.8) contrast(1.06) brightness(.8);
  opacity: 0;
  transition: opacity 1.4s var(--cc-ease);
}

.hero__media.is-playing .hero__video {
  opacity: 1;
}

.hero__media.is-playing .hero__video.is-dipping {
  opacity: 0;
  transition-duration: .8s;
}

.hero__video-toggle {
  --nav-fg: #efefea;
  position: absolute;
  right: 1.25rem;
  bottom: 1.5rem;
  z-index: 2;
  background: rgb(10 10 10 / .35);
  border-color: rgb(239 239 234 / .45);
}

.hero__video-toggle:hover {
  color: #00ff88;
  border-color: #00ff88;
}

.hero__video-toggle:focus-visible {
  outline-color: #00ff88;
}

@media (min-width: 768px) {
  .hero__video-toggle {
    right: 2rem;
    bottom: 2rem;
  }
}

/* UK coverage: a site-plan grid behind a laser-line map of the four nations */
.coverage {
  position: relative;
  overflow: hidden;
  color: #efefea;
  background: var(--cc-deep);
}

.coverage::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgb(0 255 136 / .045) 1px, transparent 1px),
    linear-gradient(90deg, rgb(0 255 136 / .045) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 60% 75% at 72% 50%, #000 25%, transparent 75%);
  mask-image: radial-gradient(ellipse 60% 75% at 72% 50%, #000 25%, transparent 75%);
  pointer-events: none;
}

.coverage__inner {
  position: relative;
  display: grid;
  gap: 3.5rem;
  align-items: center;
}

@media (min-width: 992px) {
  .coverage__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
    gap: 6rem;
  }
}

.coverage h2 {
  max-width: 11ch;
  margin-bottom: 1.75rem;
  font-size: clamp(2.6rem, 2rem + 3vw, 4.5rem);
  line-height: 1.02;
}

.coverage__copy > p {
  max-width: 36rem;
  color: rgb(239 239 234 / .72);
}

.coverage__copy > .lead {
  color: rgb(239 239 234 / .88);
}

.coverage__legend {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin: 2.25rem 0 1.5rem;
  font-size: .95rem;
}

.coverage__legend::before {
  content: "";
  flex: none;
  width: .7rem;
  height: .7rem;
  background: #00ff88;
  border-radius: 50%;
  box-shadow: 0 0 0 5px rgb(0 255 136 / .18);
}

.uk-map {
  display: block;
  width: 100%;
  max-width: 22rem;
  height: auto;
  margin-inline: auto;
  overflow: visible;
}

.uk-map__land {
  fill: rgb(0 255 136 / .06);
  stroke: rgb(0 255 136 / .75);
  stroke-width: 1;
  stroke-linejoin: round;
}

.uk-map__routes path {
  fill: none;
  stroke: #00ff88;
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-dasharray: 1;
  opacity: .6;
}

.uk-map__cities circle {
  fill: #efefea;
}

.uk-map__hq {
  fill: #00ff88;
}

.uk-map__pulse {
  fill: none;
  stroke: #00ff88;
  stroke-width: 1.5;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

/* The routes draw out from the base as the map arrives; the base then pulses gently */
.js .uk-map__routes path {
  stroke-dashoffset: 1;
}

.js .coverage__map.is-visible .uk-map__routes path {
  animation: cc-route 1.4s var(--cc-ease) calc(.3s + var(--i) * 80ms) forwards;
}

.js .coverage__map.is-visible .uk-map__pulse {
  animation: cc-pulse 2.8s ease-out 1.9s infinite;
}

@keyframes cc-route {
  to { stroke-dashoffset: 0; }
}

@keyframes cc-pulse {
  from { opacity: .9; transform: scale(1); }
  to { opacity: 0; transform: scale(3.4); }
}

/* How we work: a real sequence, so the numbers stay, drawn as outlines on the beam */
.step::before {
  margin-bottom: 1.25rem;
  font-size: clamp(3.5rem, 2.75rem + 2.5vw, 5rem);
  color: transparent;
  -webkit-text-stroke: 1px var(--cc-laser);
}

[data-bs-theme="light"] .step::before {
  color: var(--cc-accent-text);
  -webkit-text-stroke: 0;
}

.step::after {
  background: linear-gradient(90deg, var(--cc-laser) 0, var(--cc-laser) 3.5rem, var(--cc-line-strong) 3.5rem);
}

/* Values and accreditations: open columns on a rule instead of boxed cards */
.cards-open .card-cc {
  background: transparent;
  border-width: 1px 0 0;
  border-color: var(--cc-line-strong);
}

.cards-open .card-cc__body {
  padding: 1.75rem 0 0;
}

/* Full-width photograph with a statement, to break up runs of text and cards */
.photo-band {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: end;
  min-height: clamp(24rem, 60vh, 36rem);
  padding-block: 6rem 4rem;
  overflow: hidden;
  color: #efefea;
  background: #0a0a0a;
}

.photo-band__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.9) contrast(1.05) brightness(.88);
}

.photo-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgb(10 10 10 / .1) 0%, rgb(10 10 10 / .3) 45%, rgb(10 10 10 / .88) 100%);
}

.photo-band h2 {
  max-width: 14ch;
  margin-bottom: 1rem;
  font-size: clamp(2.4rem, 1.8rem + 3vw, 4.25rem);
  line-height: 1.02;
  text-shadow: 0 2px 24px rgb(0 0 0 / .4);
}

.photo-band p {
  max-width: 34rem;
  margin: 0;
  font-size: 1.125rem;
  color: rgb(239 239 234 / .88);
  text-shadow: 0 1px 14px rgb(0 0 0 / .5);
}

@media (prefers-reduced-motion: reduce) {
  .js .uk-map__routes path {
    stroke-dashoffset: 0;
  }

  .uk-map__pulse {
    display: none;
  }
}