/* This site's own styles for page content (src/config/own-code.ts lists the
   pages that use it). Values match the live site's design settings
   (docs/own-code.md § What the Squarespace theme does). The header, menu and
   footer have their own styles in src/styles/chrome.css; the site's own Custom
   CSS (public/css/custom.css) loads after this file. */

/* Inter Tight italic (SIL Open Font License 1.1), for emphasis in text; the upright
   files are in src/styles/chrome.css. */
@font-face {
  font-family: 'Inter Tight';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter-tight-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: 'Inter Tight';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter-tight-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;
}

/* ---------------------------------------------------------------------------
   Design values
   --------------------------------------------------------------------------- */
:root {
  /* Page grid: side gutter and widest content (the page blocks' grids read these). */
  --sqs-site-gutter: 4vw;
  --sqs-mobile-site-gutter: 6vw;
  --sqs-site-max-width: 3000px;

  /* Type sizes, in rem at the 15px root (see the fluid sizes below). */
  --oz-v-h1: 3.43;
  --oz-v-h2: 2.74;
  --oz-v-h3: 2.16;
  --oz-v-h4: 1.47;
  --oz-v-text: 1.18;
  --oz-v-large: 1.18;
  --oz-v-small: 0.78;
  --oz-lh: 1.22;
  /* Headings: line height and letter spacing. */
  --oz-lh-h: 1.22;
  --oz-ls-h: 0em;
  /* Primary button: size (rem) and weight. */
  --oz-v-button: 1.1;
  --oz-button-weight: 700;

  /* Palette */
  --oz-white: hsl(37.5 26.67% 94.12%);
  --oz-black: hsl(224.62 95.12% 8.04%);
  --oz-accent: hsl(73.64 73.33% 64.71%);
  --oz-dark-accent: hsl(156.52 100% 9.02%);
  --oz-ink: hsl(198.95 40.43% 9.22%);
  --oz-paper: rgb(244, 241, 236);
}

/* Fluid sizes: on wide or landscape screens a size grows with the width; on
   portrait phones with the height (up to 900px tall). Same formula as
   src/styles/chrome.css. */
@media screen and (min-width: 768px), screen and (orientation: landscape) {
  :root {
    --oz-fs-h1: min(calc((var(--oz-v-h1) - 1) * 1.2vw + 1rem), max(calc((var(--oz-v-h1) - 1) * 36px + 1rem), calc(var(--oz-v-h1) * 1rem)));
    --oz-fs-h2: min(calc((var(--oz-v-h2) - 1) * 1.2vw + 1rem), max(calc((var(--oz-v-h2) - 1) * 36px + 1rem), calc(var(--oz-v-h2) * 1rem)));
    --oz-fs-h3: min(calc((var(--oz-v-h3) - 1) * 1.2vw + 1rem), max(calc((var(--oz-v-h3) - 1) * 36px + 1rem), calc(var(--oz-v-h3) * 1rem)));
    --oz-fs-h4: min(calc((var(--oz-v-h4) - 1) * 1.2vw + 1rem), max(calc((var(--oz-v-h4) - 1) * 36px + 1rem), calc(var(--oz-v-h4) * 1rem)));
    --oz-fs-text: min(calc((var(--oz-v-text) - 1) * 1.2vw + 1rem), max(calc((var(--oz-v-text) - 1) * 36px + 1rem), calc(var(--oz-v-text) * 1rem)));
    --oz-fs-large: min(calc((var(--oz-v-large) - 1) * 1.2vw + 1rem), max(calc((var(--oz-v-large) - 1) * 36px + 1rem), calc(var(--oz-v-large) * 1rem)));
    --oz-fs-small: min(calc((var(--oz-v-small) - 1) * 1.2vw + 1rem), max(calc((var(--oz-v-small) - 1) * 36px + 1rem), calc(var(--oz-v-small) * 1rem)));
  }
}
@media screen and (max-width: 767px) and (orientation: portrait) {
  :root {
    --oz-fs-h1: calc((var(--oz-v-h1) - 1) * 0.012 * min(100vh, 900px) + 1rem);
    --oz-fs-h2: calc((var(--oz-v-h2) - 1) * 0.012 * min(100vh, 900px) + 1rem);
    --oz-fs-h3: calc((var(--oz-v-h3) - 1) * 0.012 * min(100vh, 900px) + 1rem);
    --oz-fs-h4: calc((var(--oz-v-h4) - 1) * 0.012 * min(100vh, 900px) + 1rem);
    --oz-fs-text: calc((var(--oz-v-text) - 1) * 0.012 * min(100vh, 900px) + 1rem);
    --oz-fs-large: calc((var(--oz-v-large) - 1) * 0.012 * min(100vh, 900px) + 1rem);
    --oz-fs-small: calc((var(--oz-v-small) - 1) * 0.012 * min(100vh, 900px) + 1rem);
  }
}

/* ---------------------------------------------------------------------------
   Base
   --------------------------------------------------------------------------- */
html { font-size: 15px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  color: var(--oz-ink);
  background-color: var(--oz-paper);
  overflow-wrap: break-word;
  font-family: sans-serif;
}
.site-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font-family: 'Inter Tight';
  font-size: var(--oz-fs-text);
  line-height: calc(var(--oz-lh) * 1em);
  -webkit-font-smoothing: antialiased;
}
#page { z-index: 9; }
/* Squarespace's shop cart button: the site sells nothing. */
.floating-cart { display: none; }
a { color: inherit; text-decoration: none; background-position: 0 0; }
button { font-family: 'Inter Tight', sans-serif; font-size: inherit; }
/* Links in text: the theme's link colour, underlined by a 1px line that thickens
   while the link takes the text colour on hover. */
p a { color: var(--oz-link, var(--oz-accent)); text-decoration: none; }
.sqs-block p a {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-position: 0% 100%;
  background-repeat: no-repeat;
  transition: color 0.6s cubic-bezier(0.19, 1, 0.22, 1), background-size 0.3s cubic-bezier(0.19, 1, 0.22, 1);
}
.sqs-block p a:hover { color: inherit; background-size: 100% 2px; }

/* Text: headings shrink their line height a little as they grow. */
h1, h2, h3, h4 {
  font-weight: 600;
  letter-spacing: var(--oz-ls-h);
  color: var(--oz-heading, var(--oz-ink));
}
h1 { font-size: var(--oz-fs-h1); line-height: calc(var(--oz-lh-h) * (1 + (1 - var(--oz-v-h1)) / 25) * 1em); margin: 2rem 0; }
h2 { font-size: var(--oz-fs-h2); line-height: calc(var(--oz-lh-h) * (1 + (1 - var(--oz-v-h2)) / 25) * 1em); margin: 2rem 0; }
h3 { font-size: var(--oz-fs-h3); line-height: calc(var(--oz-lh-h) * (1 + (1 - var(--oz-v-h3)) / 25) * 1em); margin: 2rem 0; }
h4 { font-size: var(--oz-fs-h4); line-height: calc(var(--oz-lh-h) * (1 + (1 - var(--oz-v-h4)) / 25) * 1em); margin: 2rem 0; }
p { margin: 1rem 0; line-height: calc(var(--oz-lh) * 1em); }
/* An empty paragraph kept in the editor still takes a line. */
p[data-rte-preserve-empty]:empty::before { content: ''; display: inline-block; }
strong, b { font-weight: 700; }
summary { display: block; }
ul, ol { margin: 1em 0; }
main nav ul { list-style: none; }

/* Text colours picked in the editor */
.sqsrte-text-color--black { color: var(--oz-black); }

/* ---------------------------------------------------------------------------
   Sections
   --------------------------------------------------------------------------- */
.page-section {
  position: relative;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}
/* The first section starts below the fixed header: public/js/chrome.js sets its padding. */
.page-section.section-height--medium { min-height: 66vh; }
.page-section.section-height--medium > .content-wrapper { padding-top: 6.6vmax; padding-bottom: 6.6vmax; }
.section-border,
.section-background {
  position: absolute;
  inset: 0;
  background-color: var(--oz-section-bg, var(--oz-paper));
}
.section-background { overflow: hidden; pointer-events: none; }
.page-section > .content-wrapper {
  position: relative;
  display: flex;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}
.page-section.horizontal-alignment--center > .content-wrapper { justify-content: center; }
.page-section .content { width: 100%; }
[data-fluid-engine] { position: relative; }

/* Section colour themes */
[data-section-theme='white'] { --oz-section-bg: var(--oz-white); }

/* ---------------------------------------------------------------------------
   Blocks
   --------------------------------------------------------------------------- */
.fluid-engine .sqs-block {
  position: relative;
  border-color: var(--oz-ink);
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}
.sqs-block:not(.sqs-block-html) { clear: both; }
@media (max-width: 767px) {
  .fluid-engine .sqs-block { display: block; }
  .fluid-engine .sqs-block-html { max-width: 100%; }
  .fluid-engine .sqs-block-content { min-height: 0; }
}
.fluid-engine .sqs-block-html { border-color: var(--oz-black); }
.sqs-html-content { position: relative; z-index: 0; }
.sqs-html-content > :first-child { margin-top: 0; }
.sqs-html-content > :last-child { margin-bottom: 0; }
.sqs-block-code iframe { border-width: 0; }

/* Plain pages (404 and other system pages) */
.system-page {
  max-width: var(--sqs-site-max-width);
  margin: 0 auto;
  padding: var(--header-height, 0px) 4vw 4vw;
}
.system-page > :first-child { padding-top: 4vw; }

/* ---------------------------------------------------------------------------
   Reveal on scroll (public/js/ui.js)
   --------------------------------------------------------------------------- */
.oz-reveal {
  opacity: 0;
  transform: translate(0, 2vh);
  transition-property: transform, opacity;
  transition-duration: 0.65s;
  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}
.oz-reveal.oz-in { opacity: 1; transform: translate(0, 0); }
/* Headings with plain text play in word by word. */
.oz-words-wait { opacity: 0; }
.oz-word { display: inline-flex; overflow: hidden; }
.oz-word > span {
  display: inline-block;
  opacity: 0;
  transform: translate(0, 100%);
  transition-property: transform, opacity;
  transition-duration: 0.65s;
  transition-timing-function: ease;
}
.oz-words-in .oz-word > span { opacity: 1; transform: translate(0, 0); }

/* ===========================================================================
   Section themes, section heights, buttons, image blocks and dividers (first
   used by the Tennis Evolution pages; the form pages add their own below).
   =========================================================================== */

/* Section colour themes. Each sets the section's background, text, heading,
   link, button and line colours (values from the live site's colour settings). */
[data-section-theme] { color: var(--oz-text, var(--oz-ink)); }
[data-section-theme='white-bold'] {
  --oz-overlay: hsl(37.5 26.67% 94.12%);
  --oz-section-bg: var(--oz-white);
  --oz-text: var(--oz-ink);
  --oz-text-small: var(--oz-ink);
  --oz-heading: var(--oz-ink);
  --oz-link: hsl(73.51 83.43% 35.49%);
  --oz-button-bg: hsl(73.65 67.07% 51.18%);
  --oz-button-text: hsl(0 0% 0%);
  --oz-button2: var(--oz-accent);
  --oz-button2-text: hsl(0 0% 100%);
  --oz-line: var(--oz-accent);
  --oz-stroke: hsl(0 0% 0%);
}
[data-section-theme='black'] {
  --oz-overlay: hsl(224.62 95.12% 8.04% / 0);
  --oz-section-bg: hsl(181.88 24.62% 25.49%);
  --oz-text: var(--oz-white);
  --oz-text-small: var(--oz-accent);
  --oz-heading: var(--oz-white);
  --oz-link: var(--oz-accent);
  --oz-button-bg: hsl(73.64 73.33% 64.71% / 0.84);
  --oz-button-text: hsl(0 0% 0%);
  --oz-button2: var(--oz-accent);
  --oz-button2-text: var(--oz-white);
  --oz-line: hsl(37.5 26.67% 94.12% / 0.54);
  --oz-stroke: var(--oz-accent);
}
[data-section-theme='black-bold'] {
  --oz-overlay: hsl(224.62 95.12% 8.04% / 0);
  --oz-section-bg: var(--oz-black);
  --oz-text: var(--oz-white);
  --oz-text-small: var(--oz-white);
  --oz-heading: var(--oz-white);
  --oz-link: var(--oz-accent);
  --oz-button-bg: var(--oz-accent);
  --oz-button-text: hsl(0 0% 0%);
  --oz-button2: var(--oz-accent);
  --oz-button2-text: var(--oz-white);
  --oz-line: var(--oz-accent);
  --oz-stroke: var(--oz-accent);
}
[data-section-theme='dark'] {
  --oz-overlay: var(--oz-dark-accent);
  --oz-section-bg: var(--oz-dark-accent);
  --oz-text: var(--oz-white);
  --oz-text-small: var(--oz-white);
  --oz-heading: var(--oz-white);
  --oz-link: var(--oz-accent);
  --oz-button-bg: var(--oz-accent);
  --oz-button-text: hsl(0 0% 0%);
  --oz-button2: var(--oz-accent);
  --oz-button2-text: hsl(0 0% 0%);
  --oz-line: var(--oz-white);
  --oz-stroke: var(--oz-accent);
}
[data-section-theme='dark-bold'] {
  --oz-overlay: var(--oz-dark-accent);
  --oz-section-bg: var(--oz-dark-accent);
  --oz-text: var(--oz-white);
  --oz-text-small: var(--oz-white);
  --oz-heading: var(--oz-accent);
  --oz-link: var(--oz-accent);
  --oz-button-bg: var(--oz-accent);
  --oz-button-text: hsl(240 100% 0.2%);
  --oz-button2: var(--oz-accent);
  --oz-button2-text: var(--oz-white);
  --oz-line: var(--oz-white);
  --oz-stroke: var(--oz-accent);
}
[data-section-theme='bright-inverse'] {
  --oz-overlay: var(--oz-black);
  --oz-section-bg: var(--oz-black);
  --oz-text: var(--oz-white);
  --oz-text-small: var(--oz-accent);
  --oz-text-large: var(--oz-accent);
  --oz-heading: var(--oz-accent);
  --oz-link: var(--oz-accent);
  --oz-button-bg: var(--oz-accent);
  --oz-button-text: var(--oz-dark-accent);
  --oz-button2: var(--oz-accent);
  --oz-button2-text: var(--oz-safe-inverse-accent, hsl(0 0% 0%));
  --oz-line: var(--oz-accent);
  --oz-stroke: var(--oz-accent);
  --oz-highlight: var(--oz-accent);
}
.sqs-block-html { border-color: var(--oz-stroke, var(--oz-black)); }
.sqsrte-large { font-size: var(--oz-fs-large); margin: 1rem 0; line-height: calc(var(--oz-lh) * 1em); color: var(--oz-text-large, inherit); }
.sqsrte-small { font-size: var(--oz-fs-small); margin: 1rem 0; line-height: calc(var(--oz-lh) * 1em); color: var(--oz-text-small, inherit); }
.sqsrte-text-color--white { color: var(--oz-white); }
.sqsrte-text-color--accent,
.sqsrte-text-color--lightAccent { color: var(--oz-accent); }
[class^='sqsrte-text-color--'] { text-decoration: inherit; }
.sqs-block-html a { color: var(--oz-link, var(--oz-accent)); white-space: normal; text-underline-offset: 0.2em; }
[data-section-theme] .fluid-engine .sqs-block { border-color: currentColor; }
[data-section-theme] .fluid-engine .sqs-block-html { border-color: var(--oz-stroke); }

/* Form fields take the form's own font (the embedded forms style the rest). */
input, select, textarea { font-family: inherit; font-size: 100%; margin: 0; }
input, button { line-height: normal; }

/* Section heights and backgrounds */
.page-section.section-height--small { min-height: 33vh; }
.page-section.section-height--small > .content-wrapper { padding-top: 3.3vmax; padding-bottom: 3.3vmax; }
.page-section > .content-wrapper { max-width: var(--sqs-site-max-width); }
.page-section.full-bleed-section > .content-wrapper { max-width: 100%; }
.section-border { top: calc(-1 * var(--previous-section-divider-offset, 0px)); }
.section-background .section-background-content,
.section-background .section-background-overlay { position: absolute; inset: 0; }
.section-background img { position: relative; display: block; width: 100%; height: 100%; object-fit: cover; }
.section-background-overlay { opacity: 0; background-color: var(--oz-overlay, transparent); }
/* Pause button of a background video: Squarespace's script shows it only while
   one plays; these pages have none. */
.background-pause-button {
  display: none;
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 999;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.5);
  cursor: pointer;
}
.image-block-outer-wrapper { transform: translateZ(0); }

/* Buttons: primary is a solid pill, secondary an outlined pill. On hover the
   button fills from the bottom with its text colour while the text takes the
   button colour. */
.sqs-block-button-container { display: flex; text-align: center; }
.sqs-block-button-container--left { justify-content: flex-start; text-align: left; }
.sqs-block-button-container--center { justify-content: center; text-align: center; }
.sqs-block-button-container--right { justify-content: flex-end; text-align: right; }
.sqs-block-button .sqs-block-content { flex: var(--sqs-block-content-flex, 0); }
[data-button-type='primary'] { overflow: hidden; }
.sqs-block-button.sqs-stretched,
.sqs-block-button .sqs-stretched { flex: 1 1 0%; height: 100%; }
.sqs-block-button-element {
  display: inline-block;
  -webkit-font-smoothing: antialiased;
  line-height: normal;
  border-style: solid;
  border-radius: 300px;
  position: relative;
  transform: scaleY(1);
  backface-visibility: hidden;
  transition: color 0.6s cubic-bezier(0.19, 1, 0.22, 1);
}
.sqs-stretched .sqs-block-button-element {
  box-sizing: border-box;
  display: flex;
  flex: 1 1 0%;
  height: 100%;
  align-items: center;
  justify-content: center;
}
.sqs-button-element--primary {
  font-family: 'Inter Tight';
  font-weight: var(--oz-button-weight);
  font-size: var(--oz-fs-button);
  letter-spacing: 0.01em;
  text-transform: capitalize;
  padding: 1.2rem 1.5rem;
  border-width: 0;
  color: var(--oz-button-text, hsl(0 0% 0%));
  background-color: var(--oz-button-bg, var(--oz-accent));
  border-color: var(--oz-button-text, hsl(0 0% 0%));
}
.sqs-button-element--secondary {
  font-family: 'Inter Tight';
  font-weight: 500;
  font-size: var(--oz-fs-button2);
  letter-spacing: 0.01em;
  text-transform: capitalize;
  padding: 1.5rem 2.2rem;
  border-width: 2px;
  color: var(--oz-button2, var(--oz-accent));
  border-color: var(--oz-button2, var(--oz-accent));
  background-color: transparent;
  background-image: none;
}
.sqs-stretched .sqs-block-button-element { padding-top: 0 !important; padding-bottom: 0 !important; }
@media (hover: hover) {
  .sqs-block-button-element::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-style: solid;
    border-width: 2px;
    border-radius: 300px;
    clip-path: polygon(-2% 102%, 102% 102%, 102% 102%, -2% 102%);
    transform: translateZ(0);
    transition: clip-path 0.6s cubic-bezier(0.19, 1, 0.22, 1);
  }
  .sqs-block-button-element:hover::before { clip-path: polygon(-2% -2%, 102% -2%, 102% 102%, -2% 102%); }
  .sqs-button-element--primary::before {
    border-color: var(--oz-button-bg, var(--oz-accent));
    background-color: var(--oz-button-text, hsl(0 0% 0%));
  }
  .sqs-button-element--primary:hover { color: var(--oz-button-bg, var(--oz-accent)); }
  .sqs-button-element--secondary::before {
    border-width: 0;
    inset: -2px;
    border-color: var(--oz-button2, var(--oz-accent));
    background-color: var(--oz-button2, var(--oz-accent));
  }
  .sqs-button-element--secondary:hover { color: var(--oz-button2-text, var(--oz-white)); }
}
@media screen and (min-width: 768px), screen and (orientation: landscape) {
  :root {
    --oz-fs-button: min(calc((var(--oz-v-button) - 1) * 1.2vw + 1rem), max(calc((var(--oz-v-button) - 1) * 36px + 1rem), calc(var(--oz-v-button) * 1rem)));
    --oz-fs-button2: min(calc(-0.12 * 1.2vw + 1rem), max(calc(-0.12 * 36px + 1rem), 0.88rem));
  }
}
@media screen and (max-width: 767px) and (orientation: portrait) {
  :root {
    --oz-fs-button: calc((var(--oz-v-button) - 1) * 0.012 * min(100vh, 900px) + 1rem);
    --oz-fs-button2: calc(-0.12 * 0.012 * min(100vh, 900px) + 1rem);
  }
}

/* Image blocks: the image fills its place in the grid (cropped to it), with
   its overlay on top. */
.sqs-block-image .image-block-outer-wrapper,
.sqs-block-image .sqs-block-content,
.sqs-block-image .sqs-image { width: 100%; height: 100%; }
.sqs-block-image .sqs-image-content {
  position: relative;
  width: var(--image-component-container-width, 100%);
  height: var(--image-component-container-height, 100%);
}
.sqs-block-image .design-layout-fluid,
.sqs-block-image .design-layout-fluid .fluid-image-animation-wrapper { width: 100%; height: 100%; }
.sqs-block-image .design-layout-fluid .sqs-image { display: flex; }
.sqs-block-image .design-layout-fluid.image-position-center .sqs-image { justify-content: center; }
.sqs-block-image .design-layout-fluid img { position: absolute; display: block; width: 100%; height: 100%; }
.sqs-block-image .design-layout-fluid .fluid-image-container .content-fill,
.sqs-block-image .design-layout-fluid .fluid-image-container .content-fill img {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.sqs-block-image .fluidImageOverlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--image-block-overlay-color, hsl(224.62 95.12% 8.04% / 0.5));
  mix-blend-mode: var(--image-component-overlay-blend-mode);
  opacity: var(--image-component-overlay-opacity);
}
[data-animation-role='image'] { min-height: 1px; }

/* Divider (line block) */
hr { box-sizing: content-box; height: 0; }
.sqs-block-horizontalrule hr,
.sqs-block[data-definition-name='website.components.horizontalrule'] hr {
  border: none;
  height: 1px;
  background-color: var(--oz-line, var(--oz-accent));
}
/* Reveal on scroll for images (public/js/ui.js): uncovered from the bottom up. */
.oz-reveal-image {
  opacity: 0;
  clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
  transition-property: opacity, clip-path;
  transition-duration: 0.65s;
  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}
.oz-reveal-image.oz-in { opacity: 1; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
/* A primary button also slides up into its pill as it plays in. */
[data-button-type='primary'].oz-reveal .sqs-button-element--primary { transition: inherit; transform: translate(0, 100%); }
[data-button-type='primary'].oz-reveal.oz-in .sqs-button-element--primary { transform: translate(0, 0); }

/* ---------------------------------------------------------------------------
   Form pages: empty headings, text sized to its line, section dividers
   --------------------------------------------------------------------------- */
/* Empty headings kept in the editor still take a line. */
h1[data-rte-preserve-empty]:empty::before,
h2[data-rte-preserve-empty]:empty::before,
h3[data-rte-preserve-empty]:empty::before,
h4[data-rte-preserve-empty]:empty::before { content: ''; display: inline-block; }

/* Text sized to fill its line (public/js/ui.js scales it). */
.sqs-html-content .sqsrte-scaled-text-container { height: auto; }
.sqs-html-content .sqsrte-scaled-text-container > .sqsrte-scaled-text {
  position: absolute;
  left: -10000px;
  display: inline-block;
  margin: 0;
  padding: 0;
  transform-origin: 0 0;
  word-break: break-all;
}
.sqs-html-content .sqsrte-scaled-text-container > .sqsrte-scaled-text :is(h1, h2, h3, h4, p, a, pre, code) {
  margin: 0;
  padding: 0;
  line-height: 1;
  font-size: inherit !important;
}
.sqs-html-content .sqsrte-scaled-text-container.loaded .sqsrte-scaled-text,
.sqs-html-content .sqsrte-scaled-text-container.loaded .sqsrte-scaled-text :is(h1, h2, h3, h4, p, a, pre, code) {
  position: relative;
  left: initial;
  margin: 0;
  white-space: nowrap !important;
}

/* Section divider: the shape drawn across the bottom edge of a section. */
.has-section-divider .section-border { transform: translateZ(0); }
.section-divider-display {
  position: absolute;
  top: calc(-1 * var(--previous-section-divider-offset, 0px));
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 999;
  pointer-events: none;
}
.section-divider-block { position: absolute; bottom: 0; left: 0; width: 100%; visibility: hidden; }
.section-divider-display svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: visible; }
.section-divider-stroke {
  stroke: var(--section-divider-stroke-color);
  stroke-width: var(--stroke-thickness);
  stroke-dasharray: var(--stroke-dasharray);
  stroke-linecap: var(--stroke-linecap);
  fill: transparent;
}

/* ---------------------------------------------------------------------------
   Highlighted words: a hand-drawn line behind the text (public/js/ui.js)
   --------------------------------------------------------------------------- */
.oz-hl {
  --stroke: currentColor;
  --stroke-width: 1px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  transform: scale(1);
}
.oz-hl svg {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  stroke: var(--stroke);
  stroke-width: max(1px, var(--stroke-width));
  stroke-linecap: var(--stroke-linecap);
  stroke-linejoin: var(--stroke-linejoin);
  fill: none;
}
/* Highlight colour per section theme (the theme's "safe" dark or light accent). */
:root, [data-section-theme='white-bold'], [data-section-theme='white'] { --oz-highlight: var(--oz-safe-dark-accent, hsl(0 0% 0%)); }
[data-section-theme='black'], [data-section-theme='black-bold'], [data-section-theme='dark'], [data-section-theme='dark-bold'] { --oz-highlight: var(--oz-accent); }
[data-section-theme='bright-inverse'] { --oz-highlight-on-bg: var(--oz-safe-inverse-accent, hsl(0 0% 0%)); }

/* ---------------------------------------------------------------------------
   Stacks: blocks laid out in a row or column inside one grid place. The page
   sets each stack's direction, gap and alignment, and each child's size, as
   variables on the stack and its children.
   --------------------------------------------------------------------------- */
.sqs-block[data-definition-name='website.components.stack'] { box-sizing: border-box; }
.sqs-block[data-definition-name='website.components.stack'] > .sqs-block-content,
.sqs-block[data-definition-name='website.components.stack'] > .sqs-block-content > .sqs-stack-container { box-sizing: border-box; width: 100%; height: 100%; }
.sqs-stack-container {
  position: relative;
  display: flex;
  flex-direction: var(--stack-flex-direction);
  gap: var(--stack-gap);
  align-items: var(--stack-align-items);
  justify-content: var(--stack-justify-content);
}
.sqs-stack-container > .stack-child-container {
  position: relative;
  display: var(--child-display);
  flex: var(--child-flex);
  align-self: var(--child-align-self);
  width: var(--child-fixed-width);
  height: var(--child-fixed-height);
  min-width: var(--child-min-width);
  min-height: var(--child-min-height);
  margin-right: var(--child-custom-gap-margin-right);
  margin-bottom: var(--child-custom-gap-margin-bottom);
}
/* What a child holds starts from the defaults again (a stack inside a stack sets its own). */
.sqs-stack-container > .stack-child-container > :not(.stack-child-ui) {
  --child-display: initial; --child-flex: initial; --child-align-self: initial; --child-min-height: initial; --child-min-width: initial;
  --child-fixed-width: initial; --child-fixed-height: initial; --stack-gap: initial; --stack-justify-content: initial;
  --stack-align-items: initial; --stack-flex-direction: initial; --child-custom-gap: initial;
  --child-custom-gap-margin-right: initial; --child-custom-gap-margin-bottom: initial;
}
.sqs-stack-container > .stack-child-container > :is(.fe-block, .fluid-engine-block, .sqs-block) { width: 100%; height: 100%; }
.stack-background-frame {
  position: absolute;
  inset: calc(var(--stroke-thickness, 0px) * -1);
  z-index: 0;
  overflow: hidden;
  box-sizing: border-box;
  border: var(--stroke-thickness, 0) solid transparent;
  border-radius: var(--stack-radius);
}
.stack-background-frame :is(.stack-background-color-overlay, .stack-background-gradient-overlay, .stack-background-image) { position: absolute; inset: 0; }

/* Tertiary buttons: a solid pill like the primary one, in the theme's third
   button colours; it fills from the bottom with its text colour on hover. */
[data-section-theme='white-bold'] { --oz-button3: hsl(9.42 75.49% 49.61%); --oz-button3-text: var(--oz-safe-inverse-dark, hsl(0 0% 100%)); }
[data-section-theme='black'] { --oz-button3: var(--oz-accent); --oz-button3-text: var(--oz-safe-inverse-light, hsl(0 0% 0%)); }
[data-section-theme='black-bold'] { --oz-button3: var(--oz-accent); --oz-button3-text: var(--oz-safe-inverse-light, hsl(0 0% 0%)); }
[data-section-theme='dark'] { --oz-button3: var(--oz-accent); --oz-button3-text: var(--oz-safe-inverse-light, hsl(0 0% 0%)); }
[data-section-theme='dark-bold'] { --oz-button3: var(--oz-accent); --oz-button3-text: var(--oz-safe-inverse-light, hsl(0 0% 0%)); }
[data-section-theme='bright-inverse'] { --oz-button3: var(--oz-accent); --oz-button3-text: var(--oz-safe-inverse-accent, hsl(0 0% 0%)); }
.sqs-button-element--tertiary {
  background-position: 0% 0%;
  font-family: 'Inter Tight';
  font-weight: 500;
  font-size: var(--oz-fs-button3);
  letter-spacing: 0.01em;
  text-transform: capitalize;
  padding: 1rem 1.3rem;
  border-width: 0;
  color: var(--oz-button3-text, var(--oz-dark-accent));
  background-color: var(--oz-button3, var(--oz-accent));
  border-color: var(--oz-button3-text, var(--oz-dark-accent));
}
@media (hover: hover) {
  .sqs-button-element--tertiary::before { border-width: 0; border-color: var(--oz-button3, var(--oz-accent)); background-color: var(--oz-button3-text, var(--oz-dark-accent)); }
  .sqs-button-element--tertiary:hover { color: var(--oz-button3, var(--oz-accent)); }
}
:root { --oz-v-button3: 0.88; }
@media screen and (min-width: 768px), screen and (orientation: landscape) {
  :root { --oz-fs-button3: min(calc((var(--oz-v-button3) - 1) * 1.2vw + 1rem), max(calc((var(--oz-v-button3) - 1) * 36px + 1rem), calc(var(--oz-v-button3) * 1rem))); }
}
@media screen and (max-width: 767px) and (orientation: portrait) {
  :root { --oz-fs-button3: calc((var(--oz-v-button3) - 1) * 0.012 * min(100vh, 900px) + 1rem); }
}

/* An image set to fit inside a stack keeps its own shape and takes its place in
   the flow (the stack sizes around it). */
[data-component-layout-flow='normal'] .sqs-block-image .design-layout-fluid.image-component-container-fit .fluid-image-container {
  --image-component-container-width: initial;
  --image-component-container-height: initial;
}
[data-component-layout-flow='normal'] .sqs-block-image .design-layout-fluid.image-component-container-fit .fluid-image-container .content-fit img {
  aspect-ratio: var(--image-component-native-aspect-ratio);
  position: static;
}

/* Video blocks: the player fills a box of the video's shape (the wrapper's
   bottom padding). */
.sqs-block-video .sqs-block-content { border-radius: inherit; }
.sqs-block-video .intrinsic { position: relative; box-sizing: border-box; isolation: isolate; }
.sqs-block-video .intrinsic .embed-block-wrapper { position: relative; z-index: 1; }
.sqs-block-video .intrinsic .embed-block-wrapper .sqs-video-wrapper,
.sqs-block-video .intrinsic .embed-block-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* A section whose background is inset: the background sits a page gutter in
   from every edge, on the theme's border colour. */
.page-section.background-width--inset:not(.content-collection):not(.gallery-section):not(.user-items-list-section) { padding: 4vw; }
.page-section.background-width--inset:not(.content-collection):not(.gallery-section):not(.user-items-list-section) .section-background { top: calc(4vw + var(--previous-section-divider-offset, 0px)); right: 4vw; bottom: 4vw; left: 4vw; }
.page-section.background-width--inset .section-border { background-color: var(--oz-inset-border, var(--oz-white)); }
[data-section-theme='black'] { --oz-inset-border: hsl(37.5 26.67% 94.12% / 0.85); }
/* Text inside a text block (not its large headings) breaks long words. */
.sqs-block-html .sqs-html-content *:not(h1):not(h2):not(h3) { overflow-wrap: break-word; }

/* A background image that drifts and zooms as the section scrolls past
   (public/js/ui.js moves it). */
.section-background-content[data-controller='BackgroundImageFXParallax'] { overflow: hidden; }
.section-background-content[data-controller='BackgroundImageFXParallax'] img.background-image-fx { will-change: transform; }
.section-background-canvas.background-fx-canvas { position: absolute; inset: 0; overflow: hidden; }

/* ===========================================================================
   Blog pages (/blog, its categories and each post): fades, the classic block
   layout, image blocks in it, the blog list and post, summary blocks.
   =========================================================================== */

/* Fade in (public/js/ui.js): dates and content marked data-animation-role
   "content" or "date". */
.oz-fade {
  opacity: 0;
  transition: opacity 0.65s cubic-bezier(0.19, 1, 0.22, 1);
}
.oz-fade.oz-in { opacity: 1; }

/* ---------------------------------------------------------------------------
   Classic block layout (rows of 12 columns; the blog posts' bodies)
   --------------------------------------------------------------------------- */
.sqs-block { position: relative; height: auto; }
.sqs-row { width: auto !important; }
.sqs-layout > .sqs-row { margin-left: -17px; margin-right: -17px; }
.sqs-row::before, .sqs-row::after { content: ''; display: table; }
.sqs-row::after { clear: both; }
[class*='sqs-col'] { float: left; }
[class*='sqs-col']:last-child { padding-right: 0; }
.sqs-col-12 { width: 100%; }
[class*='sqs-col'] .sqs-block { padding-left: 17px; padding-right: 17px; }
.sqs-block:not(.fluid-engine .sqs-block) { padding-top: 17px; padding-bottom: 17px; }
.sqs-layout .sqs-row .sqs-block:first-child { padding-top: 0; }
.sqs-block-html .sqs-html-content > :not(h1):not(h2):not(h3) { word-wrap: break-word; }
/* Phones: one column, every block spaced 17px above and below. */
@media screen and (max-width: 767px) {
  .sqs-layout [class*='sqs-col'] { float: none !important; width: auto !important; }
  .sqs-layout .sqs-row .sqs-block:first-child { padding-top: 17px !important; }
  .sqs-layout .sqs-row .sqs-block:last-child { padding-bottom: 17px !important; }
}
.sqs-block-html { clear: none; }

/* Lists written in the editor: markers drawn before the first line of each item. */
ol[data-rte-list] li, ul[data-rte-list] li { list-style-type: none; }
ol[data-rte-list] li { counter-increment: rte-list; }
ol[data-rte-list] li:first-child { counter-reset: rte-list; }
:is(ol, ul)[data-rte-list] li > * { margin-top: 0.5em; margin-bottom: 0.5em; }
:is(ol, ul)[data-rte-list] li > :first-child::before {
  display: inline-block;
  margin-left: -40px;
  min-width: 40px;
  text-align: right;
  box-sizing: border-box;
  white-space: pre;
}
ol[data-rte-list] li > :first-child::before { content: '  ' counter(rte-list) '. '; }
ul[data-rte-list] li > :first-child::before { padding-right: 10px; content: '\2022'; }

/* Image blocks */
figure { margin: 0; }
.sqs-block-image .image-block-wrapper { position: relative; overflow: hidden; }
.sqs-block-image .image-block-wrapper::after { content: ''; position: absolute; inset: 0; opacity: 0.1; }
.sqs-block-image .design-layout-inline .intrinsic { margin: 0 auto; }
.sqs-block-image .image-block-wrapper img { position: absolute; width: 100%; height: 100%; top: 0; left: 0; }

/* Code blocks: images fit their column. */
.sqs-block-code img { max-width: 100%; }

/* Links in headings: a 1px line in two halves that slide out on hover and back in. */
.sqs-block :is(h1, h2, h3, h4, h5, h6) a {
  display: inline;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 50% 1px, 50% 1px;
  background-position: 0% bottom, 100% bottom;
}
@media (hover: hover) {
  .sqs-block :is(h1, h2, h3, h4, h5, h6) a { animation: oz-underline-in 0.6s cubic-bezier(0.19, 1, 0.22, 1) forwards; }
  .sqs-block :is(h1, h2, h3, h4, h5, h6) a:hover { animation: oz-underline-out 0.6s cubic-bezier(0.19, 1, 0.22, 1) forwards; }
}
@keyframes oz-underline-in { from { background-position: -200% bottom, -100% bottom; } to { background-position: 0% bottom, 100% bottom; } }
@keyframes oz-underline-out { from { background-position: 0% bottom, 100% bottom; } to { background-position: 200% bottom, 300% bottom; } }


/* ---------------------------------------------------------------------------
   Blog: the list (/blog and each category) and each post
   --------------------------------------------------------------------------- */
:root {
  --oz-v-meta: 0.98;
  --oz-v-post-title: 3.8;
  /* The palette as hue, saturation, lightness lists: the page's own inline block
     styles use these (for example a summary block's background). */
  --white-hsl: 37.5, 26.67%, 94.12%;
  --black-hsl: 224.62, 95.12%, 8.04%;
  --accent-hsl: 73.64, 73.33%, 64.71%;
  --lightAccent-hsl: 73.64, 73.33%, 64.71%;
  --darkAccent-hsl: 156.52, 100%, 9.02%;
}
@media screen and (min-width: 768px), screen and (orientation: landscape) {
  :root {
    --oz-fs-meta: min(calc((var(--oz-v-meta) - 1) * 1.2vw + 1rem), max(calc((var(--oz-v-meta) - 1) * 36px + 1rem), calc(var(--oz-v-meta) * 1rem)));
    --oz-fs-post-title: min(calc((var(--oz-v-post-title) - 1) * 1.2vw + 1rem), max(calc((var(--oz-v-post-title) - 1) * 36px + 1rem), calc(var(--oz-v-post-title) * 1rem)));
  }
}
@media screen and (max-width: 767px) and (orientation: portrait) {
  :root {
    --oz-fs-meta: calc((var(--oz-v-meta) - 1) * 0.012 * min(100vh, 900px) + 1rem);
    --oz-fs-post-title: calc((var(--oz-v-post-title) - 1) * 0.012 * min(100vh, 900px) + 1rem);
  }
}

/* The list: one column on phones, two from 768px; each post fades in from 15px
   above (1s) when its image nears the screen (ui.js adds .is-loaded). */
.blog-basic-grid, .blog-basic-grid *, .blog-basic-grid ::before, .blog-basic-grid ::after { box-sizing: border-box; }
.blog-basic-grid {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 10vw;
  column-gap: 30px;
  width: 100%;
  margin: 0 auto;
  padding: 4vw;
  text-align: left;
}
@media screen and (min-width: 768px) {
  .blog-basic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 50px; }
}
.blog-basic-grid .blog-basic-grid--container {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  text-align: left;
  opacity: 0;
  transform: translateY(-15px);
  transition: opacity 1s ease, transform 1s ease;
}
.blog-basic-grid .blog-basic-grid--container.is-loaded { opacity: 1; transform: translateY(0); }
.blog-basic-grid .image-wrapper {
  position: relative;
  display: block;
  height: 0;
  margin: 0;
  overflow: hidden;
  padding-bottom: 66.666%;
}
.blog-basic-grid .image-wrapper img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.01);
}
.blog-basic-grid .blog-article-spacer { height: 5vw; }
.blog-basic-grid .blog-basic-grid--text {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-left: 0;
  margin-right: auto;
}
.blog-basic-grid .blog-meta-section {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  margin-bottom: 2vw;
  order: 0;
}
.blog-basic-grid :is(.blog-meta-primary, .blog-meta-secondary) { display: contents; }
.blog-basic-grid :is(.blog-author, .blog-date, .blog-categories-list) { display: none; }
.blog-basic-grid .blog-meta-primary .blog-categories-list,
.blog-basic-grid .blog-meta-secondary .blog-date { display: inline; }
.blog-basic-grid .blog-meta-delimiter { display: none; color: var(--oz-black); }
.blog-basic-grid .blog-meta-delimiter.blog-category-delimiter { display: inline; }
.blog-basic-grid :is(.blog-author, .blog-date, .blog-categories) {
  font-family: 'Inter Tight';
  font-weight: 500;
  font-size: var(--oz-fs-meta);
  line-height: 1.02em;
  color: var(--oz-black);
}
.blog-basic-grid .blog-meta-delimiter::after { content: '\2022'; }
.blog-basic-grid .blog-title {
  order: 1;
  margin: 0 0 2vw;
  font-size: var(--oz-fs-h3);
  line-height: 1.22em;
  color: #000;
}
.blog-basic-grid .blog-excerpt { display: block; order: 2; font-size: var(--oz-fs-small); line-height: 1.22em; color: var(--oz-black); }
.blog-basic-grid .blog-excerpt-wrapper { display: block; }
.blog-basic-grid .blog-more-link {
  display: inline-block;
  order: 4;
  align-self: flex-start;
  margin-top: 2vw;
  padding-top: 2vw;
  font-size: var(--oz-fs-small);
  line-height: 1.22em;
  color: #000;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: left bottom;
  transition: color 0.6s cubic-bezier(0.19, 1, 0.22, 1), background-size 0.3s cubic-bezier(0.19, 1, 0.22, 1);
}
.blog-basic-grid .blog-more-link:hover { background-size: 100% 2px; }
/* A second 1px line, 3px above the first, as on the live site. */
.blog-basic-grid .blog-more-link::after { content: ''; display: block; width: 100%; height: 1px; transform: translateY(-3px); background: #000; }
@media (hover: hover) {
  .blog-basic-grid .image-wrapper img { transform-origin: top; transition: inherit; }
}
@media screen and (max-width: 767px) {
  .blog-basic-grid { padding-left: 6vw; padding-right: 6vw; }
  .blog-basic-grid .blog-basic-grid--container { margin-bottom: 30px; }
}
@media screen and (min-width: 768px) {
  .blog-basic-grid .blog-article-spacer { height: 50px; }
  .blog-basic-grid .blog-meta-section { margin-bottom: 40px; }
  .blog-basic-grid .blog-title { margin-bottom: 30px; }
  .blog-basic-grid .blog-more-link { margin-top: 40px; padding-top: 20px; }
}

/* A post: centred title and meta over the body, three quarters wide from 768px. */
.blog-item-wrapper { position: relative; width: 100%; margin: 0 auto; box-sizing: border-box; }
.blog-item-wrapper article.entry { position: relative; width: 100%; margin: 0 auto; padding: 4vw; box-sizing: border-box; }
.blog-item-wrapper .blog-item-inner-wrapper { position: relative; max-width: 3000px; margin: 0 auto; box-sizing: border-box; }
@media screen and (min-width: 768px) {
  .blog-item-wrapper .blog-item-inner-wrapper { width: 75%; }
}
.blog-item-wrapper .blog-item-top-wrapper { display: flex; flex-direction: column; margin-bottom: 50px; text-align: center; }
.blog-item-wrapper .blog-item-title { order: 2; }
.blog-item-wrapper .blog-item-title h1.entry-title {
  margin: 0;
  font-family: 'pragmatica-web';
  font-weight: 300;
  font-size: var(--oz-fs-post-title);
  line-height: 1.2em;
  text-transform: uppercase;
  color: #000;
}
.blog-item-wrapper .blog-item-meta-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 11px;
  order: 1;
  margin-bottom: 2rem;
}
.blog-item-wrapper :is(.blog-meta-item, .blog-meta-item span, .blog-meta-item a) {
  font-family: 'Inter Tight';
  font-weight: 500;
  font-size: var(--oz-fs-meta);
  line-height: 1.02em;
  color: var(--oz-black);
  text-decoration: none;
}
/* The post's own settings hide its category, date, author and author profile. */
article.h-entry[data-show-categories='false'] .blog-meta-item--categories,
article.h-entry[data-show-date='false'] .blog-meta-item--date,
article.h-entry[data-show-author-name='false'] .blog-meta-item--author,
article.h-entry[data-show-author-profile='false'] .blog-item-author-profile-wrapper { display: none; }
.blog-item-wrapper .blog-item-top-wrapper .blog-item-author-date-wrapper { display: flex; justify-content: center; }
.blog-item-wrapper .blog-item-content { margin: 0 0 3vw; }
.blog-item-wrapper .blog-item-comments { margin-top: 3vw; }
@media screen and (max-width: 767px) {
  .blog-item-wrapper article.entry { padding: 6vw; }
  .blog-item-wrapper .blog-item-inner-wrapper { width: 100%; }
  .blog-item-wrapper .blog-item-meta-wrapper { margin-bottom: 1.2rem; }
}

/* Summary blocks (the related posts under each post): cards placed in columns by
   ui.js; hidden until placed. Thumbnails fade in once loaded. */
.sqs-block-summary-v2 * { box-sizing: border-box; }
.sqs-block-summary-v2,
[data-section-theme] .fluid-engine .sqs-block-summary-v2 { border-color: var(--oz-stroke, #000); }
[data-section-theme] .fluid-engine .sqs-block-accordion { border-color: var(--oz-accordion, var(--oz-black)); }
.sqs-gallery-design-autocolumns { position: relative; inset: 0; }
.sqs-gallery-design-autogrid .summary-item { position: relative; top: 0; left: 0; right: 0; }
.sqs-gallery-design-autogrid::after { content: '.'; display: block; height: 0; font-size: 0; clear: both; visibility: hidden; }
.sqs-block-summary-v2.sqs-background-enabled { background-color: var(--tweak-summary-block-background-color); color: #000; }
.sqs-block-summary-v2 .summary-heading,
.sqs-block-summary-v2 .summary-carousel-pager,
.sqs-block-summary-v2 .summary-collection-title { display: none; }
.sqs-block-summary-v2 .summary-item-list { margin: 0; padding: 0; list-style: none; }
.sqs-block-summary-v2 .summary-item { visibility: hidden; }
.sqs-block-summary-v2 .summary-item:not(:last-child) { margin-bottom: 24px; }
.sqs-block-summary-v2 .summary-item.positioned { visibility: visible; }
.sqs-block-summary-v2 .summary-thumbnail-outer-container { position: relative; display: var(--summary-show-thumbnail, block); }
.sqs-block-summary-v2 .summary-thumbnail-container { position: relative; display: block; margin: 0 0 15px; }
.sqs-block-summary-v2 .img-wrapper { position: relative; width: 100%; height: auto; overflow: hidden; }
.sqs-block-summary-v2 .summary-thumbnail-container img {
  display: block;
  width: 100%;
  height: auto;
  font-size: 13px;
  line-height: normal;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.sqs-block-summary-v2 .summary-thumbnail-container img.loaded { opacity: 1; }
/* What each card shows comes from the block's own settings (--summary-* values in the page). */
.sqs-block-summary-v2 .summary-content { text-align: var(--summary-text-align, left); }
.sqs-block-summary-v2 :is(.summary-title, .summary-excerpt, .summary-metadata, .summary-read-more-link) { color: var(--oz-summary-text, var(--oz-black)); }
.sqs-block-summary-v2.sqs-background-enabled :is(.summary-title, .summary-excerpt, .summary-metadata, .summary-read-more-link) { color: #000; }
.sqs-block-summary-v2 .summary-title {
  display: var(--summary-show-title, block);
  margin: 0 0 var(--summary-content-spacing, 10px);
  font-size: var(--summary-title-font-size, 20px);
  line-height: 1.2em;
  text-align: var(--summary-text-align, left);
}
.sqs-block-summary-v2 .summary-excerpt { display: var(--summary-show-excerpt, block); margin: 0 0 10px; }
.sqs-block-summary-v2 .summary-excerpt p { font-size: var(--summary-excerpt-font-size); }
.sqs-block-summary-v2 .summary-read-more-link { display: var(--summary-show-read-more-link, none); margin: 0 0 10px; font-size: 14px; line-height: 20px; text-align: left; }
/* Metadata: the date, where the block's settings place it. */
.sqs-block-summary-v2 .summary-metadata-container { font-size: 13px; line-height: normal; }
.sqs-block-summary-v2 .summary-metadata-container--above-title { display: var(--summary-meta-above-display, none); }
.sqs-block-summary-v2 .summary-metadata-container--below-title { display: var(--summary-meta-below-title-display, none); }
.sqs-block-summary-v2 .summary-metadata-container--below-content { display: var(--summary-meta-below-content-display, block); }
.sqs-block-summary-v2 .summary-block-setting-primary-metadata-date :is(.summary-metadata-container--above-title, .summary-metadata-container--below-title) { margin: 0 0 var(--summary-content-spacing, 10px); }
.sqs-block-summary-v2 .summary-metadata { display: none; }
.sqs-block-summary-v2 .summary-block-setting-primary-metadata-date .summary-metadata--primary { display: inline-block; }
.sqs-block-summary-v2 .summary-metadata-item { display: none; margin: 0; font-size: 13px; line-height: 1.4em; text-transform: none; opacity: 0.7; }
.sqs-block-summary-v2 .summary-block-setting-primary-metadata-date .summary-metadata--primary .summary-metadata-item--date { display: inline-block; }

/* Carousel layout (the testimonials on the keynote pages): cards side by side in
   one row, a group at a time, sliding over 0.4s; arrows above on the right.
   ui.js sizes the cards and moves the row. */
.sqs-gallery-design-carousel .sqs-gallery-container { width: 100%; overflow: hidden; }
.sqs-block-summary-v2 .summary-block-setting-design-carousel .summary-block-header { overflow: hidden; }
.sqs-gallery-design-carousel .sqs-gallery {
  margin: 0 0 0 -1%;
  white-space: nowrap;
  vertical-align: top;
  font-size: 0;
  transition: transform 0.4s ease;
}
.sqs-gallery-design-carousel .sqs-gallery-design-carousel-slide {
  display: inline-block;
  width: 33.66666667%;
  padding: 0 1%;
  white-space: nowrap;
  vertical-align: top;
  font-size: 0;
}
.sqs-gallery-design-carousel .sqs-gallery-design-carousel-slide * { white-space: normal; }
.sqs-block-summary-v2 .summary-block-setting-design-carousel .summary-item:not(.positioned) { visibility: visible; }
.sqs-block-summary-v2 .summary-block-setting-design-carousel .summary-carousel-pager { display: flex; justify-content: flex-end; overflow: hidden; }
.sqs-gallery-design-carousel .sqs-gallery-controls :is(.previous, .next) {
  position: relative;
  display: block;
  float: right;
  margin: 0 0 15px;
  padding: 0;
  font-size: 16px;
  line-height: 16px;
  color: inherit;
  background-color: transparent;
  cursor: pointer;
}
.sqs-gallery-design-carousel .sqs-gallery-controls .previous { margin-right: 10px; }
.sqs-gallery-design-carousel .sqs-gallery-controls :is(.previous, .next) { z-index: 999; }
.sqs-block-summary-v2 .summary-block-setting-design-carousel .summary-heading {
  display: block;
  float: left;
  width: calc(100% - 50px);
  margin: 0 0 15px;
  padding-right: 10px;
  font-size: 14px;
  line-height: normal;
}
.sqs-gallery-design-carousel .sqs-gallery-controls .sqs-disabled { cursor: default; opacity: 0.4; }
.sqs-gallery-design-carousel .sqs-gallery-controls .sqs-hidden { display: none; }
.sqs-gallery-design-carousel .sqs-gallery-controls :is(.previous, .next)::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  vertical-align: middle;
}

/* Previous and next post links (the site's Custom CSS hides them). */
.item-pagination--prev-next { display: flex; padding: 3vw 4vw; background-color: var(--oz-white); }
.visually-hidden { position: absolute !important; clip: rect(1px, 1px, 1px, 1px); width: 1px !important; height: 1px !important; padding: 0 !important; border: 0 !important; overflow: hidden; }

/* ===========================================================================
   Keynote landing pages: text highlights, the logo strip (gallery grid),
   accordions, the testimonial carousel, section themes and buttons they add,
   background videos, popups, maps.
   =========================================================================== */

/* Text highlight bands (drawn by ui.js) sit behind the text. */
.sqs-block-html .TextShape-node {
  position: absolute;
  transform: scale(1);
  top: 0;
  left: 0;
  z-index: -1;
  display: block;
  pointer-events: none;
  user-select: none;
}
.sqs-block-html .TextShape-node svg {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: var(--stroke);
  stroke-width: max(1px, var(--stroke-width));
  stroke-linecap: var(--stroke-linecap);
  stroke-linejoin: var(--stroke-linejoin);
}

/* Gallery sections (the client logo strip on the keynote pages). The section has
   no minimum height or padding of its own; the grid's columns and gaps are set by
   ui.js. Each image plays in as it comes into view, also when the site's Custom
   CSS slides the strip sideways (the Squarespace version only ever showed the
   logos on screen at load, so the strip went blank after a few seconds). */
.page-section.gallery-section { min-height: 0; }
.page-section.gallery-section > .content-wrapper { padding-top: 0; padding-bottom: 0; }
.gallery-grid[data-width='inset'] { max-width: 3000px; margin-left: auto; margin-right: auto; padding: 4vw; }
.gallery-grid-wrapper { position: relative; width: 100%; }
.gallery-grid--layout-grid .gallery-grid-wrapper { display: grid; }
.gallery-grid-item-wrapper { position: relative; display: block; width: 100%; height: 0; }
.gallery-grid[data-aspect-ratio='square'] .gallery-grid-item-wrapper { padding-bottom: 100%; }
.gallery-grid[data-aspect-ratio='standard'] .gallery-grid-item-wrapper { padding-bottom: 66.6667%; }
.gallery-grid[data-aspect-ratio='four-three'] .gallery-grid-item-wrapper { padding-bottom: 75%; }
.gallery-grid[data-aspect-ratio='widescreen'] .gallery-grid-item-wrapper { padding-bottom: 56.25%; }
.gallery-grid-item img { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; object-fit: cover; }

/* Accordions: each item a title button with a plus that turns into a minus while
   its text is open; lines between items. Sizes come from the block's own settings
   (the --accordion-* values in the page). */
.sqs-block-accordion .accordion-items-container { margin: 0; padding: 0; list-style-type: none; }
.sqs-block-accordion .accordion-item { position: relative; margin: 0; padding: 0; }
.sqs-block-accordion .accordion-item__title-wrapper { margin: 0; padding: 0; }
.sqs-block-accordion .accordion-item__click-target {
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: var(--accordion-item-padding-top) var(--accordion-item-padding-right) var(--accordion-item-padding-bottom) var(--accordion-item-padding-left);
  border: none;
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-align: left;
  -webkit-appearance: none;
  touch-action: manipulation;
  cursor: pointer;
}
.sqs-block-accordion .accordion-item__click-target > * { margin: 0; }
.sqs-block-accordion .accordion-item__title { flex: 1; overflow: hidden; }
.sqs-block-accordion [data-accordion-icon-placement='right'] .accordion-item__title { padding-right: var(--accordion-icon-size); }
.sqs-block-accordion .accordion-icon-container { position: relative; width: var(--accordion-icon-size); height: var(--accordion-icon-size); }
.sqs-block-accordion .accordion-icon-container > * {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
.sqs-block-accordion :is(.plus__horizontal-line, .plus__vertical-line) {
  position: absolute;
  display: block;
  width: 100%;
  height: var(--accordion-icon-thickness);
  background-color: currentColor;
  transition: transform 0.25s;
}
.sqs-block-accordion .plus__vertical-line { transform: rotate(90deg); }
.sqs-block-accordion .accordion-item[data-is-open='true'] .plus__vertical-line { transform: rotate(0deg); }
.sqs-block-accordion .accordion-item__dropdown { box-sizing: border-box; display: none; overflow: hidden; }
.sqs-block-accordion .accordion-item__dropdown--open { display: block; }
.sqs-block-accordion .accordion-item__description {
  box-sizing: border-box;
  max-width: 300px;
  min-width: var(--accordion-description-width);
  padding: var(--accordion-description-padding-top) var(--accordion-description-padding-right) var(--accordion-description-padding-bottom) var(--accordion-description-padding-left);
}
.sqs-block-accordion :is(.accordion-item__description, .accordion-item__title) > :first-of-type { margin-top: 0; }
.sqs-block-accordion :is(.accordion-item__description, .accordion-item__title) > :last-of-type { margin-bottom: 0; }
.sqs-block-accordion :is(.accordion-icon-container, .accordion-divider) { color: var(--oz-accordion, var(--oz-black)); }
.sqs-block-accordion .accordion-divider {
  height: var(--accordion-divider-thickness);
  opacity: var(--accordion-divider-opacity);
  background-color: currentColor;
}
.sqs-block-accordion .accordion-divider--top { display: none; }
.sqs-block-accordion .accordion-items-container[data-is-first-divider-visible='true'] .accordion-item:first-of-type .accordion-divider--top { display: block; }
.sqs-block-accordion .accordion-items-container:not([data-is-last-divider-visible='true']) .accordion-item:last-of-type .accordion-divider:not(.accordion-divider--top) { display: none; }

/* Sections with no colour theme of their own take the site's default colours;
   the themed ones set the accordion and third button colours too. */
[data-section-theme=''] {
  --oz-button-text: hsl(40 100% 1.76%);
  --oz-button3-text: var(--oz-dark-accent);
}
:is([data-section-theme='black'], [data-section-theme='black-bold'], [data-section-theme='dark']) {
  --oz-button3-text: var(--oz-safe-inverse-light, hsl(0 0% 0%));
  --oz-accordion: var(--oz-white);
}

/* Third button style (the "Watch Jeff" buttons): see "Tertiary buttons" above. */

/* Background videos fill their section (public/js/video.js plays them). */
.sqs-video-background-native {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

/* Sections whose background is inset from the page edges: the page colour shows
   around it. */
.page-section.background-width--inset:not(.gallery-section) .section-border { background-color: var(--oz-paper); }
.page-section.background-width--inset:not(.gallery-section) { padding: 4vw; }
.page-section.background-width--inset:not(.gallery-section) .section-background {
  top: calc(4vw + var(--previous-section-divider-offset, 0px));
  right: 4vw;
  bottom: 4vw;
  left: 4vw;
}

:is([data-section-theme='black'], [data-section-theme='black-bold'], [data-section-theme='dark']) { --oz-summary-text: var(--oz-white); }
[data-section-theme='white-bold'] { --oz-summary-text: var(--oz-black); }
.sqsrte-text-color--darkAccent { color: var(--oz-dark-accent); }

/* A text block with its own background (the keynote pages' hero). */
.sqs-background-enabled.sqs-block-html { background-color: var(--tweak-text-block-background-color); }
.page-section .sqs-background-enabled,
.sqs-background-enabled.sqs-block-html :is(h1, h2, h3, h4, p) { color: var(--oz-on-bg, var(--oz-black)); }
[data-section-theme='white-bold'] { --oz-on-bg: var(--oz-safe-dark-accent, hsl(0 0% 0%)); }
[data-section-theme='bright-inverse'] {
  --oz-overlay: transparent;
  --oz-section-bg: var(--oz-black);
  --oz-text: var(--oz-white);
  --oz-text-small: var(--oz-accent);
  --oz-heading: var(--oz-accent);
  --oz-link: var(--oz-accent);
  --oz-button-bg: var(--oz-accent);
  --oz-button-text: var(--oz-dark-accent);
  --oz-button2: var(--oz-accent);
  --oz-button2-text: var(--oz-safe-inverse-accent, hsl(0 0% 0%));
  --oz-button3-text: var(--oz-safe-inverse-accent, hsl(0 0% 0%));
  --oz-line: hsl(73.64 73.33% 64.71% / 0.51);
  --oz-stroke: var(--oz-dark-accent);
  --oz-accordion: var(--oz-accent);
  --oz-summary-text: var(--oz-white);
}

/* Map blocks: Google's embed fills the block (src/lib/own-code.mjs). */
.sqs-block.sized .sqs-block-content { overflow: hidden; }
.sqs-block.vsize-12 .sqs-block-content { height: 408px; }
.fluid-engine .sqs-block-map .sqs-block-content { height: 100%; }
.sqs-block-map .oz-map { position: relative; width: 100%; height: 100%; }
.sqs-block-map .oz-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Popups (ui.js): the linked page's content in a panel over a 40% black
   backdrop; the site's Custom CSS sets the panel's colour and width. */
.oz-lightbox { position: fixed; inset: 0; z-index: 99992; }
.oz-lightbox .c-lightbox__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: opacity 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.oz-lightbox__slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: max(10px, 2vw);
  overflow: auto;
}
.oz-lightbox .c-lightbox__content {
  position: relative;
  width: 100%;
  opacity: 0;
  transition: opacity 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.oz-lightbox--in .c-lightbox__overlay,
.oz-lightbox--in .c-lightbox__content { opacity: 1; }
.oz-lightbox .c-lightbox__content-inner { position: relative; box-sizing: border-box; padding: 30px; background: #fff; }
.oz-lightbox .c-lightbox__close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--oz-ink);
  opacity: 0.8;
  cursor: pointer;
}
.oz-lightbox .c-lightbox__close:hover { opacity: 1; }
.oz-lightbox .c-lightbox__close svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; }
.oz-lightbox-open, .oz-lightbox-open body { overflow: hidden; }
/* The page inside a popup has no page padding or grid gutters, and slides down
   15px into place as it appears. */
.oz-lightbox :is(.content, .content-wrapper, .page-section) { min-width: 100%; padding: 0 !important; }
.oz-lightbox .page-section .content-wrapper { box-sizing: border-box !important; }
.oz-lightbox .fluid-engine { --grid-gutter: 0 !important; }
.oz-lightbox .c-lightbox__content-wrapper { transform: translateY(-15px); transform-origin: bottom; transition: transform 0.5s 25ms; }
.oz-lightbox--in .c-lightbox__content-wrapper { transform: none; }

/* The first section starts below the fixed header from the first paint: the
   header's own script sets --header-height as the page is read, before the rest
   of the page arrives, and public/js/chrome.js keeps the offset in step after
   (it writes the same value inline). Without this the page painted first and
   then moved down by the header's height once chrome.js ran. */
#page-regions > .region:first-of-type > .page-section:first-of-type:not(:has([data-header-offset='self'])) { padding-top: var(--header-height, 0px); }