/* ==========================================================================
   Enhanced Group – site stylesheet (the only stylesheet; hand-written, no build step)

    1. Fonts                  8. Section curves & floating shapes   15. Forms
    2. Design tokens          9. Headings & text blocks             16. Contact, careers & 404
    3. Base                  10. Cards & features                   17. Cookie policy document
    4. Layout & grid         11. Logo carousel & logo grid          18. Cookie consent banner
    5. Buttons               12. Case study grid (Our Work)         19. Page-specific adjustments
    6. Header & navigation   13. Case studies                       20. Scroll reveal & reduced motion
    7. Hero (home)           14. Footer

   Screen ranges used throughout (the same steps as the original theme):
   xs ≤480px · sm 481–768px · md 769–992px · lg 993–1200px. Below 1200px the body text
   drops to 15px, so em-based spacing shrinks with it, exactly like the original site.
   ========================================================================== */

/* 1. Fonts (self-hosted, variable weight) ---------------------------------- */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/fonts/inter-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/fonts/inter-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 100 900; font-display: swap; src: url(/fonts/inter-italic-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 100 900; font-display: swap; src: url(/fonts/inter-italic-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Nunito Sans"; font-style: normal; font-weight: 200 900; font-display: swap; src: url(/fonts/nunito-sans-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Nunito Sans"; font-style: normal; font-weight: 200 900; font-display: swap; src: url(/fonts/nunito-sans-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Nunito Sans"; font-style: italic; font-weight: 200 900; font-display: swap; src: url(/fonts/nunito-sans-italic-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Nunito Sans"; font-style: italic; font-weight: 200 900; font-display: swap; src: url(/fonts/nunito-sans-italic-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Spartan"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/fonts/spartan-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Spartan"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/fonts/spartan-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* 2. Design tokens ----------------------------------------------------------
   Inner pages use Spartan headings and a slightly deeper accent; the home page
   (body.home) uses Inter and a lighter accent, exactly as the original site. */
:root {
  --accent: #5187ac;
  --alt: #222e41;
  --text: #181818;
  --dark: #191919;
  --grey: #eceeef;
  --border: #dedede;
  --white: #fff;
  --font-heading: "Spartan", Arial, Helvetica, sans-serif;
  --font-body: "Nunito Sans", Arial, Helvetica, sans-serif;
  --font-menu: "Nunito Sans", Arial, Helvetica, sans-serif;
  --heading-weight: 600;
  --container: 1200px;
  --gutter: 40px;          /* space between columns */
  --radius: 10px;
  --header-h: 105px;
  --sticky-h: 50px;
}
body.home {
  --accent: #5a9cca;
  --alt: #000;
  --font-heading: "Inter", Arial, Helvetica, sans-serif;
  --font-menu: "Inter", Arial, Helvetica, sans-serif;
  --heading-weight: 700;
}

/* 3. Base ------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: 400 16px/1.5 var(--font-body);
  color: var(--text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
main { display: block; overflow-x: clip; }   /* decorative shapes may hang off the page edges */
@media (max-width: 1199px) { body { font-size: 15px; } }   /* like the original: text and em-based spacing shrink slightly */
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; transition: color .3s; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--font-heading); font-weight: var(--heading-weight); letter-spacing: -1px; }
b, strong { font-weight: 700; }
small { font-size: .8em; }
ul { margin: 0; padding: 0; }
button { font: inherit; }
.icon { width: 1em; height: 1em; fill: currentColor; display: inline-block; flex: none; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 1000; padding: 10px 16px; background: var(--accent); color: #fff; border-radius: 50px; }
.skip-link:focus { top: 16px; }

/* 4. Layout & grid ------------------------------------------------------------ */
/* Containers. --bleed is the distance from the container edge to the page edge (used by push rows). */
.container { width: min(var(--container), 100% - 60px); margin-inline: auto; position: relative; --bleed: max(30px, calc(50vw - 600px)); }
.container--wide { width: 100%; }
.container--narrow { width: min(620px, 100% - 60px); }
.container--800 { width: min(800px, 100% - 60px); }      /* cookie policy */
/* Boxed row inside a full-width section: below 1240px the original keeps a 20px (not 30px) margin at the page edges. */
.container--tight { width: min(var(--container), 100% - 40px); --bleed: max(20px, calc(50vw - 600px)); }
.rel { position: relative; }
/* Rounded light panel around a column's content (the contact and careers forms) */
.panel { background: #f7f7f5; border-radius: var(--radius); padding-inline: 60px; }
@media (max-width: 580px) { .panel { padding-inline: 30px; } }

/* Sections. Vertical spacing uses em so it shrinks with the body font on phones.
   Spacing scale (same steps as the old page builder):
   xs 8px · sm 16px · md 32px · lg 64px · xl 128px · 2xl 256px (+ a few fixed values) */
.section { position: relative; isolation: isolate; }
.section--dark { background: var(--dark); color: #fff; }
.section--dark::before {             /* black fade at the top and bottom of every dark section */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(#000 0%, transparent 25%, transparent 55%, #000 100%);
}
.section--dark.has-bottom-edge::before { background: linear-gradient(#000 0%, transparent 25%, transparent 35%, #000 100%); }
.section--dark > .container { z-index: 2; }
.section--grey { background: var(--grey); }
.section--light { background: #f7f7f5; }
.section--white { background: var(--white); }

.pt-0 { padding-top: 0; } .pt-xs { padding-top: .5em; } .pt-sm { padding-top: 1em; } .pt-md { padding-top: 2em; }
.pt-lg { padding-top: 4em; } .pt-xl { padding-top: 8em; } .pt-2xl { padding-top: 16em; }
.pb-0 { padding-bottom: 0; } .pb-xs { padding-bottom: .5em; } .pb-sm { padding-bottom: 1em; } .pb-md { padding-bottom: 2em; }
.pb-lg { padding-bottom: 4em; } .pb-xl { padding-bottom: 8em; } .pb-2xl { padding-bottom: 16em; }
.pb-90 { padding-bottom: 5.625em; }
@media (max-width: 480px) {
  .xs\:pt-0 { padding-top: 0; } .xs\:pt-md { padding-top: 2em; } .xs\:pt-lg { padding-top: 4em; } .xs\:pt-xl { padding-top: 8em; }
  .xs\:pb-0 { padding-bottom: 0; } .xs\:pb-md { padding-bottom: 2em; } .xs\:pb-lg { padding-bottom: 4em; } .xs\:pb-xl { padding-bottom: 8em; }
}
@media (min-width: 481px) and (max-width: 768px) {
  .sm\:pt-0 { padding-top: 0; } .sm\:pt-md { padding-top: 2em; } .sm\:pt-lg { padding-top: 4em; } .sm\:pt-xl { padding-top: 8em; }
  .sm\:pb-0 { padding-bottom: 0; } .sm\:pb-md { padding-bottom: 2em; } .sm\:pb-lg { padding-bottom: 4em; } .sm\:pb-xl { padding-bottom: 8em; }
}
@media (min-width: 769px) and (max-width: 992px) {
  .md\:pt-0 { padding-top: 0; } .md\:pt-lg { padding-top: 4em; } .md\:pt-xl { padding-top: 8em; }
  .md\:pb-0 { padding-bottom: 0; } .md\:pb-lg { padding-bottom: 4em; } .md\:pb-xl { padding-bottom: 8em; }
}

/* Shaped section edges (waves) are full-width images laid over the section's top or bottom edge. */
.edge { position: absolute; left: 0; width: 100%; height: auto; z-index: 2; pointer-events: none; user-select: none; }
.edge--top { top: -1px; }
.edge--bottom { bottom: -1px; }

/* Background image layer (heroes); JS adds a gentle parallax on wide screens.
   Either style="background-image:url(…)" or style="--bg:url(LARGE); --bg-sm:url(SMALL)" (absolute URLs);
   the small image, when given, is used up to 767px. */
.section__bg { position: absolute; inset: 0; background-image: var(--bg); background-size: cover; background-position: center; }
@media (max-width: 767px) { .section__bg { background-image: var(--bg-sm, var(--bg)); } }

/* Grid: 12 columns that collapse the same way the old theme did.
   col-N sets the desktop width; lg-/md-/sm-/xs-N override it in that screen range.
   Without overrides, columns of 4+ go full width at ≤992px, quarter and sixth columns become
   halves, and those go full width at ≤480px. */
.row { display: flex; flex-wrap: wrap; margin-inline: calc(var(--gutter) / -2); }
.row--gap-30 { --gutter: 30px; }
.row--gap-0 { --gutter: 0px; }
.col { flex: 0 0 100%; max-width: 100%; padding-inline: calc(var(--gutter) / 2); min-width: 0; }
.col-2 { flex-basis: 16.6667%; max-width: 16.6667%; }
.col-3 { flex-basis: 25%; max-width: 25%; }
.col-4 { flex-basis: 33.3333%; max-width: 33.3333%; }
.col-5 { flex-basis: 41.6667%; max-width: 41.6667%; }
.col-6 { flex-basis: 50%; max-width: 50%; }
.col-7 { flex-basis: 58.3333%; max-width: 58.3333%; }
.col-8 { flex-basis: 66.6667%; max-width: 66.6667%; }
.col-9 { flex-basis: 75%; max-width: 75%; }
.col-10 { flex-basis: 83.3333%; max-width: 83.3333%; }
.v-middle { align-self: center; }
.v-bottom { align-self: flex-end; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.pad-double { padding-inline: 40px; }
.pad-40 > * { margin-inline: 40px; }
.pad-20 { padding-inline: 20px; }     /* column with a 20px inner padding */
.pad-0 { padding-inline: 0; }
.max-480 { max-width: 480px; }        /* text column beside a bleeding image */

@media (max-width: 992px) {
  .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10 { flex-basis: 100%; max-width: 100%; }
  .col-2, .col-3 { flex-basis: 50%; max-width: 50%; }
}
@media (max-width: 480px) { .col-2, .col-3 { flex-basis: 100%; max-width: 100%; } }
@media (min-width: 993px) and (max-width: 1200px) {
  .lg-3 { flex-basis: 25%; max-width: 25%; } .lg-4 { flex-basis: 33.3333%; max-width: 33.3333%; }
  .lg-6 { flex-basis: 50%; max-width: 50%; } .lg-12 { flex-basis: 100%; max-width: 100%; }
}
@media (min-width: 769px) and (max-width: 992px) {
  .md-3 { flex-basis: 25%; max-width: 25%; } .md-4 { flex-basis: 33.3333%; max-width: 33.3333%; }
  .md-6 { flex-basis: 50%; max-width: 50%; } .md-12 { flex-basis: 100%; max-width: 100%; }
}
@media (min-width: 481px) and (max-width: 768px) {
  .sm-3 { flex-basis: 25%; max-width: 25%; } .sm-4 { flex-basis: 33.3333%; max-width: 33.3333%; }
  .sm-6 { flex-basis: 50%; max-width: 50%; } .sm-12 { flex-basis: 100%; max-width: 100%; }
}
@media (max-width: 480px) {
  .xs-3 { flex-basis: 25%; max-width: 25%; } .xs-4 { flex-basis: 33.3333%; max-width: 33.3333%; }
  .xs-6 { flex-basis: 50%; max-width: 50%; } .xs-12 { flex-basis: 100%; max-width: 100%; }
  .pad-40 > * { margin-inline: 20px; }
}

/* Push rows sit in the normal container, but their first (push-left) or last (push-right) column
   stretches out to the edge of the page – used for images that bleed off the side. --w is that
   column's own width. Below 1240px the whole row spans the page: the bleeding column takes its
   share of the page width with no padding and the other columns keep a 20px inset (40px in
   .pad-20 columns). .row--edge is an ordinary row that spans the page the same way. Below 993px
   the columns stack, except those marked sm-6 / md-6, which stay side by side on tablets. */
.row--push-left, .row--push-right { flex-wrap: nowrap; }
.row--push-left > .col:first-child { margin-left: calc(-1 * var(--bleed)); flex-basis: calc(var(--w, 50%) + var(--bleed)); max-width: none; }
.row--push-right > .col:last-child { margin-right: calc(-1 * var(--bleed)); flex-basis: calc(var(--w, 25%) + var(--bleed)); max-width: none; }
.row--push-left > .col-2:first-child, .row--push-right > .col-2:last-child { --w: 16.6667%; }
.row--push-left > .col-3:first-child, .row--push-right > .col-3:last-child { --w: 25%; }
.row--push-left > .col-4:first-child, .row--push-right > .col-4:last-child { --w: 33.3333%; }
.row--push-left > .col-5:first-child, .row--push-right > .col-5:last-child { --w: 41.6667%; }
.row--push-left > .col-6:first-child, .row--push-right > .col-6:last-child { --w: 50%; }
.row--push-left > .col-7:first-child, .row--push-right > .col-7:last-child { --w: 58.3333%; }
.row--push-left > .col-8:first-child, .row--push-right > .col-8:last-child { --w: 66.6667%; }
.row--push-left > .col-9:first-child, .row--push-right > .col-9:last-child { --w: 75%; }
.row--push-left > .col-10:first-child, .row--push-right > .col-10:last-child { --w: 83.3333%; }
/* bean-shaped images in push rows tuck 6em in towards the text */
.row--push-right > .col:last-child .shape-bean-right { margin-left: -6em; }
.row--push-left > .col:first-child .shape-bean-left { margin-left: 6em; }
@media (max-width: 1239px) {
  .row--push-left, .row--push-right, .row--edge { margin-inline: calc(-1 * var(--bleed)); }
  .row--push-left > .col, .row--push-right > .col, .row--edge > .col { padding-inline: 20px; }
  .row--push-left > .col:first-child, .row--push-right > .col:last-child { margin-inline: 0; padding-inline: 0; flex-basis: var(--w, 50%); }
  .row--push-left > .col.pad-20, .row--push-right > .col.pad-20 { padding-inline: 40px; }
}
@media (max-width: 992px) {
  .row--push-left, .row--push-right { flex-wrap: wrap; }
  .row--push-left > .col:first-child, .row--push-right > .col:last-child { margin-inline: 0; flex-basis: 100%; max-width: 100%; }
  .row--push-right > .col:last-child .shape-bean-right, .row--push-left > .col:first-child .shape-bean-left { margin-left: 0; }
}
@media (min-width: 769px) and (max-width: 992px) {
  .row--push-left > .col.md-6:first-child, .row--push-right > .col.md-6:last-child { flex-basis: 50%; max-width: 50%; }
}
@media (min-width: 481px) and (max-width: 768px) {
  .row--push-left > .col.sm-6:first-child, .row--push-right > .col.sm-6:last-child { flex-basis: 50%; max-width: 50%; }
}

/* Spacers (the old page builder's "separators") */
.space-xs { height: .5em; } .space-sm { height: 1em; } .space-25 { height: 25px; } .space-md { height: 2em; }
.space-40 { height: 40px; } .space-45 { height: 45px; } .space-lg { height: 4em; } .space-100 { height: 100px; }
.space-xl { height: 8em; } .space-2xl { height: 16em; }

/* Visibility helpers (screen ranges as above) */
@media (max-width: 480px) { .hide-xs { display: none !important; } }
@media (min-width: 481px) and (max-width: 768px) { .hide-ms { display: none !important; } }
@media (min-width: 769px) and (max-width: 992px) { .hide-sm { display: none !important; } }
@media (min-width: 993px) and (max-width: 1200px) { .hide-md { display: none !important; } }
@media (min-width: 1201px) { .hide-lg { display: none !important; } }
@media (max-width: 768px) { .hide-sm-down { display: none !important; } }
@media (min-width: 769px) { .show-sm-down { display: none !important; } }
@media (min-width: 993px) { .hide-lg-up { display: none !important; } }

/* 5. Buttons ---------------------------------------------------------------- */
/* Filled buttons have no border (outline buttons do); every button keeps a .25em gap below it. */
.btn {
  --btn-color: var(--accent);
  --btn-text: #fff;
  display: inline-block;
  font: 400 14px/1 var(--font-body);
  padding: .9em 1.1em;
  margin-bottom: .25em;
  border: 0;
  border-radius: 50px;
  background: var(--btn-color);
  color: var(--btn-text);
  box-shadow: 0 0 0 4em var(--btn-color) inset;
  transition: all .3s ease;
  text-align: center;
  cursor: pointer;
}
.btn:hover { box-shadow: 0 0 0 4em var(--btn-color) inset, 0 10px 20px rgba(0, 0, 0, .2); }   /* filled: lifts */
.btn--lg { font-size: 16px; padding: 1.2em 1.8em; }
.btn--outline { background: transparent; color: var(--btn-color); border: 1px solid var(--btn-color); box-shadow: 0 0 0 0 var(--btn-color) inset; }
.btn--outline:hover { box-shadow: 0 0 0 4em var(--btn-color) inset, 0 5px 15px rgba(0, 0, 0, .1); color: var(--btn-text); }  /* outline: fills in */
.btn--light { --btn-color: #fff; --btn-text: var(--accent); }
.btn--white { --btn-color: #fff; --btn-text: var(--accent); color: var(--accent); }
.buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.text-center .buttons { justify-content: center; }
@media (max-width: 480px) { .btn, .btn--lg { font-size: 13px; } }

/* 6. Header & navigation ---------------------------------------------------- */
.site-header {
  position: absolute; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--header-h); padding: 0 40px;
  display: flex; align-items: center; justify-content: space-between;
  color: #fff;
}
.site-header .logo { display: block; height: 100px; align-self: flex-start; margin-top: 5px; }
.site-header .logo img { height: 100%; width: auto; }
.site-header .logo .logo--dark { display: none; }

.nav { display: flex; }
.nav a { display: block; position: relative; font: 400 15px/50px var(--font-menu); padding: 0 20px; white-space: nowrap; }
.nav > li { position: relative; list-style: none; }
.nav > li > a::after {                    /* underline for the current page */
  content: ""; position: absolute; left: 20px; right: 20px; top: 47px; height: 3px;
  background: var(--accent); opacity: 0; transition: opacity .3s;
}
.nav > li.current > a::after, .nav > li.current-parent > a::after { opacity: .5; }
.nav > li > a:hover { color: var(--accent); }
.nav .sub-menu {
  position: absolute; top: 50px; left: 0; width: 240px; padding: 10px 0; list-style: none;
  background: #fff; color: var(--text); box-shadow: 0 2px 20px rgba(0, 0, 0, .15);
  opacity: 0; visibility: hidden; transform: translateY(-20px); transition: .2s;
}
.nav > li:hover > .sub-menu, .nav > li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav .sub-menu a { font-size: 15px; line-height: 22.5px; padding: 7.5px 18.75px; white-space: normal; }
.nav .sub-menu a:hover, .nav .sub-menu .current > a { color: var(--accent); }

/* Sticky header, at every screen width (same as the original): once the page has scrolled more than
   300px site.js adds .is-sticky – a slim white bar with the dark logo (and, below 1200px, a dark menu
   button), parked just above the viewport – and .is-open a moment later, which slides it down in .2s.
   Scrolling back above 300px adds .is-closing, which slides it up again before the classes go. */
.site-header.is-sticky {
  position: fixed; height: var(--sticky-h); background: #fff; color: var(--text);
  box-shadow: 0 2px 20px rgba(0, 0, 0, .15); transform: translateY(-100%);
}
.site-header.is-sticky.is-open { transform: none; transition: transform .2s; }   /* "none", so the fixed menu panel inside is not trapped in the bar */
.site-header.is-sticky.is-open.is-closing { transform: translateY(-100%); }
.site-header.is-sticky .logo { height: 50px; margin-top: 0; align-self: center; }
.site-header.is-sticky .logo--light { display: none; }
.site-header.is-sticky .logo .logo--dark { display: block; }

.menu-toggle, .nav-close { display: none; background: none; border: 0; padding: 0; color: inherit; cursor: pointer; }

@media (max-width: 1199px) {
  /* Below 1200px the header is a dark 53px bar with a menu button that scrolls away with the page;
     once sticky it is a 48px white bar with the dark logo and a dark menu button. */
  .site-header { height: 53px; padding: 0 30px; align-items: flex-start; justify-content: flex-start; gap: 17px; background: var(--dark); }
  .site-header.is-sticky { height: 48px; }
  .site-header .logo, .site-header.is-sticky .logo { height: 48px; margin-top: 5px; align-self: auto; }
  .site-header.is-sticky .logo { margin-top: 0; }
  .menu-toggle {                         /* three thin lines, drawn in CSS */
    display: block; position: relative; width: 24px; height: 20px; margin-top: 14px;
    background: linear-gradient(currentColor 0 0) 0 0 / 100% 2px no-repeat,
                linear-gradient(currentColor 0 0) 0 9px / 100% 2px no-repeat,
                linear-gradient(currentColor 0 0) 0 18px / 100% 2px no-repeat;
  }
  .menu-toggle .icon { display: none; }
  .nav-panel {
    position: fixed; top: 0; bottom: 0; left: 0; width: 260px; z-index: 110; overflow-y: auto;
    background: var(--dark); color: #fff; padding: 20px 0 40px; text-align: center;
    transform: translateX(-100%); transition: transform .3s ease; visibility: hidden;
  }
  body.menu-open .nav-panel { transform: none; visibility: visible; }
  body.menu-open::after { content: ""; position: fixed; inset: 0; z-index: 99; background: rgba(0, 0, 0, .5); }   /* dims the page, below the header and its menu panel */
  .nav-panel .logo-mobile { display: block; width: 140px; margin: 0 auto 20px; }
  .nav-close { display: block; position: absolute; top: 12px; right: 14px; font-size: 20px; }
  .nav-close .icon { width: 18px; height: 22px; }
  .nav { flex-direction: column; }
  .nav a { font: 600 15px/1.1 var(--font-heading); text-transform: uppercase; padding: 15px 30px; }
  .nav > li > a::after { display: none; }
  .nav .sub-menu { position: static; width: auto; padding: 0 0 10px; background: none; color: #fff; box-shadow: none; opacity: 1; visibility: visible; transform: none; }
  .nav .sub-menu a { font-weight: 400; text-transform: none; padding: 8px 30px; opacity: .8; }
}

/* 7. Hero (home) ------------------------------------------------------------- */
.hero { padding: 16em 0; text-align: center; overflow: hidden; }
.hero .container { z-index: 3; }
.hero .display { font-size: 80px; line-height: 1.2; }
.hero .lead { font: 400 24px/1.4 var(--font-heading); margin: .5em 0 0; }
.hero .btn { margin-top: 32px; }
@media (max-width: 1199px) {
  .hero .lead { margin-top: 1.2em; }
  .hero .btn { margin-top: 30px; }        /* the 2em spacer above the button (2 × 15px) */
}
@media (max-width: 768px) {               /* the phone/tablet headline is the "large" size */
  .hero .display { font-size: 2.75rem; }
  .hero .lead { font-size: 1.4375rem; }
}
@media (max-width: 480px) {
  .hero .display { font-size: 2.15rem; }
  .hero .lead { font-size: 1.1rem; }
}

/* 8. Section curves & floating shapes ---------------------------------------
   Each rounded section corner is a quarter circle (15.83% of the page width)
   painted in the neighbouring section's colour. */
.curve {
  --fill: var(--grey);
  position: absolute; z-index: 2; pointer-events: none;
  width: 15.8333%; aspect-ratio: 1;
}
.curve--tl { top: -1px; left: 0; background: radial-gradient(farthest-side at 100% 100%, transparent calc(100% - 1px), var(--fill) 100%); }
.curve--tr { top: -1px; right: 0; background: radial-gradient(farthest-side at 0 100%, transparent calc(100% - 1px), var(--fill) 100%); }
.curve--bl { bottom: -1px; left: 0; background: radial-gradient(farthest-side at 100% 0, transparent calc(100% - 1px), var(--fill) 100%); }
.curve--br { bottom: -1px; right: 0; background: radial-gradient(farthest-side at 0 0, transparent calc(100% - 1px), var(--fill) 100%); }
.curve--black { --fill: #000; }
.curve--grey { --fill: var(--grey); }
.curve--wide { width: 15.92%; aspect-ratio: 398 / 371; }

/* Decorative "blob" images that drift gently while scrolling (see site.js).
   .float-anchor is a zero-height box at the top edge of a section that the shapes are positioned
   from: the 1200px container by default, the page edges with --wide. Shapes keep their natural
   size (unless one sets its own max-width) and are hidden up to 992px, like the original. */
.float-anchor { position: absolute; top: 0; left: 0; right: 0; width: min(var(--container), 100% - 60px); height: 0; margin-inline: auto; z-index: 3; }
.float-anchor--wide { width: 100%; }
.float-anchor--full { top: 8em; bottom: 5.625em; height: auto; z-index: 0; }
.float { position: absolute; z-index: 3; width: max-content; pointer-events: none; }
.float img { transition: transform 1.2s ease-out; }
.float--behind { z-index: -1; }
.float--middle { transform: translateY(-50%); }
@media (max-width: 992px) { .float { display: none; } }

/* 9. Headings & text blocks ------------------------------------------------- */
.accent { color: var(--accent); }
.h-2xl { font-size: 6.25rem; line-height: 1.1; }   /* "huge" page titles */
.h-xl { font-size: 4rem; line-height: 1.2; }
.h-lg { font-size: 2.75rem; line-height: 1.2; }
.h-md { font-size: 2.125rem; line-height: 1.3; }
.h-sm { font-size: 1.5rem; line-height: 1.4; }
.h-xs { font-size: 1.25rem; line-height: 1.5; }
.h-2xs { font-size: 1rem; line-height: 1.5; }
.fw-500 { font-weight: 500; }
/* Subheading under a heading: its size and the gap above it follow the heading size, like the original
   (normal .4em, large 1.2em, huge .5em – 1.4em below 1400px). Huge headings drop to 64px below 1200px,
   where huge and extra-large subheadings sit 1.2em below them. */
.sub { font: 400 1.5rem/1.4 var(--font-heading); margin: .5em 0 0; }
.h-2xl + .sub { font-size: 1.625rem; }
.h-lg + .sub { font-size: 1.4375rem; margin-top: 1.2em; }
.h-md + .sub { font-size: 1.25rem; margin-top: .4em; }
.super { font: 500 1rem/1.5 var(--font-heading); margin: 0 0 .3em; }
.super a { color: var(--accent); }
.headline { margin-bottom: 0; }
.headline b, .headline strong { color: var(--accent); font-weight: inherit; }
@media (max-width: 1399px) { .h-2xl + .sub { margin-top: 1.4em; } }
@media (max-width: 1199px) {
  .h-2xl { font-size: 4rem; }
  .h-2xl + .sub { font-size: 1.5rem; margin-top: 1.2em; }
  .h-xl + .sub { margin-top: 1.2em; }
}
@media (max-width: 480px) {
  .h-2xl { font-size: 2.7rem; }
  .h-xl { font-size: 2.5rem; }
  .h-lg { font-size: 2.15rem; }
  .sub { font-size: 1.2rem; }
  .h-2xl + .sub { font-size: 1.3rem; }
  .h-lg + .sub { font-size: 1.1rem; }
}
/* Small variants (contact, careers): after the phone sizes above on purpose */
.sub--sm { font-size: 1.0625rem; line-height: 1.5; margin-top: .7em; }      /* address / opening hours */
address.sub { font-style: normal; }
.super--sm { font-size: .75rem; line-height: 1.5; margin-bottom: 1.1em; }   /* "CONTACT US" above a medium heading */
.text { font-size: 1em; line-height: 1.5; }
.text a { color: var(--accent); }
.text ul { padding-left: 1.2em; margin: 0 0 1em; }

/* Closing call to action, and a divider with a label in the middle ("You'll be in great company"):
   the label is centred on the line in 60% of the text colour; the line takes no room of its own
   (the spacers around it set the rhythm). */
.cta-title { max-width: 750px; margin-inline: auto; }
.divider-text {
  display: flex; align-items: center; gap: .5em; margin: -.5em 0;
  font: 500 1.1rem/1 var(--font-heading); color: color-mix(in srgb, currentColor 60%, transparent);
}
.divider-text::before, .divider-text::after { content: ""; flex: 1; height: 1px; background: #ccc; }

/* Images: plain, rounded, zoom-on-hover, circular and the organic "blob" masks of the service pages.
   Rounded/zoom photos never grow past their natural size and sit centred in a wider column; the
   bottom margin stands in for the small gap an inline image leaves below it on the original. */
.img { display: block; width: fit-content; max-width: 100%; }
.text-center .img { margin-inline: auto; }
.text-right .img { margin-left: auto; }
.img img { width: auto; max-width: 100%; }
.img-rounded, .img-zoom { width: fit-content; max-width: 100%; margin: 0 auto .4em; border-radius: var(--radius); overflow: hidden; }
.img-zoom img { width: auto; transition: transform .65s ease-in-out; }
.img-zoom:hover img { transform: scale(1.1); }
.img-circle img { border-radius: 50%; }
[class*="shape-"] { width: 100%; }
[class*="shape-"] img { width: 100%; }
.shape-bean-right > *, .shape-bean-left > *, .shape-fluid-01 > * {
  display: block; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.shape-bean-right > * { -webkit-mask-image: url(/img/masks/bean-right.svg); mask-image: url(/img/masks/bean-right.svg); }
.shape-bean-left > * { -webkit-mask-image: url(/img/masks/bean-left.svg); mask-image: url(/img/masks/bean-left.svg); }
.shape-fluid-01 > * { -webkit-mask-image: url(/img/masks/fluid-01.svg); mask-image: url(/img/masks/fluid-01.svg); }

/* Icon + text line */
.icon-text { display: inline-flex; align-items: center; gap: .5em; }
.icon-text .icon { color: var(--accent); }
a.icon-text:hover { color: var(--accent); }

/* 10. Cards & features ------------------------------------------------------ */
/* Card with a photo and a title strip (home: core solutions). The strip is a fixed 120px from 768px;
   below that it just wraps the title. */
.card-image {
  display: block; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
  text-align: center; margin-bottom: 2em;
}
.card-image img { margin: 0 auto; }
.card-image__title { padding: 24px; font: 700 20px/30px var(--font-heading); letter-spacing: -1px; min-height: 120px; }
.card-image:hover .card-image__title { color: var(--accent); }
@media (max-width: 767px) { .card-image > .card-image__title { min-height: 0; padding: 22.5px; } }
/* …with a title, text and a "read more" link */
.card-image__body { padding: 24px; }
.card-image__body .card-image__title { padding: 0 0 .5em; min-height: 0; }
.card-image__text { font-size: 14.4px; line-height: 1.5; margin-bottom: 1em; }
.read-more { display: inline-flex; align-items: center; gap: .4em; font: 700 12px/2 var(--font-body); color: var(--accent); text-transform: uppercase; }
.read-more .icon { width: 1.4em; height: 1.4em; }
.read-more:hover { color: var(--text); }
/* Service cards (/services/) */
.card-image--service { margin-bottom: 0; }
.card-image--service .card-image__body { padding: 1.5em 1.5em 2.7em; }
.card-image--service .card-image__title { padding: 0; }
.card-image--service .card-image__text { font-size: 1em; line-height: 1.5; margin: 2em 0 1.3em; }
.card-image--service .read-more { display: flex; width: fit-content; margin-inline: auto; font-size: 13px; line-height: 18px; gap: 6.5px; }
.card-image--service .read-more .icon { width: 19px; height: 18px; stroke: currentColor; stroke-width: 20px; }  /* heavier, like the original icon */

/* Card with an icon, a title and text. Bordered white card (home: Popular Services) or plain
   (service and about pages). --large-icon: a 144px box around a 112px illustration; --small: a 90px
   box around a 75px one, left-aligned unless the column is centred. Sizes are in em so they shrink
   with the 15px body text below 1200px. */
.card-icon {
  background: #fff; border: 1px solid rgba(0, 0, 0, .1); border-radius: var(--radius);
  padding: 32px; text-align: center; transition: box-shadow .3s;
}
.card-icon:hover { box-shadow: 0 10px 40px rgba(0, 0, 0, .1); }
.card-icon__icon { width: 144px; height: 144px; margin: 0 auto; padding: 8px; }
.card-icon__icon img { width: 128px; height: 128px; }
.card-icon__title { font: 700 1.5em/1.4 var(--font-heading); letter-spacing: -1px; padding: .5em 0; margin: 0; }
.card-icon__text { font-size: 16px; line-height: 1.5; }
@media (max-width: 480px) { .card-icon { padding: 30px; } }
.card-icon--bordered { border: 1px solid rgba(0, 0, 0, .1); }
.card-icon:not(.card-icon--bordered) { border: 0; padding: 0; background: none; }
.card-icon:not(.card-icon--bordered):hover { box-shadow: none; }
.section--dark .card-icon:not(.card-icon--bordered) { color: #fff; }
.card-icon--large-icon .card-icon__icon { width: 9em; height: 9em; padding: 1em; }
.card-icon--large-icon .card-icon__icon img { width: 7em; height: 7em; }
.card-icon--small .card-icon__icon { width: 6em; height: 6em; padding: .5em; }
.card-icon--small .card-icon__icon img { width: 5em; height: 5em; }
.card-icon--small .card-icon__title { font-size: 1em; line-height: 1.4; }
:not(.text-center) > .card-icon--small { text-align: left; }
:not(.text-center) > .card-icon--small .card-icon__icon { margin-left: 0; padding-left: 0; }

/* "Popular Services" (home): heading block half the page wide from 993px; cards in rows of four
   (the cards of one row stack without a gap on phones and tablets, like the original). */
@media (min-width: 993px) { .section-intro { width: calc(50vw - 100px); margin-inline: auto; } }
@media (min-width: 481px) and (max-width: 992px) { .section-intro { padding-inline: 20px; } }
.card-grid .card-icon { padding: 2em; }
.card-grid .card-icon__icon { width: 9em; height: 9em; padding: .5em; }
.card-grid .card-icon__icon img { width: 8em; height: 8em; }

/* Feature (icon + title + short text), e.g. the sectors list. Icon, title and text scale with the
   body text; the title's line height follows the body text (24px / 22.5px). */
.feature { line-height: 1.5em; }
.feature .icon { font-size: 3.6em; }
.feature__title { font: 700 20.8px var(--font-heading); line-height: inherit; margin: 0; padding: 19.2px 0 20.8px; }
.feature__title b { font-weight: 900; color: var(--accent); }
.feature__text { font-size: .9em; line-height: 1.3; margin: 0; }
@media (max-width: 1199px) { .feature__title { padding-top: 18px; } }

/* 11. Logo carousel & logo grid --------------------------------------------- */
/* Carousel (home): logos sit at the top of their slot, like the original slider. */
.logo-carousel { overflow: hidden; }
.logo-carousel__track { display: flex; transition: transform .3s ease-out; }
.logo-carousel__item { flex: 0 0 calc(100% / var(--per-view, 6)); display: flex; justify-content: center; align-items: flex-start; }
.logo-carousel__item img { max-width: 100%; }
@media (max-width: 992px) { .logo-carousel { --per-view: 3; } }
@media (max-width: 768px) { .logo-carousel { --per-view: 2; } }
@media (max-width: 480px) { .logo-carousel { --per-view: 1; } }

/* Grid (About): one logo per row up to 768px. */
.logo-grid { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); }
.logo-grid__item { display: flex; align-items: center; justify-content: center; }
.logo-grid__item img { width: 100%; height: auto; }
@media (max-width: 768px) { .logo-grid { grid-template-columns: minmax(0, 1fr); } }

/* 12. Case study grid (Our Work) -----------------------------------------------
   Photo cards with the text laid over a dark gradient, plain bordered cards for posts without a
   photo; three across down to 769px, then one per row. Every card spans two auto rows; from 1200px
   a text-only card spans one, so when it starts a column the next card in that column moves up
   beneath it, as in the old masonry grid. The reading order stays the DOM order. */
.post-grid {
  --gap: 40px;
  display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: var(--gap);
  align-items: start;
}
.post-card {
  position: relative; grid-row: span 2; overflow: hidden; border-radius: var(--radius);
  background: #fff; color: #fff; box-shadow: none; transition: box-shadow .6s ease-in-out;
}
.post-card:hover { box-shadow: 0 7px 30px -10px rgba(133, 153, 162, .5), 0 12px 20px -14px rgba(0, 0, 0, .45); }
.post-card--text { border: 1px solid #ededed; color: var(--text); }
@media (min-width: 1200px) { .post-card--text { grid-row: span 1; } }
.post-card__media { display: block; overflow: hidden; }
.post-card__media img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; transition: transform .65s ease-in-out; }
.post-card:hover .post-card__media img { transform: scale(1.05); }
.post-card__body {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 1.5em 2em 2em;
  background: linear-gradient(0deg, rgba(0, 0, 0, .6) 0%, rgba(0, 0, 0, .5) 60%, rgba(0, 0, 0, 0) 100%);
}
.post-card--text .post-card__body { position: relative; background: none; }
.post-card__title {
  font-size: 1.5em; line-height: 1.4; margin: 0 0 .5em;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
}
.post-card__title a:hover, .post-card .read-more:hover { color: var(--accent); }
.post-card__excerpt {
  font-size: 14px; line-height: 1.5; margin: 0; opacity: .8;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
}
.post-card .read-more { display: flex; width: fit-content; gap: .2em; margin-top: 3.3333em; font-size: .75em; line-height: 2; color: inherit; }   /* 40px above at 16px text */
.post-card .read-more .icon { width: 1.7em; height: 1.7em; transition: transform .3s ease; }
.post-card .read-more:hover .icon { transform: translateX(.2em); }
@media (max-width: 768px) {
  .post-grid { grid-template-columns: minmax(0, 1fr); }
  .post-card { grid-row: auto; }
}

/* 13. Case studies -------------------------------------------------------------
   Dark strip behind the header (160px, 150px below 1200px), then the title, photo, text (with the
   Sector / Location / Improvements list beside it on some studies) and previous/next links. */
.case-band { height: 10em; background-color: #0a0a0a; }
.case { padding: 6em 0 0; }
.case__header { margin-bottom: 2em; }
.case__cat { font: 500 1rem/1.5 var(--font-heading); margin: 0 0 2rem; }
.case__cat a { color: var(--accent); transition: opacity .3s; }
.case__cat a:hover { opacity: .7; }
.case__title { font-size: 2.75rem; line-height: 1.2; font-weight: 700; }
@media (max-width: 480px) { .case__title { font-size: 2.15rem; } }

/* Photo; the dot mirrors the old one-slide slider (purely decorative) */
.case__media { position: relative; margin: 0 0 2em; }
.case__media img { width: 100%; }
.case__media::after {
  content: ""; position: absolute; left: 50%; bottom: 2.15em; width: 1.8em; height: 1.8em; margin-left: -.9em;
  border: 1px solid #e2e2e2; border-radius: 50%;
  background: radial-gradient(circle, #e2e2e2 .29em, transparent calc(.29em + 1px));
}

/* Text column. Without a details list the old theme left the first 15% of the row
   empty; with one, the list takes 30% on the left. Below 581px everything stacks. */
.case__body { display: grid; grid-template-columns: calc(30% - 2.8em) minmax(0, 1fr); column-gap: 4em; margin-bottom: 1em; }
.case__content { grid-column: 2; grid-row: 1; font-size: 1em; line-height: 1.5; max-width: none; margin: 0; }
.case__content:only-child { grid-column: 1 / -1; margin-left: calc(15% + .6em); }
.case__meta { grid-column: 1; grid-row: 1; display: flex; flex-wrap: wrap; align-content: flex-start; margin: 0 0 2em; font-size: 1em; }
.case__meta dt { flex: 1 0 50%; max-width: 50%; min-width: max-content; padding-right: .75em; font-weight: 800; }
.case__meta dd { flex: 1 0 50%; margin: 0; }   /* when a long label needs the room (tablets) the value wraps below it */
@media (max-width: 580px) {
  .case__body { display: flow-root; }   /* flow-root: its bottom margin adds to the last line's, as on the old site */
  .case__content:only-child { margin-left: 0; }
  .case__meta { margin-top: 1em; }
}

.case__content p, .case__content ul { margin: 0 0 1em; }   /* the last line keeps its margin, as on the old site */
.case__content ul { padding: 0; margin-left: 1em; }
.case__content li { margin-left: .5em; }
.case__content h2 { font: 600 1.5em/1.2 var(--font-heading); letter-spacing: -1px; margin: 0; padding-bottom: .1em; }   /* the old h5 */
.case__content h2 strong { font-weight: 900; }
.case__content .case__lead { margin-bottom: calc(2.5em / 1.5); }   /* a blank line below the opening title */
/* lines starting with "•" straight under the paragraph that introduces them */
.case__content p:has(+ .case__dots) { margin-bottom: 0; }
.case__content .case__dots { list-style: none; margin-left: 0; }
.case__dots li { margin: 0; }
.case__dots li::before { content: "• "; }
.case__video { max-width: 720px; aspect-ratio: 16 / 9; margin: 2.5em 0 3em; }
.case__video iframe { display: block; width: 100%; height: 100%; border: 0; }

/* Testimonial: large Spartan text under a grey quote mark. Either a <blockquote> or a
   <figure> holding the <blockquote> and a <figcaption> with the name. */
.case__content .case-quote { display: flow-root; margin: 0; padding: 1em 0 0; border: 0; font: 400 1.5em/1.5 var(--font-heading); }   /* flow-root: the last line's margin stays inside */
.case__content .case-quote::before {
  content: ""; display: block; width: calc(1.3em * 1434 / 1024); height: 1.3em; margin-bottom: 1.3em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1434 1024'%3E%3Cpath fill='%23000' fill-opacity='.2' d='M0 0v614h307l-205 410h308l204-410V0zm1434 0H819v614h308l-205 410h307l205-410z'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
}
.case__content .case-quote blockquote { margin: 0; padding: 0; border: 0; font: inherit; }
.case__content .case-quote p { margin: 0 0 1em; }
.case__content .case-quote figcaption { font-weight: 700; margin: 0 0 1em; }
.case__content .case-quote + p { margin-top: 2.5em; }   /* a blank line between a quote and the text after it */
/* Mason Street Furniture's quote has a rule down the left and more space after it */
.case__content .case-quote--ruled { padding: 4px 0 4px 20px; border-left: 4px solid currentColor; margin-bottom: 4em; }
.case__content .case-quote--ruled p { margin: 0; }
.case__content .case-quote--ruled figcaption { margin: .5em 0 0; }
.case__content .case-quote--ruled + h2 { margin-bottom: 1rem; }

/* Previous / next case study */
.prevnext {
  display: flex; flex-wrap: wrap; justify-content: space-between; margin: 0 0 8em; padding-top: 2.5em;
  border-top: 1px solid rgba(0, 0, 0, .1);
}
.prevnext__item { display: flex; align-items: center; gap: 1em; width: 50%; min-height: 6em; }
.prevnext__item--next { flex-direction: row-reverse; text-align: right; margin-left: auto; }
.prevnext__item img { width: 6em; height: 6em; object-fit: cover; flex: none; }
.prevnext__dir { display: block; font: 500 .9rem/1 var(--font-heading); padding-bottom: .5em; }
.prevnext__title {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
  font: 600 1.1rem/1.3 var(--font-heading); letter-spacing: -1px; transition: color .2s;
}
.prevnext__item:hover .prevnext__title { color: var(--accent); }
@media (max-width: 620px) {
  .prevnext { display: block; }
  .prevnext__item { width: 100%; }
  .prevnext__item img { display: none; }
  .prevnext__item--prev { padding-bottom: 1em; }
  /* the old theme keeps an empty slot for a missing link: a 1em gap above a lone "next", a 6em row below a lone "previous" */
  .prevnext__item--next:first-child { margin-top: 1em; }
  .prevnext:has(> .prevnext__item--prev:last-child)::after { content: ""; display: block; height: 6em; }
}

/* Image slider (supported by site.js; no page uses one yet). The dots sit on the photo, as in the old theme. */
.slider { position: relative; overflow: hidden; }
.slider img { width: 100%; }
.slider__track { display: grid; }
.slider__slide { grid-area: 1 / 1; opacity: 0; transition: opacity .5s ease; }
.slider__slide.is-active { opacity: 1; }
.slider__dots { position: absolute; left: 0; right: 0; bottom: 2em; display: flex; justify-content: center; }
.slider__dots button {
  position: relative; width: .6em; height: .6em; margin: .8em; padding: 0; border: 0; border-radius: 50%;
  background: #e2e2e2; cursor: pointer;
}
.slider__dots button::after {
  content: ""; position: absolute; left: -.6em; top: -.6em; width: 1.8em; height: 1.8em;
  border: 1px solid #e2e2e2; border-radius: 50%; opacity: 0; transition: opacity .3s;
}
.slider__dots button[aria-current="true"]::after, .slider__dots button:hover::after { opacity: 1; }

/* 14. Footer ------------------------------------------------------------------ */
.site-footer { background: #fff; color: var(--dark); }
.site-footer__main { padding: 8em 0 0; }
.site-footer__main .col { padding-bottom: 4em; }
.site-footer__main .col:first-child > img:first-child { width: 350px; }   /* the logo fills its column, up to 350px */
/* Column headings. (".site-footer h4" covers the markup until the headings become <p class="footer-title">.) */
.footer-title, .site-footer h4 { margin: 0; font: var(--heading-weight) 16px/24px var(--font-heading); letter-spacing: -1px; }
.contact-list { list-style: none; display: grid; gap: 1em; }
.contact-list li { display: flex; align-items: center; gap: .5em; font-size: .8em; line-height: 1.1; }   /* 12.8px, 12px below 1200px */
.contact-list .icon { width: 15px; height: 14px; }
.contact-list li:last-child { min-height: 15px; }   /* the original's VAT glyph is a pixel taller than the others */
.footer-menu { list-style: none; }
.footer-menu li { padding-bottom: .8em; line-height: 1; }
.footer-menu a { font-size: 14.4px; line-height: 1; }
.footer-menu a:hover { color: var(--accent); }
.social {
  display: inline-flex; width: 40px; height: 40px; border-radius: 50%; align-items: center; justify-content: center;
  box-shadow: 0 0 0 1px currentColor inset; color: var(--dark); transition: .3s;
}
.social .icon { width: 18px; height: 21px; }
.social:hover { background: var(--dark); color: #fff; }
.site-footer .tagline { opacity: .8; font-size: 14px; line-height: 22.4px; margin: 0; }
/* Case studies: on the original, two stray empty paragraphs around the tagline (these pages only) add
   half a line above it and a full line below it. */
main:has(> .case) + .site-footer .tagline { margin: 8px 0 16px; }
@media (max-width: 1199px) {
  .site-footer .tagline { line-height: 21px; }
  main:has(> .case) + .site-footer .tagline { margin: 7.5px 0 15px; }
}
.copy-bar { background: var(--dark); color: #fff; font-size: 12.8px; line-height: 24px; }
.copy-bar .container { display: flex; align-items: center; justify-content: space-between; min-height: 75px; flex-wrap: wrap; gap: 8px 24px; }
.copy-bar p { margin: 0; }
.copy-bar ul { list-style: none; display: flex; flex-wrap: wrap; column-gap: .26em; margin-right: -12.8px; }   /* gap: the space between the original's inline links */
.copy-bar li { padding: 0 12.8px; }
.copy-bar a { text-decoration: underline; }
.copy-bar a:hover { color: var(--accent); }
@media (max-width: 768px) {
  .copy-bar .container { justify-content: center; text-align: center; padding: 12px 0; row-gap: 24px; }
  .copy-bar ul { justify-content: center; margin-inline: -12.8px; }
}
@media (max-width: 767px) {   /* phones: the original serves slightly smaller footer details to mobile browsers */
  .footer-menu a { font-size: 13.5px; }
  .site-footer .social { width: 31px; height: 31px; }
  .site-footer .social .icon { width: 14px; height: 16px; }
  .copy-bar { font-size: 12px; line-height: 22.5px; }
  .copy-bar ul { margin-inline: -12px; }
  .copy-bar li { padding: 0 12px; }
}

/* 15. Forms (Contact, Contact Form, Careers) ------------------------------------
   Same look as the old Contact Form 7 forms: 40px between fields, white square-ish fields and an
   outline button on the contact forms; pill fields on a grey panel and a filled button on the
   careers form. Messages use the CF7 wording and colours. */
.form { position: relative; }
.form-row { margin-bottom: 2.5em; }
.form-row label { display: block; margin: 0; line-height: 1.5; }   /* the label sits right on the field */
.form-row--file label { margin-bottom: 1em; }
.form--contact label { font-weight: 600; }
.form input[type=text], .form input[type=email], .form input[type=file], .form textarea {
  display: block; width: 100%; font: inherit; line-height: 1; color: var(--text);
  background: #fff; border: 1px solid rgba(0, 0, 0, .1); border-radius: 3px;
  padding: .8em 1.2em; outline: 0; transition: border-color .5s, box-shadow .5s;
}
.form textarea { height: 150px; line-height: 1.5; padding: .8em; resize: vertical; }
.form input:focus, .form textarea:focus { border-color: var(--accent); box-shadow: 0 0 4px rgba(0, 0, 0, .1); }
.form ::placeholder { color: var(--text); opacity: .85; }
.form input[type=file], .form input[type=file]::file-selector-button { cursor: pointer; }
.form--career input[type=text], .form--career input[type=email], .form--career input[type=file] { background: transparent; border-radius: 50px; }
.form .hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Submit button: filled pill by default (careers), outline variant on the contact forms */
.form__submit {
  display: inline-block; height: 4em; padding: .25em 3em 0; border: 0; border-radius: 50px; cursor: pointer;
  font: 700 .8em/1 var(--font-body); color: #fff; background: var(--accent);
  box-shadow: 0 0 0 4em var(--accent) inset; transition: all .3s ease;
}
.form__submit--outline {
  height: 2.8em; padding: .15em 1.2em 0; font-size: .9em; color: var(--accent); background: transparent;
  border: 1px solid var(--accent); box-shadow: 0 0 0 0 var(--accent) inset;
}
.form__submit:hover, .form__submit:focus-visible { transform: translateY(-3px); box-shadow: 0 0 0 4em var(--accent) inset, 0 5px 15px rgba(0, 0, 0, .1); color: #fff; }
.form__submit:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.form button[disabled] { opacity: .6; cursor: wait; transform: none; }

/* Spinner under the button while the form is being sent (same place as CF7's) */
.form-actions { margin-bottom: 1em; }
.form-actions::after {
  content: ""; display: block; width: 24px; height: 24px; margin: 7px 24px 0; border-radius: 50%; visibility: hidden;
  background: radial-gradient(circle at 7px 7px, #fbfbfc 3px, transparent 3.5px) #23282d; opacity: .75;
}
.form.is-submitting .form-actions::after { visibility: visible; animation: form-spin 1s linear infinite; }
@keyframes form-spin { to { transform: rotate(360deg); } }

/* Field messages and the response box under the form (the old site kept the field border on errors) */
.form .field-error { display: block; color: var(--accent); font-size: 1em; margin: 0; padding-top: 1em; }
.form .is-invalid { border-color: rgba(0, 0, 0, .1); }
.form .is-invalid:focus { border-color: var(--accent); }
.form .form-status { margin: 2em .5em 1em; padding: .2em 1em; border: 2px solid #00a0d2; }
.form .form-status:empty { display: none; }
.form.is-sent .form-status { border-color: #46b450; }
.form.is-invalid .form-status { border-color: #ffb900; }
.form.is-failed .form-status { border-color: #dc3232; }

/* 16. Contact, careers & 404 ------------------------------------------------------ */
/* Phone and e-mail in large light text */
.contact-lines { font: 400 1.5rem/1.4 var(--font-heading); letter-spacing: -1px; color: var(--dark); margin: 0; }
.contact-lines a:hover { color: var(--accent); }
/* Large filled social icon (the footer uses the outline .social) */
.social--filled { width: 56px; height: 56px; color: #fff; background: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.social--filled .icon { width: 24px; height: 28px; }
.social--filled:hover { background: #fff; color: var(--accent); }
@media (max-width: 1199px) {
  .social--filled { width: 40px; height: 40px; }
  .social--filled .icon { width: 18px; height: 21px; }
}
/* Google map (an embedded Google Maps iframe, no API key): 20px corners, 700px tall at every width */
.map { width: 100%; height: 700px; border-radius: 20px; overflow: hidden; background: #e5e3df; }
.map iframe { display: block; width: 100%; height: 100%; border: 0; }

/* 404 page */
.error-hero { display: flex; align-items: center; min-height: 100vh; padding: 128px 0 180px; }
.error-hero .container { z-index: 3; }
.error-hero .super { font-size: 15px; line-height: 1.5; margin-bottom: 30px; }
@media (max-width: 1199px) { .error-hero { min-height: calc(100vh - 52px); } }
@media (max-width: 768px) { .error-hero { padding: 96px 0 120px; } }

/* 17. Cookie policy document ------------------------------------------------------- */
.doc { font-size: 14px; line-height: 24px; }
@media (max-width: 1199px) { .doc { line-height: 22.5px; } }   /* the old policy inherited the body line height */
.doc p { margin: 0 0 14px; }
.doc a { color: var(--accent); text-decoration: underline; }
.doc a[target=_blank]::after {              /* small "opens in a new tab" mark, as on the old policy */
  content: ""; display: inline-block; width: 10px; height: 10px; margin: 0 3px 0 5px; vertical-align: -1px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M4 1H1v8h8V6M6 1h3v3M9 1 4.5 5.5' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M4 1H1v8h8V6M6 1h3v3M9 1 4.5 5.5' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3C/svg%3E") no-repeat center / contain;
}
.doc h2, .doc h3 { font-size: 22px; line-height: 1.2; margin: 15px 0 10px; padding-bottom: 10px; }
.doc h4 { font-size: 15px; line-height: 1.2; margin: 5px 0; }
.doc ul { list-style: disc; margin: 0 0 15px 15px; padding: 0; }
.doc li { margin-left: 7px; }
.doc__updated { font-style: italic; }
.doc address { font-style: normal; margin: 0 0 14px; }
.doc .btn { text-decoration: none; }

/* A service in the "Placed cookies" list: a summary row that opens to show its cookies */
.cookie-service { background: rgba(239, 239, 239, .25); }
.cookie-service[open] { padding-bottom: 1px; }
.cookie-service summary {
  display: grid; grid-template-columns: 1fr auto 25px; align-items: center; gap: 15px;
  margin: 5px 0; padding: 5px 10px; background: rgba(239, 239, 239, .5); list-style: none; cursor: pointer;
}
.cookie-service summary::-webkit-details-marker { display: none; }
.cookie-service summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.doc .cookie-service h3 { font-size: 18px; margin: 0; padding: 0 5px; }
.cookie-service__cats { text-align: right; font-size: 14px; }
.cookie-service__chevron { width: 20px; height: 24px; justify-self: center; transition: transform .5s ease; }
.cookie-service[open] .cookie-service__chevron { transform: rotate(180deg); }
.cookie-service__info { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; padding: 0 15px 15px; }
.cookie-service__info h4, .cookie-service__info p { padding-inline: 15px; }
.cookie-table { width: 100%; margin: 0 0 10px; border-collapse: collapse; background: #fff; font-size: 14px; line-height: 24px; }
.cookie-table caption { caption-side: top; text-align: left; padding: 15px 30px; background: #fff; border: 1px solid #dadada; border-bottom: 0; font: 600 15px/18px var(--font-heading); letter-spacing: -1px; }
.cookie-table th, .cookie-table td { padding: 15px; border: 1px solid #dadada; text-align: left; vertical-align: top; }
.cookie-table th { background: #f7f7f7; font: 600 14px/18px var(--font-heading); letter-spacing: -1px; }
@media (max-width: 600px) {
  .cookie-service__info { grid-template-columns: 1fr; }
  .cookie-service summary { grid-template-columns: 1fr auto 20px; gap: 10px; }
  /* each cookie becomes a small "Name / Expiration / Function" list, like the old policy on phones */
  .cookie-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .cookie-table, .cookie-table tbody, .cookie-table tr, .cookie-table caption { display: block; }
  .cookie-table tr { border: 1px solid #dadada; border-top: 0; }
  .cookie-table td { display: block; position: relative; padding: 15px 15px 15px 115px; border: 0; overflow-wrap: anywhere; }
  .cookie-table td + td { border-top: 1px solid #dadada; }
  .cookie-table td::before {
    position: absolute; top: 0; bottom: 0; left: 0; width: 100px; padding: 15px;
    background: #f7f7f7; border-right: 1px solid #dadada; font: 600 14px/1.8 var(--font-heading); letter-spacing: -1px;
  }
  .cookie-table td:nth-child(1)::before { content: "Name"; }
  .cookie-table td:nth-child(2)::before { content: "Expiration"; }
  .cookie-table td:nth-child(3)::before { content: "Function"; }
  .cookie-table caption { border-bottom: 1px solid #dadada; }
}

/* Consent settings on the policy page (replaces the old Complianz widget; switches in section 18) */
.consent-settings { display: grid; gap: 5px; margin: 10px 0 20px; }
.consent-settings__row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px; background: rgba(239, 239, 239, .5); cursor: pointer;
}
.consent-settings__always { font-size: 12px; font-weight: 500; color: green; }

/* 18. Cookie consent banner --------------------------------------------------------
   Matches the old Complianz banner: bottom-right card on desktop, full-width sheet with
   stacked buttons up to 768px, and a "Manage consent" tab that peeks up from the bottom. */
.consent {
  position: fixed; right: 10px; bottom: 10px; z-index: 200; display: grid; gap: 10px;
  width: 526px; max-width: calc(100% - 20px); max-height: calc(100vh - 20px); overflow-y: auto;
  padding: 15px 20px; background: #fff; color: #222; border-radius: 12px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, .19), 0 6px 6px rgba(0, 0, 0, .23);
  font-size: 12px; line-height: 1.5;
}
.consent[hidden] { display: none; }
.consent:focus { outline: 0; }
.consent__head { display: grid; grid-template-columns: 100px 1fr 100px; align-items: center; gap: 10px; min-height: 47px; }
.consent__logo { height: 40px; width: auto; }
.consent__title { font-weight: 500; font-size: 15px; text-align: center; justify-self: center; }
.consent__close {
  justify-self: end; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0;
  background: none; border: 0; cursor: pointer; font-size: 18px; color: #222;
}
.consent__close .icon { width: 17px; height: 20px; }
.consent__close:hover .icon { width: 15px; }
.consent p { margin: 10px 0 5px; font-size: 12px; line-height: 18px; }
.consent__cats { display: none; gap: 10px; }
.consent.show-prefs .consent__cats { display: grid; }
.consent__cat {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px;
  padding: 10px; background: rgba(239, 239, 239, .5); font-size: 14px; font-weight: 500; line-height: 24px; cursor: pointer;
}
.consent__cat small { font-size: 12px; font-weight: 500; color: green; }
.consent__cat:not(:has(input)) { cursor: default; }
.consent__buttons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.consent__buttons button {
  font: 500 15px/20px var(--font-body); min-height: 45px; padding: 10px; border-radius: 6px; cursor: pointer;
  border: 1px solid #f2f2f2; background: #f9f9f9; color: #222;
}
.consent__buttons .consent__accept { background: #1e73be; border-color: #1e73be; color: #fff; }
.consent__buttons .consent__view, .consent__buttons .consent__save { color: #333; }
.consent__buttons .consent__save { display: none; }
.consent.show-prefs .consent__save { display: block; }
.consent.show-prefs .consent__view { display: none; }
.consent__buttons button:focus-visible, .consent__close:focus-visible, .consent__links a:focus-visible { outline: 2px solid #1e73be; outline-offset: 2px; }
.consent__links { text-align: center; }
.consent__links a { color: #1e73be; font-size: 12px; text-decoration: underline; }

/* On/off switches for the consent categories (in the banner and on the cookie policy page) */
.consent__cat input[type=checkbox], .consent-settings input[type=checkbox] {
  -webkit-appearance: none; appearance: none; flex: none; position: relative; width: 28px; height: 15px; margin: 0;
  border-radius: 10px; background: #f56e28; cursor: pointer; transition: background-color .3s;
}
.consent__cat input[type=checkbox]::after, .consent-settings input[type=checkbox]::after {
  content: ""; position: absolute; top: 2px; left: 4px; width: 11px; height: 11px; border-radius: 50%;
  background: #fff; transition: left .3s;
}
.consent__cat input:checked, .consent-settings input:checked { background: #1e73be; }
.consent__cat input:checked::after, .consent-settings input:checked::after { left: 14px; }
.consent__cat input:focus-visible, .consent-settings input:focus-visible { outline: 0; box-shadow: 0 0 0 2px #245fcc; }

.consent-manage {
  position: fixed; right: 40px; bottom: 0; z-index: 150; height: 50px; min-width: 100px; padding: 15px;
  background: #fff; color: #222; border: 0; border-radius: 12px 12px 0 0; cursor: pointer;
  font-size: 16px; line-height: 1; box-shadow: 0 10px 20px rgba(0, 0, 0, .19), 0 6px 6px rgba(0, 0, 0, .23);
  transform: translateY(35px); transition: transform .5s;
}
.consent-manage:hover, .consent-manage:focus-visible { transform: none; }
.consent-manage[hidden] { display: none; }
@media (max-width: 768px) {
  .consent { left: 0; right: 0; bottom: 0; width: 100%; max-width: 100%; max-height: 100vh; }
  .consent__buttons { grid-template-columns: 1fr; }
  .consent-manage { display: none; }
}
@media (max-width: 425px) {
  .consent__head { grid-template-columns: auto 1fr auto; }
  .consent__title { visibility: hidden; }
}

/* 19. Page-specific adjustments --------------------------------------------------- */
/* Service pages: the closing call to action leaves a blank line between the heading and the line below it. */
.page-services .cta-title .sub { margin-top: 1.8em; }
/* Service pages on tablets (481–768px): from about 600px wide the waves on the dark sections are taller
   than the sections' 8em padding, so the first and last lines of text ran into the waves' light edges (a
   flaw the original has too). Keep the text clear of them, and keep 64px words inside half-width columns. */
@media (min-width: 481px) and (max-width: 768px) {
  .page-services .section--dark:has(> .edge--top) { padding-top: max(8em, 20vw + 1em); padding-bottom: max(8em, 21vw); }
  .page-services .h-xl { font-size: min(4rem, 8.3vw); }
}

/* 20. Scroll reveal & reduced motion ---------------------------------------------- */
/* Elements fade in as they scroll into view (site.js adds .is-visible). Only hidden when scripts run. */
.reveal { transition: opacity 1s ease-in-out; }
@media (scripting: enabled) {
  .reveal { opacity: 0; }
  .reveal.is-visible { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transition: none; }
  .float img { transform: none !important; }
  .form.is-submitting .form-actions::after { animation: none; }
  .consent-manage, .consent__cat input, .consent__cat input::after, .consent-settings input, .consent-settings input::after { transition: none; }
  html { scroll-behavior: auto; }
}