/* Optical Media site styles.
   Shared by every rebuilt page: fonts, colours, header, footer, the 24-column
   layout grid, text sizes, buttons, accordions and section edges. */

/* Work Sans exactly as the live site loads it: one variable-font file per
   subset, declared separately for weights 500 and 700 (normal and italic),
   so other weights snap to those two like they do on Squarespace. Do not
   replace with a 300-800 range: line breaks change. */
@font-face {
  font-family: "Work Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/theme/fonts/work-sans-vietnamese.woff2) format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "Work Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/theme/fonts/work-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: "Work Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/theme/fonts/work-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: "Work Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/theme/fonts/work-sans-vietnamese.woff2) format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "Work Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/theme/fonts/work-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: "Work Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/theme/fonts/work-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: "Work Sans";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(/theme/fonts/work-sans-italic-vietnamese.woff2) format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "Work Sans";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(/theme/fonts/work-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: "Work Sans";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(/theme/fonts/work-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: "Work Sans";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(/theme/fonts/work-sans-italic-vietnamese.woff2) format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "Work Sans";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(/theme/fonts/work-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: "Work Sans";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(/theme/fonts/work-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;
}

:root {
  --white: #fafafa;
  --black: #000;
  --accent: #e1e1e1;
  --light-accent: #fff;
  --dark-accent: #1c2738;
  --navy: #253140;
  --ink: #1c2838;

  --font: "Work Sans", sans-serif;
  --max-width: 1654px;
  --gutter: 2vw;
  --mobile-gutter: 6vw;
  --gap: 11px;
  /* The logo is 73px tall on wide screens and shrinks with the window below
     about 1280px (46px at the smallest), so the menu keeps room beside it. */
  --logo-h: clamp(46px, 6.5vw - 10px, 73px);
  --header-h: calc(4vw + var(--logo-h));
}

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

html {
  font-size: 15px;
  -webkit-text-size-adjust: 100%;
}
/* Between the phone layout and a 1280px window (tablets, small laptops, car
   screens) the base text size eases down from 15px to 13px, so text keeps
   its proportions to the narrower columns. Every size is built on rem. */
@media (min-width: 768px) and (max-width: 1279px) {
  html { font-size: calc(13px + (100vw - 768px) * 2 / 512); }
}

body {
  margin: 0;
  background: var(--white);
  color: var(--black);
  font-family: var(--font);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.6em;
  overflow-wrap: break-word;
}

/* Sticky footer: on a page shorter than the window the footer sits at the
   bottom of the window, as on the live site (its site wrapper is a
   min-height 100vh flex column and the footer has margin-top: auto). */
body { display: flex; flex-direction: column; min-height: 100vh; }
body > main { flex: none; }
.site-footer { margin-top: auto; }

img, video { display: block; max-width: 100%; }
a { color: inherit; }
strong { font-weight: 700; }

/* ---------- Text sizes ----------
   Each size has a scale value (--v). Squarespace grows text with the
   viewport width on desktop and with the viewport height on phones. */

h1 { --v: 3.9; }
h2 { --v: 3.4; }
h3 { --v: 1.9; }
h4 { --v: 1; }
p, .text { --v: 1; }
.large { --v: 1.1; }
.small { --v: 0.9; }

h1, h2, h3, h4, p, .large, .small, .button {
  font-size: min(calc((var(--v) - 1) * 1.2vw + 1rem), max(calc((var(--v) - 1) * 0.012 * var(--max-width) + 1rem), calc(var(--v) * 1rem)));
}

@media (max-width: 767px) and (orientation: portrait) {
  h1, h2, h3, h4, p, .large, .small, .button {
    font-size: calc((var(--v) - 1) * 0.012 * min(100vh, 900px) + 1rem);
  }
}

h1, h2, h3, h4 {
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: calc(1.2em * (1 + (1 - var(--v)) / 25));
  margin: 2rem 0;
  white-space: pre-wrap;
}

p {
  margin: 1rem 0;
  line-height: 1.6em;
  white-space: pre-wrap;
}

.text > :first-child { margin-top: 0; }
.text > :last-child { margin-bottom: 0; }

.text a {
  text-decoration: underline 1px;
  text-underline-offset: 0.193em;
}

/* Bulleted lists in text blocks (Squarespace: 40px indent, a right-aligned
   bullet in the indent, list paragraphs 7.5px apart). */
.text ul { margin: 1rem 0; padding: 0 0 0 40px; list-style: none; }
.text li > p { margin: 0.5rem 0; }
.text li > p::before {
  content: "•";
  display: inline-block;
  width: 40px;
  margin-left: -40px;
  padding-right: 10px;
  text-align: right;
}

@media only screen and (max-width: 720px) {
  h1 { font-size: 35px; }
  h2 { font-size: 30px; }
  p.large { font-size: 15px; }
}

/* SEO: each page has one <h1>, so a heading's tag can differ from how it
   looks on live. .h1 / .h2 / .h3 give any heading that level's look. */
.h1 { --v: 3.9; }
.h2 { --v: 3.4; }
.h3 { --v: 1.9; }
/* A paragraph given a heading look (site editor "Style") gets the heading type too. */
.h1, .h2, .h3 { font-weight: 500; letter-spacing: 0.01em; line-height: calc(1.2em * (1 + (1 - var(--v)) / 25)); }
@media only screen and (max-width: 720px) {
  .h1 { font-size: 35px; }
  .h2 { font-size: 30px; }
  /* An <h1> that looks like an h3 must not take the 35px h1 size. */
  .h3 { font-size: min(calc((var(--v) - 1) * 1.2vw + 1rem), max(calc((var(--v) - 1) * 0.012 * var(--max-width) + 1rem), calc(var(--v) * 1rem))); }
}
@media (max-width: 767px) and (orientation: portrait) {
  .h3 { font-size: calc((var(--v) - 1) * 0.012 * min(100vh, 900px) + 1rem); }
}

/* A line naming the service, above a hero tagline (it is the page's <h1>),
   in the site's own heading style. It sits above its block, so the tagline
   doesn't move. */
.block:has(> .eyebrow) { position: relative; }
.eyebrow {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  margin: 0 0 12px;
  font-size: 15px !important;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.3;
  text-transform: uppercase;
  white-space: normal;
}
@media (max-width: 767px) {
  .eyebrow { font-size: 12px !important; margin-bottom: 8px; }
}


.center { text-align: center; }

.c-white { color: #fff; }
.c-ink { color: var(--ink); }
.c-blue { color: rgb(56, 83, 119); }
.c-steel { color: rgb(38, 63, 96); }
.c-link-blue { color: rgb(52, 87, 133); }
.c-mist { color: rgb(230, 228, 228); }
.c-approach { color: #2b3e56; }
.c-discover { color: #37567e; }
.c-navy-blue { color: #22436d; }
.c-teal { color: #3e85a4; }
.c-sea { color: #3b82a1; }
/* Owner's custom CSS on a few quote headings (e.g. Bowls client feedback):
   20px, and 16px up to 768px wide. */
h3.quote-20 { font-size: 20px; }
@media screen and (max-width: 768px) { h3.quote-20 { font-size: 16px; } }
.c-showcase-blue { color: #4d6a91; }

/* Squarespace "dark-bold" theme: headings use the accent grey, body text stays white. */
:where(.section.theme-dark-bold) :is(h1, h2, h3, h4) { color: var(--accent); }

/* 24px from 1440px wide, easing down to 17px at the phone breakpoint. */
.hero-lead { font-size: clamp(17px, calc(17px + (100vw - 768px) * 7 / 672), 24px); }
/* Space under the hero heading, which sits in the rows above (index.html). */
@media (min-width: 768px) { .text > .hero-lead { margin-top: 1em; } }
@media (max-width: 768px) {
  .hero-lead { font-size: 17px; }
}

.mark { position: relative; display: inline-block; }
.mark svg {
  position: absolute;
  left: 0;
  bottom: 0.02em;
  width: 100%;
  height: 0.18em;
  overflow: visible;
  z-index: -1;
  pointer-events: none;
}
.mark path {
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: square;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 2s linear;
}
.mark.is-drawn path { stroke-dashoffset: 0; }
/* Squarespace "underlineDouble" highlight: two lines at 90% and 100% of the
   text's height, 0.05em thick. Inline so the svg spans the glyph box. */
.mark.double { display: inline; }
.mark.double svg { top: 0; bottom: auto; left: -5px; width: calc(100% + 10px); height: 100%; }
.mark.double line {
  fill: none;
  stroke: currentColor;
  stroke-width: 0.05em;
  stroke-linecap: square;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 2s linear;
}
.mark.double.is-drawn line { stroke-dashoffset: 0; }

/* Embed block (an iframe, e.g. a Vimeo player) at a fixed shape:
   --embed-ratio is height / width, as Squarespace's padding-bottom. */
.embed { position: relative; width: 100%; padding-bottom: calc(var(--embed-ratio, 0.5625) * 100%); }
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: var(--radius, 15px); }

.vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(0, 0, 0, 0.2) 30%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 70%);
  pointer-events: none;
}

.quote-rotator { position: relative; width: 100%; text-align: center; color: #fff; }
.grid:has(.quote-rotator) { overflow: visible; }
.quote-rotator h2 {
  font-size: 4.2em;
  font-weight: 700;
  line-height: 1.085;
  margin: 30px 0 20px;
  color: #fff;
}
.quote-stage { position: relative; height: 0; }
.quote-rotator .quote {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  margin: 0;
  font-size: 1.4em;
  font-weight: 500;
  line-height: 1.143;
  opacity: 0;
  transition: opacity 1.25s ease-in-out;
}
@media (max-width: 768px) {
  .quote-rotator h2 { font-size: 2.36em; }
  .quote-rotator .quote { font-size: 1.12em; }
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0, 0, 0, 0.82);
  display: grid;
  place-items: center;
  padding: 4vw;
}
.lightbox-frame { width: min(1000px, 100%); aspect-ratio: 16 / 9; }
.lightbox-frame iframe { width: 100%; height: 100%; border: 0; }
.lightbox-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: #000;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.image a { display: block; width: 100%; height: 100%; }

/* Headings marked .fit are sized by site.js to fill their block. */
.fit { visibility: hidden; }
.fit.is-fitted { visibility: visible; }
/* Squarespace wraps the heading in an inline-block, so the heading box hugs
   its text and sits at the LEFT of the block even when the heading is centred
   (checked on every live page with scaled text: the wrapper's x always equals
   the block's x). Don't centre it with margin: auto. */
.fit > * { line-height: 1 !important; white-space: nowrap; margin: 0; width: max-content; }

/* ---------- Header ---------- */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
  background: var(--navy);
  color: var(--white);
  padding: 2vw;
}

.site-header .inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18.72px;
}

.site-header .logo img {
  height: var(--logo-h);
  width: auto;
  max-width: none;
}

.site-nav {
  display: flex;
  gap: max(18px, 2.8vw);
  font-size: 1rem;
  line-height: 1.6em;
}

.site-nav a {
  white-space: nowrap;
  text-decoration: none;
  padding: 1.5px 0;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: repeat-x;
  background-size: 0 1px;
  background-position: 0 calc(100% - 1.5px);
}

@media (hover: hover) { .site-nav a:hover { background-size: 1px 1px; } }
.site-nav a[aria-current="page"] { background-size: 1px 1px; }

@media (min-width: 1024px) {
  .site-nav a[href="/contact"] { display: none; }
  /* Live hides only the link, not its list item, so the empty item still
     takes one nav gap at the right-hand end. */
  .site-nav::after { content: ""; }
}

.burger {
  display: none;
  background: none;
  border: 0;
  padding: 0;
  width: 47px;
  height: 37px;
  cursor: pointer;
  position: relative;
  color: var(--white);
}

/* Measured from live: three 35×2px bars 9.5px apart in a 35px box (1px down,
   6px in). Open: the outer bars shrink to 28px, shift 3.5px right and turn
   into a cross; the middle one scales away. */
.burger span {
  position: absolute;
  left: 6px;
  top: 17.5px;
  width: 35px;
  height: 2px;
  background: currentColor;
  transition: transform 0.25s cubic-bezier(0.2, 0.6, 0.3, 1), width 0.25s cubic-bezier(0.2, 0.6, 0.3, 1);
}
.burger span:nth-child(1) { transform: translateY(-9.5px); }
.burger span:nth-child(3) { transform: translateY(9.5px); }

.menu-open .burger span:nth-child(1) { width: 28px; transform: translateX(3.5px) rotate(225deg); }
.menu-open .burger span:nth-child(2) { transform: scale(0); }
.menu-open .burger span:nth-child(3) { width: 28px; transform: translateX(3.5px) rotate(135deg); }

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 999;
  padding-top: var(--header-h);
  background: var(--ink);
  color: var(--accent);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 31px;
  opacity: 0;
  visibility: hidden;
  transition: visibility 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-menu a { font-size: 20px; line-height: 20px; text-decoration: none; }
.menu-open .mobile-menu { opacity: 1; visibility: visible; }
.menu-open { overflow: hidden; }
.site-header { transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
.menu-open .site-header { background-color: transparent; }

@media (max-width: 767px) {
  :root { --header-h: calc(8vw + 43px); }
  .site-header { padding: 2vw 6vw; }
  .site-header .inner { justify-content: center; position: relative; }
  .site-header .logo img { height: 43px; }
  .site-nav { display: none; }
  .burger { display: block; position: absolute; left: 0; top: 50%; transform: translateY(-50%); }
}

@media (max-width: 640px) {
  .site-header { padding-top: 4vw; padding-bottom: 4vw; }
}

/* Wider screens whose menu still does not fit beside the logo (large text
   settings, car and TV browsers): site.js adds .nav-collapsed and the header
   switches to the mobile layout, burger menu and all. */
.nav-collapsed .site-header .inner { justify-content: center; position: relative; }
.nav-collapsed .site-nav { display: none; }
.nav-collapsed .burger { display: block; position: absolute; left: 0; top: 50%; transform: translateY(-50%); }

/* ---------- Sections ---------- */

.section {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: var(--min-h, auto);
  color: var(--text, var(--black));
}

.section.height-small { --min-h: 33vh; --pad-t: 3.3vmax; --pad-b: 3.3vmax; }
.section.height-medium { --min-h: 66vh; --pad-t: 6.6vmax; --pad-b: 6.6vmax; }

main > .section:first-child { padding-top: var(--header-h); }

.section.theme-dark,
.section.theme-black,
.section.theme-dark-bold { --text: var(--white); }

.section-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  background: var(--bg, transparent);
  top: calc(-1 * var(--prev-divider, 0px));
}

.section-bg > img,
.section-bg > canvas,
.section-bg > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.section-bg[data-effect="refracted-lines"] > canvas { opacity: 0; }
.section-bg[data-effect="refracted-circles"] > canvas { opacity: 0; }
.section-bg.effect-ready > canvas { opacity: 1; }

.section-bg .overlay {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: var(--overlay, 0);
  pointer-events: none;
}

.section-bg .vimeo {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background: #000;
}

.section-bg .vimeo iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 0;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 1s ease;
}

/* Background video still (site.js bgReveal): black first; the still fades in
   only if the video isn't playing after 3s, then the video fades in over it. */
.section-bg .vimeo img,
.section-bg .youtube img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s ease;
}
.section-bg .vimeo img.is-shown,
.section-bg .youtube img.is-shown { opacity: 1; }

.section-bg .vimeo iframe.is-playing { opacity: 1; }

/* YouTube section background (site.js initYouTube), same as Vimeo's. */
.section-bg .youtube { position: absolute; inset: 0; overflow: hidden; pointer-events: none; background: #000; }
.section-bg .youtube iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 0;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 1s ease;
}
.section-bg .youtube iframe.is-playing { opacity: 1; }


.section-content {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--pad-t, 0) 0 var(--pad-b, 0);
}

.section.align-top .section-content { justify-content: flex-start; }

/* A shaped bottom edge. site.js clips the background to the curve and lets
   the next section's background show through underneath it. */
.section.has-divider { padding-bottom: var(--divider-h); z-index: 2; }

.divider-stroke {
  position: absolute;
  left: 0;
  overflow: visible;
  pointer-events: none;
  z-index: 1;
}
.divider-stroke path {
  fill: none;
  stroke: var(--divider-stroke, transparent);
  stroke-width: var(--divider-stroke-w, 0);
  stroke-linecap: square;
  vector-effect: non-scaling-stroke;
}

.pause-button {
  position: absolute;
  right: 14px;
  bottom: calc(14px + 2 * var(--divider-h, 0px));
  z-index: 3;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
}

.pause-button svg { width: 12px; height: 12px; fill: currentColor; }
.pause-button .play { display: none; }
.pause-button.is-paused .play { display: block; }
.pause-button.is-paused .pause { display: none; }

/* ---------- Layout grid ----------
   Each block sets its position with --m (phone, 8 columns) and --d
   (desktop, 24 columns), written as row-start / col-start / row-end / col-end.
   Column 1 and the last column are the page margins.
   Squarespace lets a section use another column gap (its fluid-engine
   "column-gap"); set it with --col-gap on .grid (e.g. --col-gap: 10px). */

.grid {
  --cgap: var(--col-gap, var(--gap));
  --gutter-col: calc(var(--mobile-gutter) - var(--cgap));
  --cell: calc((var(--max-width) - (var(--cgap) * 7)) / 8);
  display: grid;
  position: relative;
  grid-template-rows: repeat(var(--rows-m), minmax(24px, auto));
  grid-template-columns: minmax(var(--gutter-col), 1fr) repeat(8, minmax(0, var(--cell))) minmax(var(--gutter-col), 1fr);
  gap: var(--gap) var(--cgap);
  overflow-x: clip;
}

.block {
  grid-area: var(--m);
  display: flex;
  flex-direction: column;
  justify-content: var(--align-m, flex-start);
  position: relative;
  min-width: 0;
}

@media (min-width: 768px) {
  .grid {
    --gutter-col: calc(var(--gutter) - var(--cgap));
    --cell: calc((var(--max-width) - (var(--cgap) * 23)) / 24);
    --container: min(var(--max-width), calc(100vw - var(--gutter) * 2));
    grid-template-rows: repeat(var(--rows-d), minmax(calc(var(--container) * 0.0215), auto));
    grid-template-columns: minmax(var(--gutter-col), 1fr) repeat(24, minmax(0, var(--cell))) minmax(var(--gutter-col), 1fr);
  }

  .block {
    grid-area: var(--d);
    justify-content: var(--align-d, flex-start);
  }
}

/* ---------- Blocks ---------- */

.image {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image.rounded { border-radius: 20px; }
/* A wide picture that keeps its own height, lined up with the top of the cell
   (a Squarespace gallery slideshow). site.js scales the picture like Squarespace
   does: its height rounded up to a whole pixel, centred and cropped at the sides. */
.image.intrinsic:not(.contain) { height: auto; }
.image.intrinsic:not(.contain) img { width: 100%; height: auto; object-fit: contain; }
.image.intrinsic.is-filled:not(.contain) { position: relative; height: var(--slide-h); }
.image.intrinsic.is-filled:not(.contain) img {
  position: absolute;
  top: 0;
  left: var(--fill-x);
  width: var(--fill-w);
  height: var(--fill-h);
  max-width: none;
  object-fit: fill;
  font-size: 0;
}
/* Logos and icons (Squarespace image blocks in "fit" mode). The picture never
   sizes the grid row: it is placed inside the cell at the largest size that
   keeps its shape, centred. site.js sets --fit-w / --fit-h the way Squarespace
   does (from the cell's whole-pixel size). */
.block:has(> .image.contain) { min-height: 0; }
.image.contain { position: relative; min-height: 0; }
.image.contain img {
  position: absolute;
  inset: 0;
  margin: auto;
  width: var(--fit-w, 100%);
  height: var(--fit-h, 100%);
  max-width: none;
  object-fit: contain;
}
/* A fit-mode picture in a block aligned to the bottom (Squarespace's
   flex-end alignment): .end-m on phones, .end-d from 768px. */
@media (max-width: 767px) {
  .image.contain.end-m img { margin-bottom: 0; }
}
@media (min-width: 768px) {
  .image.contain.end-d img { margin-bottom: 0; }
}

/* Native video blocks: the owner's custom CSS rounds every player
   (.plyr__video-wrapper and its video) to 15px. Headless Chromium can't play
   live's H.264, and Squarespace's square-cornered error box then covers the
   player, so screenshots of live look square; the computed radius is 15px. */
.video {
  width: 100%;
  border-radius: 15px;
  overflow: hidden;
}

.video video {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  border-radius: 15px;
}

/* Native video with Squarespace's "minimal" controls (site.js
   initMinimalPlayers): a seek bar 20px in from the sides and 16.5px up from
   the bottom, a round play/pause button in the middle (owner's colour
   #253140) and a faint shade along the top while the controls show. */
.video.minimal { position: relative; }
.video.minimal::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 15%;
  z-index: 1;
  pointer-events: none;
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0));
  transition: opacity 0.4s ease-in-out;
}
.video.minimal video { display: block; cursor: pointer; }
.video.minimal .mp-controls {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  padding: 0 20px 16.5px;
  pointer-events: none;
  transition: opacity 0.4s ease-in-out;
}
.video.minimal .mp-progress { position: relative; flex: 1; height: 14px; pointer-events: auto; }
.video.minimal .mp-buffer {
  position: absolute;
  left: 0;
  top: 5.5px;
  height: 3px;
  width: 0;
  background: rgba(255, 255, 255, 0.35);
}
.video.minimal .mp-seek {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 14px;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.video.minimal .mp-seek:focus { outline: 0; }
.video.minimal .mp-seek::-webkit-slider-runnable-track {
  height: 3px;
  border: 0;
  background: linear-gradient(to right, #fff var(--value, 0%), rgba(255, 255, 255, 0.3) var(--value, 0%));
}
.video.minimal .mp-seek::-moz-range-track { height: 3px; border: 0; background: rgba(255, 255, 255, 0.3); }
.video.minimal .mp-seek::-moz-range-progress { height: 3px; background: #fff; }
.video.minimal .mp-seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  visibility: hidden;
  width: 14px;
  height: 14px;
  margin-top: -5px;
  border: 0;
  border-radius: 100%;
  background: #fff;
}
.video.minimal .mp-seek::-moz-range-thumb { visibility: hidden; width: 14px; height: 14px; border: 0; border-radius: 100%; background: #fff; }
.video.minimal .mp-seek:active::-webkit-slider-thumb { visibility: visible; }
.video.minimal .mp-seek:active::-moz-range-thumb { visibility: visible; }
.video.minimal .mp-progress:hover .mp-seek::-webkit-slider-runnable-track { height: 5px; }
.video.minimal .mp-progress:hover .mp-seek::-webkit-slider-thumb { margin-top: -4px; }
.video.minimal .mp-progress:hover .mp-seek::-moz-range-track,
.video.minimal .mp-progress:hover .mp-seek::-moz-range-progress { height: 5px; }
.video.minimal .mp-progress:hover .mp-buffer { height: 5px; transform: translateY(-1px); }
.video.minimal .mp-big {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  transform: translate(-50%, -50%);
  padding: 15px;
  border: 0;
  border-radius: 100%;
  background: #253140;
  color: #fff;
  opacity: 0.9;
  backdrop-filter: blur(15px);
  cursor: pointer;
  transition: 0.3s;
}
.video.minimal .mp-big:hover,
.video.minimal .mp-big:focus { opacity: 1; }
.video.minimal .mp-big svg { display: block; width: 48px; height: 48px; margin: 1px; fill: currentColor; }
.video.minimal.is-hidden::before,
.video.minimal.is-hidden .mp-controls { opacity: 0; }
.video.minimal.is-hidden .mp-controls * { pointer-events: none; }
.video.minimal.is-hidden .mp-big { opacity: 0; visibility: hidden; }

/* Image block in "fit" mode whose picture box has its own rounded corners
   and/or a WebGL image effect (e.g. data-effect="refracted-circles" on the
   .frame). The frame is the largest box of the picture's shape (--ratio)
   that fits the cell, centred, as Squarespace's fluid image container. */
.image.framed {
  container-type: size;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Vertical placement of the picture box in its cell when the block isn't
   centred: --frame-m (phone) / --frame-d (desktop), e.g. flex-start. */
.image.framed { align-items: var(--frame-m, center); }
@media (min-width: 768px) { .image.framed { align-items: var(--frame-d, center); } }
.image.framed > .frame {
  position: relative;
  flex: none;
  width: min(100cqw, calc(100cqh * var(--ratio)));
  aspect-ratio: var(--ratio);
  overflow: hidden;
  border-radius: var(--radius, 0);
}
.image.framed > .frame > img,
.image.framed > .frame > canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  border-radius: inherit;
}
/* .flow: the picture box is always the full cell width (height from --ratio)
   and, like Squarespace's fit-mode image, its height counts towards the grid
   row sizes; the block's --align-m/--align-d place it vertically. */
.image.framed.flow { container-type: normal; height: auto; display: block; }
.image.framed.flow > .frame { width: 100%; }
/* .third-m: on phones, blocks sharing one grid area sit side by side as
   equal thirds (--third: 0, 1 or 2 is the position), each picture the full
   width of its third, so a row of three photos does not shrink to fit. */
@media (max-width: 767px) {
  .block.third-m {
    --third-w: calc((100% - 2 * var(--gap)) / 3);
    width: var(--third-w);
    justify-self: start;
    margin-left: calc(var(--third) * (var(--third-w) + var(--gap)));
  }
  .block.third-m .image.framed { container-type: normal; height: auto; display: block; }
  .block.third-m .image.framed > .frame { width: 100%; }
}
.image.framed > .frame[data-effect] > canvas { opacity: 0; }
.image.framed > .frame.effect-ready > canvas { opacity: 1; }

.button {
  --v: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 300px;
  padding: 0 1.336em;
  font-family: var(--font);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: normal;
  text-decoration: none;
  text-align: center;
  transition: opacity 0.1s linear;
}

@media (hover: hover) { .button:hover { opacity: 0.8; } }

.button.primary { background: var(--ink); color: #fff; }

.button.secondary {
  --v: 1.1;
  background: transparent;
  color: var(--accent);
  border: 2px solid var(--accent);
}

/* A button that keeps its own size inside the block, centred across it
   (Squarespace "large" button with --sqs-block-content-flex: 0). */
.button.natural {
  width: auto;
  height: auto;
  flex: none;
  align-self: center;
  padding: 0.8em 1.336em;
}

/* ---------- Accordion ---------- */

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

.accordion-item { border-bottom: 1px solid currentColor; }
.accordion-item:first-child { border-top: 1px solid currentColor; }

.accordion-item h3,
.accordion-item .accordion-heading { margin: 0; }

.accordion-toggle {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 15px 0;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
  cursor: pointer;
}

.accordion-title {
  flex: 1;
  font-size: clamp(20px, calc(20px + (100vw - 640px) * 6 / 800), 26px);
  line-height: normal;
  padding-left: 14px;
}

@media only screen and (max-width: 640px) {
  .accordion-title { font-size: 20px; }
}

.accordion-icon {
  flex: none;
  width: 14px;
  height: 14px;
  position: relative;
  transition: transform 0.3s ease;
}

.accordion-icon::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 30%;
  width: 70%;
  height: 70%;
  border-right: 3px solid currentColor;
  border-bottom: 3px solid currentColor;
  transform: translate(-50%, -50%) rotate(45deg);
}

.accordion-item.is-open .accordion-icon { transform: rotate(180deg); }

/* Home services list uses the default accordion size, not the 26px titles. */
.accordion.services .accordion-item { border-bottom: 3px solid currentColor; }
.accordion.services .accordion-item:first-child { border-top: 3px solid currentColor; }
.accordion.services .accordion-toggle { padding: 30px 0; }
.accordion.services .accordion-title { flex: 1; font-size: 15px; font-weight: 500; padding-left: 24px; }
.accordion.services .accordion-icon { width: 24px; height: 24px; }

.accordion-panel {
  overflow: hidden;
  height: 0;
  opacity: 0;
  transition: height 0.3s ease, opacity 0.6s ease;
}

.accordion-item.is-open .accordion-panel { opacity: 1; }

.accordion-panel .text { padding: 0 0 30px; }

/* ---------- Footer ---------- */

.site-footer .links a,
.site-footer .contact a { color: var(--accent); text-decoration: none; }

.social {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.social a {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
}

.social svg {
  width: 40px;
  height: 40px;
  flex: none;
  fill: var(--white);
}
/* Live draws each icon at twice the 20px link size, centred on the link. */
.social svg { margin: -10px; }

/* ---------- Fade in ---------- */

.fade {
  opacity: 0;
  transition: opacity 1.5s ease;
}

.fade.is-visible { opacity: 1; }

/* Until site.js has set up the entrance animations, content blocks stay hidden
   (html.anim-wait is set by a one-line script in each page head), so nothing
   shows and then fades out before animating in. If the script never runs they
   appear after 3s anyway. .anim-setup switches transitions off while the
   starting states are applied. */
.anim-wait main .block { opacity: 0; animation: anim-wait-reveal 0s 3s forwards; }
@keyframes anim-wait-reveal { to { opacity: 1; } }
.anim-setup main .block,
.anim-setup main .block * { transition: none !important; }

/* Text animations (site.js initFade): headings word by word, text rising in. */
.fade.rise {
  transform: translateY(18px);
  transition: opacity 1.1s ease, transform 1.1s cubic-bezier(0.2, 0.65, 0.3, 1);
}
.fade.rise.is-visible { transform: none; }
/* A fitted heading (not split into words) also sharpens as it rises. */
.fade.rise.soft { filter: blur(6px); transition-property: opacity, transform, filter; }
.fade.rise.soft.is-visible { filter: blur(0); }

.words .w {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.35em);
  filter: blur(6px);
  transition: opacity 0.8s ease, transform 0.9s cubic-bezier(0.2, 0.65, 0.3, 1), filter 0.8s ease;
  transition-delay: calc(var(--d, 0s) + var(--i, 0) * 55ms);
}
.words.is-visible .w { opacity: 1; transform: none; filter: blur(0); }

@media (prefers-reduced-motion: reduce) {
  .fade { opacity: 1; transition: none; }
  .fade.rise { transform: none; }
}

/* ---------- Map block (contact page) ----------
   A still of the live Google map (zoom 14), centred on the marker. The picture is
   drawn at its own size, never scaled, so every block size shows the same
   streets at the same scale as the live map. Google's logo and credits sit on top. */

.c-accent { color: var(--accent); }

.map {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  container-type: inline-size;
  background: #e5e3df image-set(url(/contact/media/map.webp) 1x, url(/contact/media/map@2x.webp) 2x) 50% 50% / 1600px 1000px no-repeat;
}
.map .map-marker {
  position: absolute;
  left: calc(50% - 12px);
  top: calc(50% - 32px);
  width: 24px;
  height: 32px;
}
.map .map-logo { position: absolute; left: 5px; bottom: 0; width: 66px; height: 26px; }
.map .map-logo img { width: 66px; height: 26px; }
.map-credits {
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  font: 10px/14px Roboto, Arial, sans-serif;
  color: #000;
  white-space: nowrap;
}
.map-credits > * {
  position: relative;
  display: block;
  height: 14px;
  padding: 0 6px;
  text-align: center;
  color: #000;
  text-decoration: none;
}
.map-credits > *::before {
  content: "";
  position: absolute;
  inset: 0 0 0 1px;
  z-index: -1;
  background: rgba(245, 245, 245, 0.7);
}
.map-credits { z-index: 0; isolation: isolate; }
.map-credits a:hover { text-decoration: underline; }
@container (max-width: 400px) { .map-credits .map-report { display: none; } }

/* ---------- Gallery block: slideshow ----------
   Squarespace gallery block, design "slideshow" (its "stacked" gallery).
   Markup: <div class="gallery slideshow" data-autoplay="8"> with one
   <figure class="slide"><img width height …>[<figcaption class="meta">…]</figure>
   per picture. site.js sets the height (the shortest slide at the block's
   width), fits each picture inside the box (never above its own size),
   cross-fades on a timer (paused while the mouse is over it) and advances
   on click. The outgoing slide hides at once; the new one fades in over 1s
   (quartic ease-out), as on Squarespace. --slide-radius rounds the pictures. */

.gallery.slideshow {
  position: relative;
  width: 100%;
  height: var(--gallery-h, auto);
  cursor: default;
}
.gallery.slideshow .slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  z-index: 888;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 1.2s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.gallery.slideshow .slide.is-active {
  opacity: 1;
  z-index: 889;
  visibility: visible;
  pointer-events: auto;
  transition-duration: 1s;
}
.gallery.slideshow .slide img {
  position: relative;
  display: block;
  max-width: none;
  left: var(--x, 0);
  top: var(--y, 0);
  width: var(--w, 100%);
  height: var(--h, auto);
  border-radius: var(--slide-radius, 0);
  font-size: 0;
}
/* The gallery itself does not take part in the block fade-in. */
.gallery.slideshow.fade { opacity: 1; transition: none; }
/* Title and description over the bottom of the picture ("show meta", position bottom). */
.gallery.slideshow .meta {
  display: none;
  position: absolute;
  bottom: 0;
  left: var(--meta-x, 0);
  width: var(--meta-w, 100%);
  background: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(30, 30, 30, 0.3) 100%);
  color: var(--white);
}
/* Only the current slide shows its caption; none on small phones (≤480px). */
.gallery.slideshow .slide.is-active .meta { display: block; }
@media only screen and (max-width: 480px) {
  .gallery.slideshow .meta { display: none !important; }
}
.gallery.slideshow .meta-inside { padding: 30px 20px 15px; }
.gallery.slideshow .meta-title {
  color: #fff;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: 1px;
}
.gallery.slideshow .meta-description {
  margin-top: 0.3em;
  color: rgba(255, 255, 255, 0.95);
  font-size: 14px;
  line-height: 1.5;
}
.gallery.slideshow .meta-description p {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
  opacity: 0;
  transition: opacity 1.5s ease 0.38s;
}
.gallery.slideshow.is-seen .meta-description p { opacity: 1; }
/* Only the showing slide has its caption laid out (as on Squarespace). */
.gallery.slideshow .slide:not(.is-active) .meta { display: none; }
/* Squarespace hides slideshow captions on screens up to 480px wide. */
@media only screen and (max-width: 480px) { .gallery.slideshow .meta { display: none; } }

/* ---------- Text highlight (Squarespace "highlight" text attribute) ----------
   <span class="highlight" data-shape="underlineCurve|circle" data-thickness="0.1">
   (thickness in em). site.js draws the shape behind the words and animates
   it in (2s, ease-out) when the heading starts to fade in. */

.highlight-shape {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  z-index: -1;
  pointer-events: none;
  user-select: none;
}
.highlight-shape svg {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: max(1px, var(--stroke-w, 0.1em));
  stroke-linecap: square;
  stroke-linejoin: bevel;
}

/* ---------- Accordion with the arrow on the right ----------
   <ul class="accordion chevron">: titles in a <p class="large accordion-heading">,
   30px above and below, a thin 24px chevron at the right that turns over
   in 0.25s, 50px under the open text, which fades in the first time it opens. */

.accordion.chevron .accordion-heading { margin: 0; }
.accordion.chevron .accordion-toggle {
  justify-content: space-between;
  padding: 30px 0;
  line-height: normal;
}
.accordion.chevron .accordion-title {
  flex: 1;
  font-size: inherit;
  line-height: normal;
  padding: 0 24px 0 0;
}
.accordion.chevron .accordion-icon {
  width: 24px;
  height: 24px;
  transition: transform 0.25s ease;
}
.accordion.chevron .accordion-icon::before {
  left: 50%;
  top: 50%;
  width: calc(24px / 1.41421356);
  height: calc(24px / 1.41421356);
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translate(-50%, -50%) translateY(calc(-24px / 1.41421356 / 4)) rotate(45deg);
}
.accordion.chevron .accordion-panel {
  opacity: 1;
  transition: height 0.25s cubic-bezier(0.66, 0, 0.34, 1);
}
.accordion.chevron .accordion-panel .text { padding: 0 0 50px; }
.accordion.chevron .accordion-panel .text > * { opacity: 0; transition: opacity 1.5s ease 0.3s; }
.accordion.chevron .accordion-item.was-open .accordion-panel .text > * { opacity: 1; }

/* ---------- Small additions used by /sports ---------- */

/* Squarespace palette "white" (#fafafa) as a text colour. */
.c-offwhite { color: var(--white); }

/* Picture block with its own corner radius: style="--radius: 50px". */
.image.radius { border-radius: var(--radius, 0); }

/* .button.natural lined up with the left of the block from 768px
   (Squarespace left-aligned button; still centred on phones). */
@media (min-width: 768px) {
  .button.natural.start-d { align-self: flex-start; }
}

/* Blocks that rise into place on load (owner's custom CSS "slideUp" on
   hero blocks). Delay with style="--delay: 0.7s". */
.slide-up {
  opacity: 0;
  transform: translateY(30px);
  animation: om-slide-up 2s ease forwards;
  animation-delay: var(--delay, 0s);
}
@keyframes om-slide-up {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .slide-up { animation: none; opacity: 1; transform: none; }
}

/* Owner's custom CSS on some sections: h3 at 21px up to 768px wide. */
@media (max-width: 768px) {
  .section.h3-m-21 h3 { font-size: 21px; }
}

/* A fit-mode picture in a block aligned to the top (Squarespace's
   flex-start alignment): .start-m on phones, .start-d from 768px. */
@media (max-width: 767px) {
  .image.contain.start-m img { margin-top: 0; }
}
@media (min-width: 768px) {
  .image.contain.start-d img { margin-top: 0; }
}

/* Image block effect drawn on the picture box itself (e.g.
   data-effect="parallax" on .image.rounded); the canvas covers the <img>. */
.image[data-effect] { position: relative; }
.image[data-effect] > canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  opacity: 0;
}
.image[data-effect].effect-ready > canvas { opacity: 1; }

/* Secondary (outline) button hover, as Squarespace: fills with the accent
   grey and the text turns black, over 0.1s. */
.button.secondary { transition: background-color 0.1s linear, color 0.1s linear; }
@media (hover: hover) { .button.secondary:hover { opacity: 1; background-color: var(--accent); color: #000; } }

/* ---------- Promotional popup (site.js initPromo) ----------
   Squarespace "popup overlay" as the live site has it: Open Sans (one variable
   file, declared at 600 and 700 like live; the phone styles ask for 300/500 and
   get 600, as on live). Desktop: centred dark card over a 30% black veil.
   600px and below: white sheet along the bottom of the screen, no veil. */
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/theme/fonts/open-sans-latin.woff2) format("woff2");
  unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/theme/fonts/open-sans-latin.woff2) format("woff2");
  unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.promo {
  position: fixed;
  inset: 0;
  z-index: 11000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.3);
  opacity: 0;
  transition: opacity 0.25s ease-out;
  font-family: "Open Sans";
}
.promo.is-visible { opacity: 1; }

.promo-card {
  position: relative;
  width: 100%;
  max-width: 735px;
  background: #253241;
  box-shadow: 2px 2px 20px 0 rgba(121, 121, 121, 0.17);
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
.promo.is-ready .promo-card { opacity: 1; }

.promo-copy { padding: 70px; text-align: center; color: #fff; }

.promo-title { line-height: 0; }
.promo-copy h2 {
  display: inline-block;
  margin: 0 0 25px;
  font-size: 40px;
  font-weight: 700;
  line-height: 40px;
  letter-spacing: normal;
  color: #fff;
}

.promo-copy p {
  max-width: 576px;
  margin: 0 auto;
  font-size: 16px;
  font-weight: 600;
  line-height: 22.4px;
  letter-spacing: 0.24px;
}

.promo-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 550px;
  margin: 30px auto 0;
  padding: 0;
  list-style: none;
}
.promo-actions li { flex: 1 1 0; margin: 3%; } /* 16.5px at the full 550px */
.promo-actions a {
  display: block;
  padding: 19.6px 35px;
  border-radius: 999px;
  background: #e3e3e3;
  color: #4e6888;
  font-size: 14px;
  font-weight: 700;
  line-height: 14px;
  letter-spacing: 0.7px;
  text-align: center;
  text-decoration: none;
}

.promo-close {
  position: absolute;
  display: flex;
  top: 3px;
  right: 3px;
  z-index: 999;
  padding: 6px 10.5px;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 15px;
  color: #d9d9d9;
  text-decoration: none;
  cursor: pointer;
}
.promo-close::before { content: "×"; display: inline-block; font-size: 22px; line-height: 1em; }
.promo-close:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

@media (max-width: 600px) {
  .promo { align-items: flex-end; background: transparent; pointer-events: none; }
  .promo-card {
    max-width: 100%;
    max-height: 100%;
    overflow-y: auto;
    box-shadow: none;
    border-top: 1px solid rgba(121, 121, 121, 0.1);
    pointer-events: auto;
  }
  .promo-copy { padding: 25px; background: #fff; text-align: left; color: #000; }
  .promo-copy h2 { font-size: 21px; font-weight: 500; line-height: 21px; color: #000; }
  .promo-copy p { max-width: none; font-size: 12px; font-weight: 300; line-height: 18px; letter-spacing: 0.5px; }
  .promo-actions { max-width: none; margin-top: 20px; }
  .promo-actions a {
    padding: 12px;
    background: #222;
    color: #fff;
    font-size: 12px;
    font-weight: 300;
    line-height: 12px;
    letter-spacing: 1px;
  }
  .promo-close::before { color: #ababab; }
}

/* ---------- FAQ section (owner's addition) ----------
   Intro and a "Get in touch" button on the left, the questions in the chevron
   accordion on the right; one column on phones. */
.faq-intro .button {
  display: inline-flex;
  width: auto;
  height: auto;
  padding: 1.1em 2.6em;
  text-decoration: none;
}
@media (min-width: 768px) {
  /* The intro stays in view while the questions scroll past. */
  .faq-intro .text { position: sticky; top: calc(var(--header-h, 0px) + 24px); }
}
@media (max-width: 767px) {
  .faq-intro { margin-bottom: 32px; }
}
/* On Live Events the FAQ sits inside the Get in touch section, above its
   content, so both share one background. */
.section-content > .faq-section { padding: 4vmax 0 6vmax; }