/* ==========================================================================
   42Live — shared stylesheet
   One file for the whole site. Every page links to it.
   No frameworks, no web fonts, no build step: pages must open by
   double-clicking and still look right.

   Built to match the existing 42live.co.uk: black page, white type, red
   accents, centred sections. Colours are the ones Elementor was using —
   #0A0003 for the page, #B01818 for the red.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Montserrat, served from this site's own fonts/ folder rather than from
   Google. That keeps the page self-contained: it works offline, it works when
   you double-click it, and it sends nothing to a third party. One variable
   font file covers every weight, so there is only one download per subset.
   Montserrat is licensed under the SIL Open Font License.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/montserrat-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: "Montserrat";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/montserrat-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: "Montserrat Alternates";
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url("fonts/montserrat-alternates-latin-500.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: "Montserrat Alternates";
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url("fonts/montserrat-alternates-latin-ext-500.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;
}

:root {
  --black:      #0a0003;
  --black-2:    #000000;
  --red:        #b01818;
  --red-bright: #d92a2a;

  --white:      #ffffff;
  --text:       #cfcfcf;
  --muted:      #9a9a9a;
  --line:       rgba(255, 255, 255, .13);

  /* 1260px is the container width Elementor was set to. */
  --wrap: 1260px;
  --gap:  clamp(1rem, 3vw, 2rem);

  /* Elementor asked for Montserrat but never loaded a font file, so the live
     site has always fallen back to the visitor's own sans-serif. Here the font
     is actually served (see the @font-face rules above), with the same stack
     behind it in case it fails to load. */
  --font-alt: "Montserrat Alternates", "Montserrat", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, sans-serif;
  --font: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--black); }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;   /* Elementor's body size */
  line-height: 1.7;
  color: var(--text);
  background: var(--black);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0 0 .6em;
  color: var(--white);
  line-height: 1.2;
  font-weight: 700;
}

h1 { font-size: clamp(2rem, 4vw, 50px); font-weight: 400; line-height: 1; }
h2 { font-size: clamp(1.5rem, 3vw, 34px); font-weight: 500; }
h3 { font-size: 22px; font-weight: 500; font-family: var(--font-alt); line-height: 1.2; }
h4 { font-size: 18px; font-weight: 500; font-family: var(--font-alt); line-height: 1.2; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--red-bright); text-underline-offset: 2px; }
a:hover { color: #ff4444; }

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

:focus-visible { outline: 3px solid var(--red-bright); outline-offset: 3px; }

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--red);
  color: #fff;
  padding: .7rem 1.1rem;
  z-index: 200;
}
.skip-link:focus { left: 0; color: #fff; }

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

/* Measured off the live header (Elementor template 1000), 22 Oct 2026:
   a #0A0003 band, not stuck to the top; the logo in a narrow first column,
   the menu centred in the rest; 15px Montserrat Alternates; the page's own
   entry in red with a 3px red line under it, and the same on hover; black
   drop-downs that open on hover, with a second level opening to the right. */

.site-header { background: var(--black); }

.header-inner {
  display: flex;
  align-items: center;
  max-width: 1260px;
  margin-inline: auto;
  padding: 10px;
}

/* .brand, not .logo: .logo is the homepage's row of client logos */
.brand { flex: 0 0 8.304%; padding: 10px; line-height: 0; }
.brand img { width: 100%; height: auto; }

.nav { flex: 1 1 auto; display: flex; justify-content: center; padding: 10px; }

.nav ul { list-style: none; margin: 0; padding: 0; }
.nav > ul { display: flex; justify-content: center; }
.nav li { position: relative; }

.nav a {
  position: relative;
  display: block;
  padding: 13px 20px;
  line-height: 20px;
  color: var(--white);
  font-family: var(--font-alt);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: .4s;
}
.nav a:hover, .nav a:focus-visible, .nav [aria-current="page"] { color: var(--red); }

/* the red line under a top-level item */
.nav > ul > li > a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background: var(--red);
  opacity: 0;
  transition: .3s;
}
.nav > ul > li > a:hover::after,
.nav > ul > li > a:focus-visible::after,
.nav > ul > li > [aria-current="page"]::after { opacity: 1; }

.nav .sub {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 50;
  min-width: 10em;
  width: max-content;
  background: var(--black-2);
  box-shadow: 0 0 10px rgba(0, 0, 0, .5);
}
.nav .sub .sub { top: 0; left: 100%; }
.nav li:hover > .sub, .nav li:focus-within > .sub { display: block; }
.nav .sub a:hover, .nav .sub a:focus-visible, .nav .sub [aria-current="page"] { background: var(--black-2); }

/* the menu button, only shown on a tablet or phone: a red hamburger */
.nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  padding: 0;
  margin: 10px;
  background: none;
  border: 0;
  color: var(--red);
  cursor: pointer;
}
.nav-toggle .bars { display: block; position: relative; width: 30px; height: 4px; margin: 0 auto; background: currentColor; }
.nav-toggle .bars::before,
.nav-toggle .bars::after {
  content: ""; position: absolute; left: 0; width: 30px; height: 4px; background: currentColor;
}
.nav-toggle .bars::before { top: -10px; }
.nav-toggle .bars::after  { top: 10px; }

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

/* The strapline sits low over the video, the way the old site had it, rather
   than centred in the middle of the frame. */
.hero {
  position: relative;
  display: grid;
  align-items: end;
  min-height: min(88vh, 760px);
  /* the bottom padding has to clear the shape divider, or it cuts the strapline */
  padding: clamp(4rem, 10vw, 8rem) 0 clamp(4.5rem, 9vw, 7.5rem);
  background: var(--black-2);
  overflow: hidden;
  text-align: center;
}

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

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,.78) 100%);
}

.hero-content { position: relative; z-index: 2; }

/* The old site set this heading at 33px, weight 600 — nothing like the big
   display size a modern hero would use. Matched here. */
.hero h1 {
  max-width: 46ch;
  margin: 0 auto;
  font-size: clamp(1.35rem, 2.4vw, 2.06rem);
  font-weight: 600;
  line-height: 1.3;
  color: var(--white);
  text-shadow: 0 2px 20px rgba(0, 0, 0, .75);
}

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

.section { padding: clamp(3rem, 6.5vw, 5rem) 0; }

.section-title { text-align: center; margin-bottom: 2.6rem; }
.section-title h2 { margin-bottom: .7rem; }

/* the short red rule the old site put under its headings */
.section-title::after {
  content: "";
  display: block;
  width: 87px;
  height: 4px;
  margin: 1rem auto 0;
  background: var(--red);
}

.section-title p {
  max-width: 60ch;
  margin: 1.2rem auto 0;
  color: var(--text);
}

/* -------------------------------------------------------------- services -- */

.tiles {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2rem 1.4rem;
}

/* The icons are red artwork with near-black detail, so they sit straight on
   the black page the way they always did — no panel behind them. */
.tile {
  display: block;
  text-align: center;
  text-decoration: none;
  color: inherit;
}

.tile img {
  width: 88px;
  height: 88px;
  margin: 0 auto 1rem;
  object-fit: contain;
  transition: transform .18s ease;
}

.tile h3 {
  margin: 0;
  color: var(--white);
  font-size: 1rem;
  line-height: 1.35;
}

.tile:hover img { transform: scale(1.08); }
.tile:hover h3 { color: var(--red-bright); }

/* ----------------------------------------------------------- client logos -- */

/* A white band across the black page: these logos are dark artwork on
   transparent backgrounds and would be invisible otherwise. */
.clients {
  background: var(--white);
  padding: clamp(2.2rem, 4.5vw, 3.2rem) 0;
}

.clients h2 {
  margin-bottom: 1.8rem;
  color: #111;
  text-align: center;
  font-size: .84rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}


/* --------------------------------------------------------- inner pages -- */

.page { padding: clamp(2.4rem, 5vw, 4rem) 0; }

.page h1 {
  font-size: clamp(2rem, 4vw, 50px);
  font-weight: 400;
  line-height: 1;
  margin-bottom: 1.6rem;
}

.page h2 {
  margin-top: 2.4rem;
  font-size: clamp(1.5rem, 3vw, 34px);
  font-weight: 500;
}

.page h3 { margin-top: 1.8rem; font-size: 22px; font-weight: 500; font-family: var(--font-alt); }

.page p, .page ul, .page ol { max-width: 80ch; }

.page ul, .page ol { margin: 0 0 1.1em; padding-left: 1.25rem; }
.page li + li { margin-top: .4rem; }

.page hr {
  margin: 2.4rem 0;
  border: 0;
  border-top: 1px solid var(--line);
}

.page .figure { margin: 1.8rem 0; }
.page .figure img,
.page .figure video { max-width: 100%; border-radius: 6px; }
.page .figure video { width: 100%; background: #000; }

.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
  margin: 1.8rem 0;
}
.media-grid img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: #111;
  border-radius: 6px;
  padding: .4rem;
}

.ibox {
  margin: 1.6rem 0;
  padding: 1.4rem;
  background: #121012;
  border: 1px solid var(--line);
  border-radius: 6px;
}
.ibox img { width: 72px; height: 72px; object-fit: contain; margin-bottom: .9rem; }
.ibox h3 { margin: 0 0 .4rem; }
.ibox p { margin: 0; color: var(--muted); }

/* Flags a page whose real wording is still to come. Should not survive to
   go-live — see the TODO comment in the page source. */
.needs-content {
  padding: 1rem 1.2rem;
  border-left: 3px solid var(--red);
  background: #121012;
  color: var(--muted);
  font-style: italic;
}

.btn {
  display: inline-block;
  margin: .4rem 0;
  padding: 12px 24px;
  background: none;
  border: 1px solid var(--red);
  border-radius: 0;
  color: var(--red);
  font-size: 21px;
  font-weight: 500;
  font-weight: 600;
  text-decoration: none;
}
.btn:hover, .btn:focus-visible { background: var(--red); color: #fff; }

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




/* ------------------------------------------------------------ red sections --
   The live site runs its services grid and its testimonials on a solid red
   band (#B01818), not on the black page. These carry that over. */

.section--red { background: var(--red); }

.section--red .section-title::after { background: var(--white); }
.section--red .section-title p     { color: rgba(255, 255, 255, .92); }
.section--red .tile:hover h3       { color: rgba(255, 255, 255, .75); }


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

/* Measured off the live footer (Elementor template 903) on 22 Oct 2026:
   a black "Need help" band, then the logo beside four short link columns,
   then a hairline with the copyright on the left and social icons right. */

.site-footer { background: var(--black-2); color: rgba(255, 255, 255, .79); }

/* "Need help? Call the team" - one line, 22px Montserrat Alternates, all a link */
.call { padding: 25px 0; text-align: center; }
.call h3 { margin: 0; font-size: 22px; line-height: 1; }
.call a { color: #fff; text-decoration: none; }
.call a:hover { text-decoration: underline; }

/* Logo in a wide first column (centred in it, with the live site's 80px
   right margin), then Video Production / Webcasting / Live Events / About. */
.footer-cols {
  display: grid;
  grid-template-columns: 36% repeat(4, 1fr);
  align-items: start;
  padding-top: 65px;
}

.footer-logo { padding-right: 80px; text-align: center; line-height: 0; }
.footer-logo img { width: 120px; height: auto; }

.site-footer h4 { margin: 0; line-height: 1; }
.site-footer ul { list-style: none; margin: 0; padding: 0; font-size: 14px; font-weight: 300; line-height: 1.5; }
.site-footer li + li { margin-top: 5px; }
.site-footer li a { color: rgba(255, 255, 255, .79); text-decoration: none; transition: color .3s; }
.site-footer li a:hover { color: var(--white); }

.footer-bottom { padding: 25px 0; }
.footer-bottom hr { margin: 15px 0; border: 0; border-top: 1px solid rgba(255, 255, 255, .21); }

.footer-bar { display: flex; align-items: center; padding: 10px 0 11px; }
.footer-bar > * { flex: 1 1 50%; min-width: 0; }

.footer-legal {
  margin: 0;
  padding: 0 10px;
  font-size: 14px;
  font-weight: 300;
  line-height: 1;
  color: rgba(255, 255, 255, .39);
  text-align: center;
}
.footer-legal a { color: inherit; text-decoration: none; }
.footer-legal a:hover { color: var(--white); }

.social { display: flex; justify-content: flex-end; gap: 24px; padding: 0 10px; }
.social a { display: block; line-height: 0; }
.social svg { width: 15px; height: 15px; fill: rgba(255, 255, 255, .45); transition: fill .3s; }
.social a:hover svg { fill: #00ce1b; }   /* the live site's green */

/* ------------------------------------------------------------ responsive -- */

@media (max-width: 1024px) {
  .tiles { grid-template-columns: repeat(4, 1fr); }

  /* the live footer's tablet settings */
  .call { padding: 25px 20px; }
  .call h3 { font-size: 20px; line-height: 35px; }
  .footer-cols { padding-top: 25px; }
  .footer-logo { padding: 30px 0; }
  .site-footer h4, .site-footer ul { text-align: center; }
  .site-footer ul { font-size: 13px; }
  .footer-bottom { padding: 30px 0 0; }
  .footer-legal { font-size: 12px; }
}

/* On a tablet or phone the live header is two halves - logo centred in
   the left, the menu button centred in the right - and the menu drops
   down full width underneath, everything centred. */
@media (max-width: 1024px) {
  .site-header { position: relative; }
  .header-inner { flex-wrap: wrap; justify-content: center; }
  .brand { flex: 0 0 50%; text-align: center; padding: 30px 10px; }
  .brand img { width: 83px; }
  .nav-toggle { display: block; flex: 0 0 auto; margin: 0 calc(25% - 21px); }

  .nav {
    display: none;
    flex: 0 0 100%;
    padding: 0;
    margin-top: 16px;
    background: var(--black-2);
    box-shadow: 0 0 10px rgba(0, 0, 0, .5);
  }
  .nav.open { display: block; }
  .nav > ul { display: block; }
  .nav a { padding: 8px 0; text-align: center; white-space: normal; }
  .nav > ul > li > a::after { display: none; }
  .nav .sub, .nav .sub .sub {
    display: block;
    position: static;
    width: auto;
    min-width: 0;
    box-shadow: none;
  }
  .nav .sub a { font-weight: 500; }
}

@media (max-width: 767px) {
  .brand { padding: 10px; }
  .brand img { width: 80px; }
}

@media (max-width: 767px) {
  /* the live footer stacks here: logo on top, everything centred */
  .call { padding: 20px; }
  .footer-cols { grid-template-columns: 1fr; gap: 1.2rem; }
  .footer-logo { padding: 0 0 10px; }
  .footer-logo img { width: 80px; }
  .footer-bar { flex-direction: column; gap: 14px; }
  .social { justify-content: center; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .hero { min-height: 0; }
  .tiles { grid-template-columns: repeat(2, 1fr); gap: 1.8rem 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-video { display: none; }
  .hero { background: #000 url("images/hero-fashion-show.jpg") center / cover no-repeat; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

@media print {
  .site-header, .hero-video, .social { display: none; }
  body { color: #000; background: #fff; }
}

/* ------------------------------------------------------- shape dividers --
   The feathered edge the live site puts between its sections. This is
   Elementor's "mountains" shape, copied path for path: four stacked layers,
   the top three at a third opacity, which is what softens the edge. */

.hero, .section--red { position: relative; }

/* the divider overhangs by a fraction of a pixel each side, on purpose -
   clip it so the page never scrolls sideways because of it */
.section--red { overflow: hidden; }

.shape {
  position: absolute;
  left: 50%;
  bottom: -1px;                 /* -1px so no hairline shows at some zooms */
  width: calc(100% + 1.3px);    /* Elementor's own overhang, stops edge gaps */
  /* Elementor rotates a bottom divider a half turn - without this the
     mountains point the wrong way up */
  transform: translateX(-50%) rotate(180deg);
  display: block;
  z-index: 3;
  pointer-events: none;
}

.shape path { stroke: none; }

.shape--red   { height: 96px; }
.shape--red   path { fill: var(--red); }

.shape--black { height: 49px; }
.shape--black path { fill: var(--black-2); }

@media (max-width: 700px) {
  .shape--red   { height: 54px; }
  .shape--black { height: 30px; }
}

/* ----------------------------------------------------- client logo rows --
   Two auto-advancing rows, as on the live site. The old page ran an
   Elementor carousel: seven logos in view, one step every five seconds,
   half-second slide, paused on hover. */

.logo-row {
  overflow: hidden;
  margin-bottom: 1rem;
}
.logo-row:last-child { margin-bottom: 0; }

.logo-track {
  display: flex;
  gap: 10px;
  will-change: transform;
}

.logo {
  flex: 0 0 calc((100% - (6 * 10px)) / 7);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 124px;
}

/* contain, not cover: the artwork is a mix of square and wide logos and
   cover would crop the wide ones. */
.logo span {
  display: block;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

@media (max-width: 1000px) {
  .logo { flex-basis: calc((100% - (3 * 10px)) / 4); height: 96px; }
}
@media (max-width: 600px) {
  .logo { flex-basis: calc((100% - 10px) / 2); height: 84px; }
}

@media (prefers-reduced-motion: reduce) {
  .logo-track { transition: none !important; }
}

/* --------------------------------------------------------- testimonials --
   Measured off the live site: white cards, 5px radius, a 1px #e1e8ed rule
   under the header, 36px round avatar, name 15px/600 in #1c2022, and five
   14px stars in #f0ad4e. */

.quotes {
  position: relative;
  padding: 0 34px;
}

.quotes-window { overflow: hidden; }

.quotes-track {
  display: flex;
  gap: 10px;
  align-items: stretch;
  will-change: transform;
}

.quote {
  flex: 0 0 calc((100% - (3 * 10px)) / 4);
  margin: 0;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid #e1e8ed;
  border-radius: 5px;
}

.quote-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 15px 6px;
  border-bottom: 1px solid #e1e8ed;
}

.quote-avatar {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  background: #fff;
}

.quote-meta { display: flex; flex-direction: column; min-width: 0; }

.quote-name {
  font-size: 15px;
  font-weight: 600;
  line-height: 22.5px;
  color: #1c2022;
}

.quote-stars {
  font-size: 14px;
  line-height: 1.1;
  color: #f0ad4e;
  letter-spacing: 1px;
}

.quote-body {
  margin: 0;
  padding: 6px 15px 15px;
  font-size: 16px;
  line-height: 24px;
  color: #333;
}

.quote-body p { margin: 0 0 1em; }
.quote-body p:last-child { margin-bottom: 0; }

/* arrows and dots */

.quotes-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  padding: 0 6px;
  border: 0;
  background: none;
  color: rgba(237, 237, 237, .9);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}
.quotes-arrow:hover { color: #fff; }
.quotes-prev { left: 0; }
.quotes-next { right: 0; }

.quotes-dots {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
}

.quotes-dots button {
  width: 6px;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #000;
  opacity: .2;
  cursor: pointer;
}
.quotes-dots button[aria-current="true"] { opacity: 1; }

@media (max-width: 1000px) {
  .quote { flex-basis: calc((100% - 10px) / 2); }
}
@media (max-width: 600px) {
  .quotes { padding: 0 26px; }
  .quote { flex-basis: 100%; }
}

/* ---------------------------------------------------------- photo strips --
   The live site runs a slow, continuously scrolling band of photos through
   the middle of several pages, and one inside each product on the hire
   pages. Elementor did it with a 9-second slide and a 10ms gap between,
   which amounts to constant motion; this is the same effect in CSS, so it
   costs no JavaScript. The row of photos is repeated once in the markup and
   the track slides by exactly one copy, which is what makes it seamless. */

.photo-strip {
  overflow: hidden;
  margin: 1.8rem 0;
}

.photo-track {
  --w: 271px;
  --gap: 13px;
  --shift: calc(var(--n) * (var(--w) + var(--gap)));
  display: flex;
  gap: var(--gap);
  width: max-content;
  animation: photo-strip-scroll calc(var(--n) * 6s) linear infinite;
}

.photo-strip:hover .photo-track,
.photo-strip:focus-within .photo-track { animation-play-state: paused; }

@keyframes photo-strip-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-1 * var(--shift))); }
}

.photo { flex: 0 0 var(--w); margin: 0; }

/* contain, not cover - the live site letterboxes these rather than cropping */
.photo img {
  display: block;
  width: var(--w);
  height: 209px;
  object-fit: contain;
  background: #000;
}

@media (max-width: 700px) {
  .photo-track { --w: 200px; }
  .photo img { height: 154px; }
}

/* Someone who has asked for less movement gets a strip they can scroll
   by hand instead of one that moves on its own. */
@media (prefers-reduced-motion: reduce) {
  .photo-track { animation: none; }
  .photo-strip { overflow-x: auto; }
}

/* ------------------------------------------------------- page structure --
   The live pages are not one column of text. They alternate: a heading with
   a small icon beside it, then a row of text against a picture, then a
   full-width red band. These are the pieces that make that shape. */

.page-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.6rem;
}
.page-head h1 { margin: 0; }

/* the little icon that sits beside the page title, 42px on the live site */
.page-icon { flex: none; width: 42px; height: 42px; object-fit: contain; }

/* text one side, picture the other */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  margin: 2rem 0;
}
.split img { width: 100%; height: auto; display: block; }
.split > div > :last-child { margin-bottom: 0; }

@media (max-width: 800px) {
  .split { grid-template-columns: 1fr; }
}

/* a red band that runs the full width of the window */
.band {
  padding: clamp(2rem, 4vw, 3rem) 0;
  background: var(--red);
}

/* only a band that exists to hold a single button is centred */
.band--cta { text-align: center; }
.band .photo-strip { margin: 0; }

/* inside a red band the letterboxing takes the band colour, as it does on
   the live site, rather than showing black bars */
.band .photo img { background: transparent; }
.band--flush { padding: 0; }

/* on red, a button is outlined in white instead of red */
.band .btn, .section--red .btn {
  border-color: #fff;
  color: #fff;
}
.band .btn:hover, .section--red .btn:hover,
.band .btn:focus-visible, .section--red .btn:focus-visible {
  background: #fff;
  color: var(--red);
}

/* --------------------------------------------------- feathered red band --
   The live site's recurring device: a red body with the mountains shape
   feathering into black at the top, the bottom, or both. Used on About and
   on every case study. */

.band { position: relative; overflow: hidden; }

.band .shape--black { height: 117px; }

.shape--top {
  top: -1px;
  bottom: auto;
  transform: translateX(-50%);   /* a top divider is NOT rotated */
}

/* content sits in the middle of the page, not hard left */
.band-inner { position: relative; z-index: 2; }

.band--feathered { padding-block: clamp(5rem, 9vw, 8.5rem); }

/* text one side, a grid of photos the other */
.about-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  align-items: start;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.gallery img {
  width: 100%;
  aspect-ratio: 155 / 103;
  object-fit: cover;
  display: block;
}

@media (max-width: 800px) {
  .about-row { grid-template-columns: 1fr; }
}

/* a page title on its own, centred, as the live site sets them */
.page-title {
  padding-block: clamp(2rem, 5vw, 3.4rem) clamp(1rem, 2vw, 1.6rem);
  text-align: center;
}
.page-title h1 { margin: 0; }

/* --------------------------------------------------------- case studies --
   Three across the middle of the page, each one clickable through to its
   own case study. Used on the Case Studies page and again at the foot of
   every individual case study. */

.shape--sm { height: 42px; }

.case-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.2rem, 3vw, 2rem);
  align-items: start;
}

.case {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  text-align: center;
}

.case h2, .case h3 {
  margin: 0;
  font-size: clamp(1.1rem, 1.7vw, 22px);
  font-weight: 500;
  line-height: 1.35;
}

.case a { color: inherit; text-decoration: none; }
.case a:hover, .case a:focus-visible { text-decoration: underline; }

.case img {
  width: 100%;
  max-width: 400px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  margin-inline: auto;
  display: block;
  transition: transform .2s ease;
}
.case a:hover img { transform: scale(1.03); }

@media (max-width: 850px) {
  .case-grid { grid-template-columns: 1fr; }
}
.band-cta { text-align: center; margin-top: clamp(2rem, 4vw, 3rem); margin-bottom: 0; }

/* a wider photo gallery, as the case studies use below the video */
.gallery--4 { grid-template-columns: repeat(4, 1fr); }
.gallery--4 img { aspect-ratio: 3 / 2; }
@media (max-width: 900px) { .gallery--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .gallery--4 { grid-template-columns: 1fr; } }

/* a case study's video sits in the middle of its red band */
.case-video { max-width: 760px; margin: 2rem auto 0; }
.case-video video { width: 100%; height: auto; display: block; background: #000; }

/* the black strip that carries a case study's photo gallery */
.gallery-band { padding-block: clamp(2rem, 5vw, 3.5rem); background: var(--black-2); }
.shape--md { height: 70px; }
.shape--lg { height: 85px; }

/* three quotes side by side, as the case studies show them */
.quote-grid--3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 2.4rem; }
.quote-grid--3 .quote { flex-basis: auto; }
@media (max-width: 900px) { .quote-grid--3 { grid-template-columns: 1fr; } }

.feedback-head { margin-top: 2.6rem; text-align: center; font-family: var(--font); font-size: clamp(1.3rem, 2.4vw, 28px); font-weight: 500; }

/* a black strip carrying one large call to action */
.cta-black { padding-block: clamp(1.6rem, 3.5vw, 2.6rem); background: var(--black-2); text-align: center; }
.btn--lg { font-size: clamp(1.6rem, 3vw, 34px); padding: 14px 28px; }
.gallery--3 { grid-template-columns: repeat(3, 1fr); }
.gallery--3 img { aspect-ratio: 3 / 2; }
@media (max-width: 700px) { .gallery--3 { grid-template-columns: 1fr; } }
.split video { width: 100%; height: auto; display: block; background: #000; }

/* a page title with its icon above it, centred, as the service pages set them */
.page-title .page-icon { display: block; margin: 0 auto 1rem; width: 84px; height: 84px; }
.page-title h2 { margin: .4rem 0 0; font-weight: 500; }

/* the "Working together to create your event" band, a recurring device:
   the line on the left, the button on the right, on red with feathering */
.together {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.2rem, 3vw, 2.5rem);
  flex-wrap: wrap;
}
.together h2 { margin: 0; font-size: clamp(1.5rem, 3vw, 35px); font-weight: 500; }
.together .btn { flex: none; }

/* alternating rows of picture and copy down the service pages */
.split--flip > div:first-child { order: 2; }
@media (max-width: 800px) { .split--flip > div:first-child { order: 0; } }
.band-head { text-align: center; margin-bottom: clamp(1.6rem, 3vw, 2.4rem); font-weight: 500; }
.case--img-first img { aspect-ratio: 4 / 3; object-fit: contain; background: transparent; }

/* the service tiles on Video Services */
.stile-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(.8rem, 2vw, 1.4rem); margin-top: clamp(2rem, 4vw, 3rem); }
.stile img { width: 100%; height: auto; display: block; transition: transform .18s ease; }
.stile:hover img { transform: scale(1.04); }
@media (max-width: 900px) { .stile-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .stile-grid { grid-template-columns: repeat(2, 1fr); } }

/* links inside a red band: red on red is unreadable, so they go white */
.band a:not(.btn) { color: #fff; }
.band a:not(.btn):hover, .band a:not(.btn):focus-visible { color: #fff; text-decoration-thickness: 2px; }
.band h1 a, .band h2 a, .band h3 a { text-decoration: none; }
.band h1 a:hover, .band h2 a:hover, .band h3 a:hover { text-decoration: underline; }

/* the hire pages: one long red band, every product centred on it, with a
   dark rule between products */
.band--hire { text-align: center; }
.band--hire h2 { margin-top: clamp(2rem, 4vw, 3rem); }
.band--hire p { font-weight: 600; }
.band--hire hr { border: 0; border-top: 2px solid rgba(0,0,0,.55); margin: clamp(1.6rem, 3vw, 2.4rem) 0 0; }
.band--hire .btn { font-weight: 500; }
.photo-strip--wide .photo-track { --w: 372px; }
@media (max-width: 900px) { .photo-strip--wide .photo-track { --w: 260px; } }

/* ------------------------------------------------ page titles, corrected --
   The live pages set the small icon and the title side by side on one line,
   the pair centred on the page - not the icon stacked above it. */

.page-title .wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(.6rem, 1.5vw, 1rem);
}
.page-title .page-icon { display: block; margin: 0; width: 42px; height: 42px; }
.page-title h1 { margin: 0; text-align: left; }

/* a title that also carries a subtitle stacks the two, icon beside the pair */
.page-title--stacked .wrap { flex-wrap: wrap; }
.page-title--stacked h2 { flex-basis: 100%; margin: .4rem 0 0; text-align: center; }

/* ------------------------------------------------------ the slant shape --
   The live site alternates two dividers: the "mountains" already here, and
   this asymmetric one, which falls away to one side. */

.shape--slant path { stroke: none; }

/* ---------------------------------------------------------- band sizing --
   Measured off the live intro band: 50px above, 83px below, not the much
   deeper padding we had. */
.band--feathered { padding-block: 50px 83px; }
.band--together  { padding-block: 69px 71px; }

/* --------------------------------------------------- framed feature art --
   The live service pages frame each picture in a 6px red border with a
   10px radius. */
.split img.framed, .framed {
  border: 6px solid var(--red);
  border-radius: 10px;
}
/* inside a two-column row the video fills its column */
.split .case-video { max-width: none; margin: 0; }
.page-title--stacked .wrap { flex-direction: column; }
.page-title--stacked h1 { text-align: center; }
.anyone { text-align: center; margin-top: clamp(1.6rem, 3vw, 2.4rem); font-size: clamp(1.1rem, 2vw, 1.4rem); }
.split h2 + p + img.framed { margin-top: 1.2rem; }
/* a two-column row whose halves each start with a heading aligns to the top */
.split:has(> div > h2) { align-items: start; }

/* a framed picture never grows past its own size - the live pages set these
   at their natural dimensions, not stretched to the column */
.split img.framed { width: auto; max-width: 100%; height: auto; }
.split > div > img.framed + img.framed { margin-top: 1rem; }

/* ------------------------------------------------------------- contact --
   The live page runs the Quotient enquiry form down the left and the ways
   of reaching us down the right. */

.contact-row {
  display: grid;
  grid-template-columns: 600px 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}

.contact-form iframe {
  width: 100%;
  height: 1320px;
  border: 0;
  display: block;
  background: #fff;
  border-radius: 4px;
}

.contact-details { text-align: center; }
.contact-icon { display: block; width: 64px; height: 64px; object-fit: contain; margin: 2rem auto .6rem; }
.contact-details > :first-child { margin-top: 0; }
.contact-details p { margin: 0 0 .5rem; }

@media (max-width: 1050px) {
  .contact-row { grid-template-columns: 1fr; }
  .contact-form iframe { height: 1400px; }
}

/* Social Media: the live page sizes these inconsistently (515, 495 and 600
   wide). Dave asked for one size, slightly smaller, so they are pinned. */
.social-rows .split img.framed { width: 440px; max-width: 100%; aspect-ratio: 495 / 284; object-fit: cover; }

/* ==========================================================================
   The live site's own layout model
   The live pages are Elementor sections > columns > widgets. These classes
   reproduce that model, with Elementor's own defaults, so an inner page can
   be written straight from the measurements of the live one. The rules
   particular to a page (its widths, padding, colours and shapes) sit in a
   <style id="page-layout"> in that page's head, generated from the live
   stylesheet by tools/convert-live.ps1 and keyed by the same element ids.
   Breakpoints as Elementor had them: phone <=767px, tablet 768-1024px.
   ========================================================================== */

html, body { overflow-x: clip; }

/* sections and columns */
.es { position: relative; }
.es > .es-in { position: relative; display: flex; width: 100%; max-width: 1260px; margin-inline: auto; }
.es--full > .es-in { max-width: none; }
.es--mid > .es-in > .ec > .ec-in { align-content: center; align-items: center; }
.es--bot > .es-in > .ec > .ec-in { align-content: flex-end; align-items: flex-end; }
.es--imid > .es-in { align-items: center; }
.es-ov { position: absolute; inset: 0; }

.ec { position: relative; display: flex; min-height: 1px; width: 100%; }
.ec-in { position: relative; display: flex; flex-wrap: wrap; align-content: flex-start; width: 100%; padding: 10px; }
.gap-no > .es-in > .ec > .ec-in { padding: 0; }
.gap-narrow > .es-in > .ec > .ec-in { padding: 5px; }
.gap-extended > .es-in > .ec > .ec-in { padding: 15px; }
.gap-wide > .es-in > .ec > .ec-in { padding: 20px; }
.gap-wider > .es-in > .ec > .ec-in { padding: 30px; }
.ec-in > * { width: 100%; }
@media (max-width: 767px) { .ec { width: 100%; } }

/* widgets: 20px apart, as Elementor spaces them */
.ew { position: relative; }
.ew:not(:last-child) { margin-block-end: 20px; }

/* type inside the model is the theme's: 16px/1.5 Montserrat, white links */
.es { font-family: var(--font); font-size: 16px; line-height: 1.5; color: #7a7a7a; }
.es a { color: #fff; text-decoration: none; }
.es p { margin: 0 0 .9rem; }
.es ul, .es ol { margin: 0; padding-inline-start: 40px; }
.es h1, .es h2, .es h3, .es h4 { margin: 0; color: inherit; font-weight: inherit; line-height: inherit; }
.es img { display: inline-block; max-width: 100%; height: auto; vertical-align: middle; }

/* hidden on one size of screen */
@media (min-width: 1025px) { .hide-d { display: none; } }
@media (min-width: 768px) and (max-width: 1024px) { .hide-t { display: none; } }
@media (max-width: 767px) { .hide-p { display: none; } }

/* alignment classes */
.al-c { text-align: center; } .al-l { text-align: left; } .al-r { text-align: right; } .al-j { text-align: justify; }
@media (max-width: 1024px) { .al-t-c { text-align: center; } .al-t-l { text-align: left; } .al-t-r { text-align: right; } }
@media (max-width: 767px) { .al-m-c { text-align: center; } .al-m-l { text-align: left; } .al-m-r { text-align: right; } }

/* shape dividers, Elementor's own geometry: a top one sits as drawn, a
   bottom one is turned a half turn */
.esh { position: absolute; left: 0; width: 100%; overflow: hidden; line-height: 0; direction: ltr; }
.esh-top { top: -1px; }
.esh-bottom { bottom: -1px; }
.esh--flip { transform: rotate(180deg); }
.esh svg { display: block; position: relative; left: 50%; width: calc(100% + 1.3px); height: 150px; transform: translateX(-50%); }
.esh path { fill: #fff; transform-origin: center; }

/* heading: Elementor's default on this site is the small nav typeface in
   black - every visible heading overrides it in the page's own rules */
.ew-heading .eh { margin: 0; padding: 0; line-height: 1; font-family: var(--font-alt); font-size: 15px; font-weight: 600; color: #000; }
.ew-heading .eh a { color: inherit; font-size: inherit; line-height: inherit; }

/* text */
.ew-text-editor { font-family: var(--font); font-size: 16px; font-weight: 400; color: #7a7a7a; }

/* image */
.ew-image { text-align: center; }
.ew-image a { display: inline-block; }
.ew-image figure { margin: 0; }

/* button: black, 35px Montserrat, white text, unless the page says otherwise */
.eb {
  display: inline-block;
  line-height: 1;
  background-color: #000;
  color: #fff;
  fill: #fff;
  font-family: var(--font);
  font-size: 35px;
  font-weight: 500;
  padding: 12px 24px;
  border-radius: 3px;
  text-align: center;
  text-decoration: none;
  transition: all .3s;
}
.eb-xs { padding: 10px 20px; border-radius: 2px; }
.eb-md { padding: 15px 30px; border-radius: 4px; }
.eb-lg { padding: 20px 40px; border-radius: 5px; }
.eb-xl { padding: 25px 50px; border-radius: 6px; }
.ebc { display: flex; justify-content: center; flex-direction: row; gap: 5px; }
.ebi { display: flex; align-items: center; }
.ebi-r { order: 15; }
.ebi-l { order: 5; }

/* icon list: a tick in front of each item */
.el { list-style: none; margin: 0; padding: 0; }
.eli { display: flex; align-items: center; margin: 0; padding: 0; position: relative; font-family: var(--font); font-size: 16px; }
.eli > a { display: flex; align-items: center; font-size: inherit; color: inherit; }
.el-full .eli > a { width: 100%; }
.el-i { display: flex; position: relative; color: #000; }
.el-i svg { width: var(--e-icon-list-icon-size, 14px); height: var(--e-icon-list-icon-size, 14px); fill: currentColor; margin-right: calc(var(--e-icon-list-icon-size, 14px) * .25); }
.el-i + .el-t { padding-inline-start: 5px; }
.el-t { color: #b01818; align-self: center; }
.al-c .eli, .al-c .eli > a { justify-content: center; }
@media (max-width: 1024px) { .al-t-c .eli, .al-t-c .eli > a { justify-content: center; } }
@media (max-width: 767px) { .al-m-c .eli, .al-m-c .eli > a { justify-content: center; } }

/* divider: a rule across the column */
.ew-divider { --divider-border-style: none; --divider-border-width: 1px; --divider-color: #b01818; }
.ed { display: flex; }
.ed-l { display: flex; margin: 0; width: 100%; direction: ltr; border: 0; border-top: var(--divider-border-width) var(--divider-border-style) var(--divider-color); }

/* image box: a picture with a title and a line of text under it */
.eib { text-align: center; }
.eib-img { display: inline-block; margin: 0; }
.eib-img img { display: block; line-height: 0; }
.eib-c { width: 100%; }
.eib-t { margin: 0; font-family: var(--font-alt); font-size: 15px; font-weight: 600; line-height: 1.2; color: #000; }
.eib-t a { color: inherit; }
.eib-d { margin: 0; font-family: var(--font); font-size: 16px; font-weight: 400; color: #7a7a7a; }
@media (min-width: 768px) {
  .pos-left .eib, .pos-right .eib { display: flex; }
  .pos-right .eib { flex-direction: row-reverse; text-align: end; }
  .pos-left .eib { flex-direction: row; text-align: start; }
  .pos-top .eib-img { margin: auto; }
  .va-top .eib { align-items: flex-start; }
  .va-mid .eib { align-items: center; }
  .va-bot .eib { align-items: flex-end; }
}
@media (max-width: 767px) { .eib-img { margin-inline: auto !important; margin-bottom: 15px; } }

/* photo carousel: the live site's slow, endless slide of photos, done as a
   CSS marquee. The row is in the markup twice and the track slides by one
   copy, which is what makes the loop seamless. */
.ecar { position: relative; overflow: hidden; width: 100%; height: 230px; container-type: inline-size; --v: var(--v-d, 3); --gap: var(--gap-d, 10px); }
.ecar-track { display: flex; height: 100%; gap: var(--gap); width: max-content; animation: ecar-scroll calc(var(--n, 6) * 1.1s) linear infinite; }
.ecar-s { flex: 0 0 calc((100cqw - (var(--v) - 1) * var(--gap)) / var(--v)); height: 100%; position: relative; }
.ecar-img { height: 100%; background: no-repeat 50%; background-size: cover; position: relative; }
@keyframes ecar-scroll {
  to { transform: translateX(calc(-1 * var(--n, 6) * ((100cqw - (var(--v) - 1) * var(--gap)) / var(--v) + var(--gap)))); }
}
.ecar:hover .ecar-track { animation-play-state: paused; }
@media (max-width: 1024px) { .ecar { --v: var(--v-t, var(--v-d, 3)); --gap: var(--gap-t, var(--gap-d, 10px)); } }
@media (max-width: 767px) { .ecar { --v: var(--v-m, 1); --gap: var(--gap-m, var(--gap-d, 10px)); } }
@media (prefers-reduced-motion: reduce) { .ecar-track { animation: none; } .ecar { overflow-x: auto; } }

/* call to action: a picture with a title and a button over it */
.cta { display: flex; flex-wrap: wrap; overflow: hidden; position: relative; transition: .5s; }
.cta-bgw { min-height: 200px; position: relative; width: 100%; }
.cta-bg { position: absolute; inset: 0; background: no-repeat 50%; background-size: cover; }
.cta-c { background-color: #f9fafa; transition: all .4s; width: 100%; padding: 35px; }
.cta-item { color: #3f444b; }
.cta-t { margin: 0 0 15px; font-size: 25px; font-weight: 500; line-height: 1.2; }
.cta-d { margin: 0 0 15px; }
.cta-b { border: 2px solid #3f444b; color: #3f444b; background: none; }

/* video */
.ev-w { position: relative; }
.ev { display: block; width: 100%; height: auto; background: #000; }
.ev-w iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }

/* gallery: a grid of pictures, all cropped to one shape */
.eg { display: grid; grid-template-columns: repeat(var(--cols, 4), 1fr); gap: var(--gap, 10px); }
.eg-i { display: block; overflow: hidden; position: relative; }
.eg-img { display: block; width: 100%; aspect-ratio: var(--ar, 3 / 2); object-fit: cover; }
@media (max-width: 1024px) { .eg { grid-template-columns: repeat(var(--cols-t, 2), 1fr); } }
@media (max-width: 767px) { .eg { grid-template-columns: repeat(var(--cols-m, 1), 1fr); } }

/* spacer */
.esp-in { height: var(--spacer-size, 50px); }

/* testimonials, as on Pay-Per-View: quotes in speech bubbles, in a row on a
   white panel, the name and title under each */
.tqs { overflow: hidden; }
.tqs-track { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; }
.tq { display: flex; flex-direction: column; }
.tq-c { position: relative; padding: 20px; background: #f9fafa; border-radius: 3px; }
.tq-c::after { content: ""; position: absolute; left: 50px; bottom: -8px; border: 8px solid transparent; border-top-color: #f9fafa; border-bottom: 0; }
.tq-t { font-style: italic; }
.tq-f { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 25px; padding: 0 20px; }
.tq-i { flex-shrink: 0; }
.tq-i img { width: 60px; height: 60px; border-radius: 999px; object-fit: cover; }
.tq-f cite { display: flex; flex-direction: column; font-size: 14px; font-style: normal; line-height: 1.5; }
.tq-n { font-weight: 700; }
@media (max-width: 767px) { .tqs-track { grid-auto-flow: row; } }

/* the privacy policy and the terms: a plain page of white text, written by
   hand rather than converted, so the converter leaves them alone */
#legal-title > .es-in, #legal-body > .es-in { max-width: 1000px; }
#legal-title { padding-top: 10px; }
#legal-title .eh { font-family: var(--font); font-size: 50px; font-weight: 400; color: #fff; text-align: center; }
#legal-body { padding: 20px 0 70px; }
.legal .ew-text-editor { color: #fff; }
.legal h2 { margin: 36px 0 12px; font-family: var(--font-alt); font-size: 22px; font-weight: 500; line-height: 1.2; color: #fff; }
.legal h3 { margin: 24px 0 8px; font-family: var(--font); font-size: 17px; font-weight: 600; line-height: 1.3; color: #fff; }
.legal ul { margin: 0 0 .9rem; }
.legal li { margin-bottom: .35rem; }
.legal a { text-decoration: underline; }
.legal-updated { color: rgba(255, 255, 255, .6); font-size: 14px; }
@media (max-width: 767px) { #legal-title .eh { font-size: 34px; } }

/* -------------------------------------------------------- cookie notice --
   A bar across the foot of the window until the visitor chooses. The map
   and the video player from other companies stay switched off until then
   and show a notice of their own in their place. */
.cookie-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 200;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 28px;
  padding: 16px 20px;
  background: #000;
  border-top: 3px solid var(--red);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, .5);
  color: #fff;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
}
.cookie-bar[hidden] { display: none; }
.cookie-bar p { margin: 0; max-width: 760px; }
.cookie-bar a { color: #fff; text-decoration: underline; }
.cookie-bar-actions { display: flex; gap: 10px; }
.cookie-bar button { font: 600 15px var(--font); padding: 10px 22px; border-radius: 3px; cursor: pointer; }
.cookie-accept { background: var(--red); color: #fff; border: 1px solid var(--red); }
.cookie-decline { background: none; color: #fff; border: 1px solid #fff; }
.cookie-accept:hover { background: #8e1313; }
.cookie-decline:hover { background: rgba(255, 255, 255, .12); }

.consent-note {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 20px;
  background: #111;
  color: #fff;
  text-align: center;
}
.consent-note p { margin: 0; max-width: 40ch; }
.consent-note button { font: 600 15px var(--font); padding: 10px 22px; background: var(--red); color: #fff; border: 0; border-radius: 3px; cursor: pointer; }
.consent-box--on .consent-note { display: none; }

/* review cards in a row, the card itself styled further up with .quote */
.quote-row { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; }
@media (max-width: 767px) { .quote-row { grid-auto-flow: row; } }