/* The EXPERIENCE Zone — site styles.
   Hand-written for the static rebuild. Layout maths (section heights, the 8/24-column block grid,
   type scale) follow the measurements of the original Squarespace site so pages line up the same.

   To use the original typeface (Aktiv Grotesk, Adobe Fonts): put your Adobe Fonts web project's ID in
   the line below and delete the comment marks around it. The site already asks for "aktiv-grotesk"
   first, so it takes over automatically. (The line has to stay above every other rule.) */
/* @import url("https://use.typekit.net/XXXXXXX.css"); */

/* ---------- Fonts: TEZ Sans = Instrument Sans (SIL OFL 1.1), spacing tuned to match Aktiv Grotesk.
   The metric overrides give it Aktiv Grotesk's line spacing wherever line-height is "normal". ---------- */
@font-face { font-family: "TEZ Sans"; src: url("../fonts/tez-sans-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; ascent-override: 99.7%; descent-override: 28.3%; line-gap-override: 0%; }
@font-face { font-family: "TEZ Sans"; src: url("../fonts/tez-sans-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; ascent-override: 99.7%; descent-override: 28.3%; line-gap-override: 0%; }
@font-face { font-family: "TEZ Sans"; src: url("../fonts/tez-sans-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; ascent-override: 99.7%; descent-override: 28.3%; line-gap-override: 0%; }
@font-face { font-family: "TEZ Sans"; src: url("../fonts/tez-sans-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; ascent-override: 99.7%; descent-override: 28.3%; line-gap-override: 0%; }
@font-face { font-family: "TEZ Sans"; src: url("../fonts/tez-sans-700-italic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; ascent-override: 99.7%; descent-override: 28.3%; line-gap-override: 0%; }

/* ---------- Tokens ---------- */
:root {
  --white: #fff;
  --black: #000;
  --accent: #fff;
  --light-accent: hsl(60 4.76% 95.88%);
  --dark-accent: hsl(0 0% 27.84%);

  --font: "aktiv-grotesk", "TEZ Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --page-pad: 3vw;
  --max-page: 1900px;
  --gutter-m: 6vw;

  /* type scale (value = rem at the reference size) */
  --h1: 4; --h2: 2.8; --h3: 2.2; --h4: 1.2;
  --t-large: 1.5; --t-normal: 1; --t-small: .9;
  --heading-lh: 1em;
  --body-lh: 2.5em;

  /* default colour theme (the site's "black") */
  --bg: var(--black);
  --text: var(--white);
  --heading: var(--white);
  --link: var(--white);
  --heading-link: var(--light-accent);
  --btn-bg: var(--white);
  --btn-text: var(--black);
  --nav: var(--white);
  --menu-bg: var(--black);
  --menu-link: var(--white);
  --divider-stroke: var(--white);
  --overlay: var(--black);
  --line: var(--white);
  --field-fill: hsl(0 0% 98%);
  --field-border: var(--black);
  --field-text: var(--black);
  --si-main: var(--white);
  --si-second: var(--black);
}

[data-theme="white"] {
  --bg: var(--white); --text: var(--black); --heading: var(--black); --link: var(--black); --heading-link: var(--black);
  --btn-bg: var(--black); --btn-text: var(--white); --nav: var(--black); --menu-bg: var(--white); --menu-link: var(--black);
  --divider-stroke: var(--white); --overlay: var(--white); --line: var(--black);
  --si-main: var(--black); --si-second: var(--white);
}
[data-theme="light"] {
  --bg: var(--light-accent); --text: var(--black); --heading: var(--black); --link: var(--black); --heading-link: var(--black);
  --btn-bg: var(--black); --btn-text: var(--white); --nav: var(--black); --menu-bg: var(--light-accent); --menu-link: var(--black);
  --divider-stroke: var(--black); --overlay: var(--light-accent); --line: var(--black);
  --si-main: var(--black); --si-second: var(--light-accent);
}
[data-theme="dark"] {
  --bg: var(--dark-accent); --text: var(--white); --heading: var(--white); --link: var(--white); --heading-link: var(--light-accent);
  --btn-bg: var(--white); --btn-text: var(--black); --nav: var(--white); --menu-bg: var(--dark-accent); --menu-link: var(--white);
  --divider-stroke: var(--white); --overlay: var(--dark-accent); --line: var(--white);
  --si-main: var(--white); --si-second: var(--dark-accent);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; font-size: 16px; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 400;
  line-height: var(--body-lh);   /* 40px, inherited everywhere as on the original */
  background: var(--bg);
  color: var(--text);
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, video, svg, iframe { display: block; max-width: 100%; }
/* pasted embed/code blocks keep the browser's own defaults (inline media, content-box sizing),
   which is what their own CSS was written against on the original */
.blk__raw :is(img, video, svg, iframe) { display: revert; }
.blk__raw *, .blk__raw *::before, .blk__raw *::after { box-sizing: revert; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font-family: inherit; font-size: inherit; }
:focus-visible { outline: 2px solid var(--nav); outline-offset: 4px; }
hr { margin: 0; border: 0; height: 1px; background: var(--line); }

.skip {
  position: absolute; left: -1000em; top: 1.5em; z-index: 20;
  padding: 1em 1.5em; border-radius: 300px;
  background: var(--btn-bg); color: var(--btn-text);
  font-weight: 500; letter-spacing: .02em; text-decoration: underline;
}
.skip:focus { left: 1.5em; }

/* ---------- Type ---------- */
h1, h2, h3, h4 {
  margin: 2rem 0;
  font-family: var(--font);
  font-weight: 700;
  color: var(--heading);
  white-space: pre-wrap;
}
h1 { line-height: calc(var(--heading-lh) * (1 + (1 - var(--h1)) / 25)); }
h2 { line-height: calc(var(--heading-lh) * (1 + (1 - var(--h2)) / 25)); }
h3 { line-height: calc(var(--heading-lh) * (1 + (1 - var(--h3)) / 25)); }
h4 { line-height: calc(var(--heading-lh) * (1 + (1 - var(--h4)) / 25)); }
p { margin: 1rem 0; line-height: var(--body-lh); white-space: pre-wrap; }
.rte > :first-child { margin-top: 0; }
.rte > :last-child { margin-bottom: 0; }
.rte a {
  color: var(--link); text-decoration: none; white-space: initial;
  background-image: linear-gradient(currentColor, currentColor); background-repeat: repeat-x;
  background-size: 1px 1px; background-position: 0 100%;
}
.rte h1 a, .rte h2 a, .rte h3 a, .rte h4 a { color: var(--heading-link); }
.rte ul, .rte ol { margin: 1rem 0; padding-left: 1.4em; line-height: var(--body-lh); }
.ta-c { text-align: center; }
.ta-r { text-align: right; }
.ta-j { text-align: justify; }
.tc-white { color: var(--white); }
.tc-black { color: var(--black); }

/* fluid sizes: phones in portrait scale with the viewport height, everything else with the width */
@media (max-width: 767px) and (orientation: portrait) {
  h1 { font-size: calc((var(--h1) - 1) * .012 * min(100vh, 900px) + 1rem); }
  h2 { font-size: calc((var(--h2) - 1) * .012 * min(100vh, 900px) + 1rem); }
  h3 { font-size: calc((var(--h3) - 1) * .012 * min(100vh, 900px) + 1rem); }
  h4 { font-size: calc((var(--h4) - 1) * .012 * min(100vh, 900px) + 1rem); }
  .t-large { font-size: calc((var(--t-large) - 1) * .012 * min(100vh, 900px) + 1rem); }
  .t-small { font-size: calc((var(--t-small) - 1) * .012 * min(100vh, 900px) + 1rem); }
}
@media (min-width: 768px), (orientation: landscape) {
  h1 { font-size: min(calc((var(--h1) - 1) * 1.2vw + 1rem), max(calc((var(--h1) - 1) * .012 * var(--max-page) + 1rem), calc(var(--h1) * 1rem))); }
  h2 { font-size: min(calc((var(--h2) - 1) * 1.2vw + 1rem), max(calc((var(--h2) - 1) * .012 * var(--max-page) + 1rem), calc(var(--h2) * 1rem))); }
  h3 { font-size: min(calc((var(--h3) - 1) * 1.2vw + 1rem), max(calc((var(--h3) - 1) * .012 * var(--max-page) + 1rem), calc(var(--h3) * 1rem))); }
  h4 { font-size: min(calc((var(--h4) - 1) * 1.2vw + 1rem), max(calc((var(--h4) - 1) * .012 * var(--max-page) + 1rem), calc(var(--h4) * 1rem))); }
  .t-large { font-size: min(calc((var(--t-large) - 1) * 1.2vw + 1rem), max(calc((var(--t-large) - 1) * .012 * var(--max-page) + 1rem), calc(var(--t-large) * 1rem))); }
  .t-small { font-size: min(calc((var(--t-small) - 1) * 1.2vw + 1rem), max(calc((var(--t-small) - 1) * .012 * var(--max-page) + 1rem), calc(var(--t-small) * 1rem))); }
}
/* "What is Spatial Audio?" page title. On Squarespace it wrapped onto a second line on most phones and ran into the
   subtitle under it. On phones it now shrinks just enough to stay on one line, as it does on every wider screen. */
@media (max-width: 767px) and (orientation: portrait) {
  #s-654d886cd2eb65902d7a7b9d h1 { font-size: min(calc((var(--h1) - 1) * .012 * min(100vh, 900px) + 1rem), 11.4vw); }
}

/* "fit to width" headings: site.js sizes the line so it exactly fills the block width.
   Without JavaScript the heading simply keeps its normal size and wraps. */
.fit-text { line-height: var(--body-lh); }
.fit-text__inner { display: inline-block; max-width: 100%; }
.fit-text__inner > * { margin: 0; line-height: 1; }
.fit-text.is-fit .fit-text__inner { max-width: none; white-space: nowrap; }
.fit-text.is-fit .fit-text__inner > * { font-size: inherit; white-space: nowrap; }

/* ---------- Header ---------- */
.hdr {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10;
  line-height: 1;
  color: var(--nav);
  pointer-events: none;
  transition: transform 140ms ease-in-out;
}
.hdr.is-hidden { transform: translateY(-100%); }
.hdr__bar {
  position: relative; display: flex; align-items: center;
  padding: 2vw var(--page-pad);
  pointer-events: auto;
}
.hdr__logo { flex: 1 0 auto; display: block; max-width: 100%; line-height: 0; }
.hdr__logo img { width: auto; height: auto; max-width: 100%; max-height: 33px; }
.hdr__nav { flex: 0 1 auto; margin-left: auto; padding-left: 2.5vw; text-align: right; }
.nav { display: flex; flex-wrap: wrap; justify-content: flex-end; margin: 0; padding: 0; list-style: none; }
.nav__item { white-space: nowrap; line-height: var(--body-lh); }
.nav__item + .nav__item { margin-left: 2.5vw; }
.nav__item a { display: inline-flex; align-items: center; padding: .1em 0; color: var(--nav); }
.nav__item.is-active a {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: repeat-x; background-size: 1px 1px; background-position: 0 calc(100% - .1em);
}
.hdr__burger {
  display: none; flex: 0 0 50px; width: 50px; height: 37px;
  align-items: flex-end; justify-content: flex-end;
  margin: 0; padding: 1px 6px; border: 0; background: none; cursor: pointer;
}
.burger { position: relative; display: block; width: 35px; height: 35px; }
.burger__top, .burger__bottom {
  position: absolute; top: 0; bottom: 0; left: 0; margin: auto;
  width: 100%; height: 1px; background: var(--nav);
  transition: transform 250ms cubic-bezier(.2,.6,.3,1), width 250ms cubic-bezier(.2,.6,.3,1);
}
.burger__top { transform: translateY(-5.5px); }
.burger__bottom { transform: translateY(5.5px); }
.menu-open .burger__top { transform: translateX(3.5px) rotate(-135deg); width: 28px; background: var(--menu-link); }
.menu-open .burger__bottom { transform: translateX(3.5px) rotate(135deg); width: 28px; background: var(--menu-link); }

.menu {
  position: fixed; inset: 0; z-index: 9;
  line-height: 1;
  display: flex; flex-direction: column;
  padding-top: var(--header-h, 84px);
  background: var(--menu-bg);
  text-align: center;
  opacity: 0; visibility: hidden;
  transition: visibility 600ms cubic-bezier(.4,0,.2,1), opacity 400ms cubic-bezier(.4,0,.2,1);
}
.menu[hidden] { display: none; }
.menu-open .menu { opacity: 1; visibility: visible; }
.menu__nav { position: relative; flex: 1 0 auto; display: flex; flex-direction: column; overflow-y: auto; }
.menu__list {
  flex: 1 0 auto; display: flex; flex-direction: column; justify-content: center;
  margin: 0; padding: 0; list-style: none;
  transform: translateY(20px); transition: transform 600ms cubic-bezier(.4,0,.2,1);
  font-size: 19.2px;
}
.menu-open .menu__list { transform: translateY(0); }
.menu__list li { padding: 0 var(--page-pad); line-height: 1; }
.menu__list a { display: inline-flex; align-items: center; margin: 3vw 5vw; font-size: 8.5vmin; color: var(--menu-link); }
@media (min-width: 576px) { .menu__list a { font-size: 6.6vmin; } }
@media (min-width: 768px) { .menu__list a { font-size: 6vmin; } }
body.menu-open { overflow: hidden; }

/* phones, and touch tablets up to 1024px, use the burger menu */
@media (max-width: 799px), (pointer: coarse) and (max-width: 1024px) {
  .hdr__bar { padding: 6vw; }
  .hdr__nav { display: none; }
  .hdr__burger { display: flex; }
  .hdr__logo { flex: 1 0 calc(100% - 50px); max-width: calc(100% - 50px); }
}
.no-header .menu { display: none; }

/* ---------- Sections ---------- */
main { display: block; }
/* The section box itself is transparent: its colour/background lives on .s__frame, which reaches up
   under the previous section's wavy edge (--prev-divider) and is clipped to the wave on divider sections. */
.s {
  position: relative; display: flex; align-items: center;
  color: var(--text);
}
.s__frame { position: absolute; top: calc(-1 * var(--prev-divider, 0px)); right: 0; bottom: 0; left: 0; background: var(--bg); }
.s--divider { padding-bottom: calc(var(--dh) * 1vw); }
.s--divider.s--bg-inset { padding-bottom: calc(var(--page-pad) + var(--dh) * 1vw); }
.s__bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.s__bg img, .s__bg video, .s__bg canvas { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.s__overlay { position: absolute; inset: 0; background: var(--overlay); opacity: var(--ov, 0); }
.s__bg--video .s__overlay, .s__bg--gen .s__overlay { display: none; }
.s__inner { position: relative; display: flex; width: 100%; }
.s__content { width: 100%; }
.s--ha-center > .s__inner { justify-content: center; }
.s--ha-left > .s__inner { justify-content: flex-start; }
.s--ha-right > .s__inner { justify-content: flex-end; }

.s--h-small { min-height: 33vh; }
.s--h-medium { min-height: 66vh; }
.s--h-large { min-height: 100vh; }
.s--va-middle { align-items: center; }
.s--va-top { align-items: flex-start; }
.s--va-bottom { align-items: flex-end; }
.s--va-middle.s--h-small > .s__inner { padding-top: 3.3vmax; padding-bottom: 3.3vmax; }
.s--va-middle.s--h-medium > .s__inner { padding-top: 6.6vmax; padding-bottom: 6.6vmax; }
.s--va-middle.s--h-large > .s__inner { padding-top: 10vmax; padding-bottom: 10vmax; }
/* custom-height sections get no alignment padding (as on the original) */
.s--va-top:not(.s--h-custom) > .s__inner { padding-top: var(--page-pad); }
.s--va-top.s--h-small > .s__inner { padding-bottom: 6.6vmax; }
.s--va-top.s--h-medium > .s__inner { padding-bottom: 13.2vmax; }
.s--va-top.s--h-large > .s__inner { padding-bottom: 20vmax; }
.s--va-bottom:not(.s--h-custom) > .s__inner { padding-bottom: var(--page-pad); }
.s--va-bottom.s--h-small > .s__inner { padding-top: 6.6vmax; }
.s--va-bottom.s--h-medium > .s__inner { padding-top: 13.2vmax; }
.s--va-bottom.s--h-large > .s__inner { padding-top: 20vmax; }
.s--h-custom { min-height: calc(var(--custom-h, 0) * 1vh); }

/* the header floats over the first section */
main > .s:first-child { padding-top: var(--header-h, 100px); }
.no-header main > .s:first-child { padding-top: 0; }

/* inset backgrounds */
.s--bg-inset { padding: var(--page-pad); }
.s--bg-inset .s__bg { inset: var(--page-pad); }

/* classic (12-column) sections keep a centred content column */
.s--classic > .s__inner { padding-left: var(--gutter-m); padding-right: var(--gutter-m); }
.s--classic .s__content { max-width: var(--max-page); }
@media (min-width: 768px) {
  .s--classic > .s__inner { padding-left: var(--page-pad); padding-right: var(--page-pad); }
  .s--classic.s--w-narrow .s__content { width: 50%; }
  .s--classic.s--w-medium .s__content { width: 75%; }
}

/* ---------- Section dividers (wavy edge, drawn by site.js) ---------- */
.s__divider {
  position: absolute; left: 0; top: calc(-1 * var(--prev-divider, 0px)); z-index: 999;
  width: 100%; height: calc(100% + var(--prev-divider, 0px));
  overflow: visible; pointer-events: none;
}
.s__divider-stroke { fill: none; stroke: var(--divider-stroke); stroke-width: var(--dsw, 0); stroke-linecap: square; }
.s__divider[data-stroke="none"] .s__divider-stroke { display: none; }

/* ---------- Block grid ("fluid" sections): 8 columns on phones, 24 from 768px ---------- */
.fe {
  --cg: var(--m-cgap, var(--m-gap, 11px));
  --gutter: calc(var(--gutter-m) - var(--cg));
  --cell: calc((var(--max-page) - var(--cg) * 7) / 8);
  position: relative;
  display: grid;
  grid-template-rows: repeat(var(--m-rows, 1), minmax(24px, auto));
  grid-template-columns: minmax(var(--gutter), 1fr) repeat(8, minmax(0, var(--cell))) minmax(var(--gutter), 1fr);
  row-gap: var(--m-gap, 11px);
  column-gap: var(--cg);
  overflow-x: clip;
}
@media (min-width: 768px) {
  .fe {
    --cg: var(--d-cgap, var(--d-gap, 11px));
    --gutter: calc(var(--page-pad) - var(--cg));
    --cell: calc((var(--max-page) - var(--cg) * 23) / 24);
    --inset: 0vw;
    --container: min(var(--max-page), calc(100vw - var(--page-pad) * 2 - var(--inset)));
    grid-template-rows: repeat(var(--d-rows, 1), minmax(calc(var(--container) * var(--rs, .0215)), auto));
    grid-template-columns: minmax(var(--gutter), 1fr) repeat(24, minmax(0, var(--cell))) minmax(var(--gutter), 1fr);
    row-gap: var(--d-gap, 11px);
  }
  .s--bg-inset .fe { --inset: calc(var(--page-pad) * 2); }
}
.fe-b { position: relative; grid-area: var(--m); z-index: var(--mz, auto); min-width: 0; }
.fe-b > .blk { display: flex; flex-direction: column; justify-content: var(--mj, flex-start); width: 100%; height: 100%; }
@media (min-width: 768px) {
  .fe-b { grid-area: var(--d); z-index: var(--dz, auto); }
  .fe-b > .blk { justify-content: var(--dj, flex-start); }
}
@media (max-width: 767px) { .fe-b--hide-m { display: none; } }
@media (min-width: 768px) { .fe-b--hide-d { display: none; } }

/* ---------- Classic 12-column layout ----------
   Blocks carry 17px padding; only the outermost row pulls back out by 17px. Column widths are relative
   to the parent column (--w). The first/last-block padding rules follow the original layout engine. */
.cl > .cl-row { margin: 0 -17px; }
.cl-row { display: flex; }
.cl-col { flex: 0 0 auto; width: var(--w, 100%); min-width: 0; }
.cl-b { padding: 17px; }
.cl-row .cl-b:first-child { padding-top: 0; }
.cl-row .cl-b:first-child:last-child { padding-bottom: 0; }
.cl-b + .cl-row .cl-b:first-child,
.cl-row + .cl-row .cl-b:first-child { padding-top: 17px; }
.cl-b + .cl-row .cl-b:first-child:last-child,
.cl-row + .cl-row .cl-b:first-child:last-child { padding-bottom: 17px; }
.cl > .cl-row:first-child > .cl-col:first-child > .cl-b:not(:first-child):last-child,
.cl-b + .cl-row .cl-b:last-child,
.cl-row + .cl-row:not(:last-child) .cl-b:last-child { padding-bottom: 17px; }
@media (max-width: 767px) {
  .cl-row { display: block; }
  .cl-col { width: auto; }
  .cl-row .cl-b { padding-top: 17px !important; padding-bottom: 17px !important; }
  .cl-b--spacer { display: none; }
}

/* ---------- Blocks ---------- */
.blk { position: relative; }
.blk-text { color: var(--text); }
.blk-text .rte { width: 100%; }

/* images */
/* The picture never pushes the grid rows apart: the block is a size container and the image is laid
   over it. "Fit" images get a frame of their own aspect ratio, as large as the block allows, centred. */
.blk-image { container-type: size; }
.blk-image .img { position: relative; width: 100%; height: 100%; margin: auto; overflow: hidden; }
.blk-image .img--fit { width: min(100cqw, 100cqh * var(--ar, 1)); height: min(100cqh, 100cqw / var(--ar, 1)); }
.blk-image .img img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: var(--fit, cover); object-position: var(--fp, 50% 50%); }
.blk-image .img::after { content: ""; position: absolute; inset: 0; background: rgb(0 0 0 / .5); opacity: var(--ov, 0); pointer-events: none; }
.img__link { display: block; width: 100%; height: 100%; }
.img__mask { position: absolute; width: 0; height: 0; overflow: hidden; }
.fe-b--imageFluid > .blk { justify-content: center; }
.fe-b--video > .blk { height: auto; }   /* video blocks sit at the top of their area, as on the original */

.imgc { width: 100%; margin: 0 auto; }
.imgc__frame { position: relative; overflow: hidden; }
.imgc__frame img { width: 100%; height: auto; }
.imgc__frame > a { display: block; }
/* fixed aspect ratio (the picture is cropped to it) */
.imgc--ratio .imgc__frame { height: 0; padding-bottom: var(--ratio); }
.imgc--ratio .imgc__frame > a { position: absolute; inset: 0; }
.imgc--ratio .imgc__frame img { position: absolute; inset: 0; height: 100%; object-fit: var(--fit, cover); object-position: var(--fp, 50% 50%); }
/* "card" layout: picture beside its (empty) text card; stacked when the block is under 415px wide,
   with the card's 9% separation kept below the picture. (Squarespace only applies the narrow rule
   after a window resize, so a phone shows the wide layout until the first resize or toolbar change;
   the rebuild applies it from the start.) */
.blk-image-classic { container-type: inline-size; }
@container (max-width: 414.98px) {
  .imgc--card { padding-bottom: 9%; }
}
@container (min-width: 415px) {
  .imgc--card { display: flex; justify-content: space-between; }
  .imgc--card.imgc--right { flex-direction: row-reverse; }
  .imgc--card > .imgc__frame { flex: 0 0 auto; width: calc(50% - 4.5%); }
}
.imgc figcaption { padding-top: 1rem; }

/* buttons */
.btn-row { display: flex; width: 100%; }
.btn-row--center { justify-content: center; }
.btn-row--left { justify-content: flex-start; }
.btn-row--right { justify-content: flex-end; }
.btn {
  --bv: 1;   /* size value: primary 1, secondary 1.1, tertiary .9 (same fluid scale as the headings) */
  display: inline-block;
  padding: 1.3rem 2.171rem;
  border: 0; border-radius: 300px;
  background: var(--btn-bg); color: var(--btn-text);
  font-family: var(--font); font-size: 1rem; font-weight: 500; letter-spacing: .02em; line-height: normal;
  text-align: center; cursor: pointer;
  transition: opacity .1s linear;
}
.btn:hover { opacity: .8; }
.btn--secondary { --bv: 1.1; }
.btn--tertiary { --bv: .9; }
@media (max-width: 767px) and (orientation: portrait) {
  .btn { font-size: calc((var(--bv) - 1) * .012 * min(100vh, 900px) + 1rem); }
}
@media (min-width: 768px), (orientation: landscape) {
  .btn { font-size: min(calc((var(--bv) - 1) * 1.2vw + 1rem), max(calc((var(--bv) - 1) * .012 * var(--max-page) + 1rem), calc(var(--bv) * 1rem))); }
}
/* stretched: the button fills its grid area */
.btn-row--stretch { flex: 1; height: 100%; }
.btn--stretch { flex: 1; display: flex; align-items: center; justify-content: center; padding-top: 0; padding-bottom: 0; }

/* embeds and videos */
.embed { position: relative; width: 100%; height: 0; overflow: hidden; }
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* click-to-play thumbnail for embedded videos that have their own thumbnail */
.vf { position: absolute; inset: 0; display: block; background: #000; cursor: pointer; }
.vf__img { width: 100%; height: 100%; max-width: none; object-fit: cover; }
.vf__icon { position: absolute; left: 50%; top: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; display: flex; align-items: center; justify-content: center; }
.vf__icon svg { width: 33px; height: 38px; fill: #fff; filter: drop-shadow(0 0 6px rgb(0 0 0 / .35)); transition: transform .2s ease; }
.vf:hover .vf__icon svg, .vf:focus-visible .vf__icon svg { transform: scale(1.08); }
.vp--placeholder { background: #111; }
.blk-embed--code iframe { width: 100%; border: 0; }

/* Video player. Like the original it has three sizes, chosen by the player's own width:
   small (< 480px), medium (480-767px) and large (768px+). */
.vp { container-type: inline-size; position: relative; width: 100%; overflow: hidden; background: #000; color: #fff; font-family: Arial, sans-serif; line-height: 1.7; }
.vp video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.vp__poster { position: absolute; inset: 0; z-index: 1; background-color: #000; background-repeat: no-repeat; background-size: contain; background-position: 50% 50%; transition: opacity .2s ease; }
.vp--cover .vp__poster { background-size: cover; background-position: var(--fp, 50% 50%); }   /* custom thumbnail */
.vp.is-started .vp__poster { opacity: 0; pointer-events: none; }
.vp__big {
  position: absolute; left: 50%; top: 50%; z-index: 2;
  display: block; padding: 7px; border: 0; border-radius: 50%;
  background: rgb(0 0 0 / .7); color: #fff; opacity: .9;
  transform: translate(-50%, -50%);
  cursor: pointer; transition: .3s;
}
@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
  .vp__big { background: rgb(0 0 0 / .5); -webkit-backdrop-filter: blur(15px); backdrop-filter: blur(15px); }
  .vp__big:hover, .vp__big:focus-visible { background: rgb(0 0 0 / .7); }
}
.vp__big:hover, .vp__big:focus-visible { opacity: 1; }
.vp__big svg { display: block; width: 30px; height: 30px; fill: currentColor; }
.vp__big .i-pause, .vp.is-playing .vp__big .i-play { display: none; }
.vp.is-playing .vp__big .i-pause { display: block; }
/* while playing, the centre button (now "pause") shows only with the controls */
.vp.is-playing:not(.is-active) .vp__big { opacity: 0; visibility: hidden; }
/* the control layer covers the whole player (its shading is the bottom third); only the controls take clicks */
.vp__bar {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-wrap: wrap; align-content: flex-end; align-items: flex-end; justify-content: space-between;
  padding: 0 10px 3.5px; font-size: 12px; pointer-events: none;
  transition: opacity .4s ease-in;
}
.vp__bar > * { pointer-events: auto; }
.vp__bar::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; height: 33%; background-image: linear-gradient(0deg, rgb(0 0 0 / .9), rgb(0 0 0 / .4) 50%, rgb(0 0 0 / 0)); pointer-events: none; }
.vp.is-playing:not(.is-active) .vp__bar { opacity: 0; }
.vp__time { font-variant-numeric: tabular-nums; text-shadow: 0 0 4px rgb(0 0 0 / .8); }
.vp__dur { margin-right: auto; padding-left: 5px; }
.vp__dur::before { content: "\2044"; margin-right: 5px; }
.vp__spacer { display: none; }
.vp__btn { display: inline-flex; width: 24px; height: 24px; margin-left: 20px; padding: 0; border: 0; background: none; color: #e7e7e7; cursor: pointer; }
.vp__mute { margin-left: auto; }
.vp__btn:hover { color: #fff; }
.vp__btn svg { width: 24px; height: 24px; fill: currentColor; }
.vp__btn .i-on, .vp__btn[aria-pressed="true"] .i-off { display: none; }
.vp__btn[aria-pressed="true"] .i-on { display: block; }
.vp__set { display: none; }
.vp__seek { order: 9; flex: 1 0 100%; position: relative; height: 14px; margin-top: 3px; }
.vp__seek input { position: absolute; inset: 0; width: 100%; height: 14px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.vp__seek input::-webkit-slider-runnable-track { height: 4px; border-radius: 26px; background: linear-gradient(to right, #fff var(--v, 0%), rgb(255 255 255 / .3) var(--v, 0%)); }
.vp__seek input::-moz-range-track { height: 4px; border-radius: 26px; background: linear-gradient(to right, #fff var(--v, 0%), rgb(255 255 255 / .3) var(--v, 0%)); }
.vp__seek input::-webkit-slider-thumb { -webkit-appearance: none; width: 13px; height: 13px; margin-top: -4.5px; border-radius: 50%; background: #fff; border: 0; opacity: 0; transition: opacity .2s; }
.vp__seek input::-moz-range-thumb { width: 13px; height: 13px; border-radius: 50%; background: #fff; border: 0; opacity: 0; }
.vp__seek:hover input::-webkit-slider-thumb, .vp__seek input:focus-visible::-webkit-slider-thumb { opacity: 1; }
.vp__seek:hover input::-moz-range-thumb { opacity: 1; }
.vp__menu {
  position: absolute; right: 10px; bottom: 56px; z-index: 4;
  min-width: 164px; max-height: calc(100% - 120px); overflow-y: auto; padding: 8px 0; border-radius: 8px;
  background: rgb(38 38 38 / .9); font-size: 12px; font-weight: 500;
}
.vp__menu[hidden] { display: none; }
.vp__menu button { display: block; width: 100%; padding: 5px 28px 5px 26px; border: 1px solid transparent; background: none; color: #fff; font: inherit; line-height: 1.7; text-align: left; cursor: pointer; position: relative; }
.vp__menu button:hover { background: rgb(79 79 79 / .9); }
.vp__menu button[aria-checked="true"]::before { content: "\2713"; position: absolute; left: 10px; }
@container (min-width: 480px) {
  .vp__big { padding: 15px; }
  .vp__big svg { width: 48px; height: 48px; margin: 1px; }
  .vp__bar { padding: 0 20px 16.5px; }
  .vp__set { display: inline-flex; }
  .vp__menu { right: 20px; }
}
@container (min-width: 768px) {
  .vp__big svg { width: 72px; height: 72px; margin: 9px; }
}
.vp:fullscreen { display: flex; align-items: center; }
.vp:fullscreen .vp__set { display: inline-flex; }

/* code blocks: the client-logo carousel used on /hire */
.logo-carousel { width: 100%; overflow: hidden; background-color: transparent; position: relative; }
.logo-track { display: flex; align-items: center; justify-content: space-between; width: max-content; animation: logo-scroll 120s linear infinite; }
.logo-item { padding: 0 20px; flex: 0 0 auto; }
.logo-item img { width: 150px; height: auto; }
@keyframes logo-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .logo-track { animation: none; } }

/* spacer + line */
.blk-spacer { min-height: 1px; }
.blk-hr { justify-content: center !important; }
.blk-hr hr { width: 100%; margin: .5em auto; }

/* social links */
/* --si: icon box size, --sg: gap, --ss: glyph scale ("regular" icons are drawn twice as large).
   Glyphs are 30/64 of the scaled box, as on the original site. */
.social { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sg, 12px); width: 100%; }
.social--center { justify-content: center; }
.social--left { justify-content: flex-start; }
.social--right { justify-content: flex-end; }
.social__link {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: var(--si, 20px); height: var(--si, 20px); overflow: hidden;
  color: var(--si-main); transition: opacity .17s ease-in-out;
}
.social__link:hover { opacity: .8; }
.social__link svg { flex: 0 0 auto; width: calc(var(--si, 20px) * var(--ss, 1) * .46875); height: calc(var(--si, 20px) * var(--ss, 1) * .46875); fill: currentColor; }
.social--solid .social__link { background: var(--si-main); color: var(--si-second); }
.social--circle .social__link { border-radius: 50%; }
.social--rounded .social__link { border-radius: 15%; }

/* marquee: text size follows the heading scale with the block's own value (--mq-v) */
.marquee { position: relative; display: flex; align-items: center; width: 100%; overflow: hidden; }
.marquee--fade { -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 15%, #000 85%, transparent 100%); mask-image: linear-gradient(to right, transparent 0%, #000 15%, #000 85%, transparent 100%); }
.marquee a { display: block; width: 100%; color: inherit; }
.marquee__track { display: flex; width: max-content; white-space: nowrap; will-change: transform; }
.marquee__item { flex: 0 0 auto; margin: 0; padding-right: var(--mq-gap, .4em); line-height: 1.4 !important; white-space: nowrap; color: var(--heading); }
@media (max-width: 767px) and (orientation: portrait) {
  .marquee__item { font-size: calc((var(--mq-v, 2) - 1) * .012 * min(100vh, 900px) + 1rem); }
}
@media (min-width: 768px), (orientation: landscape) {
  .marquee__item { font-size: min(calc((var(--mq-v, 2) - 1) * 1.2vw + 1rem), max(calc((var(--mq-v, 2) - 1) * .012 * var(--max-page) + 1rem), calc(var(--mq-v, 2) * 1rem))); }
}
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* forms (measured from the live site: solid fields, square corners, all-round border) */
.form { width: 100%; }
.form__field { position: relative; margin-bottom: 20px; }
.form__field label { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .517em; padding-bottom: 4px; font-size: 1rem; color: var(--text); }
.form__req { opacity: .7; }
@media (max-width: 767px) and (orientation: portrait) { .form__req { font-size: calc((var(--t-small) - 1) * .012 * min(100vh, 900px) + 1rem); } }
@media (min-width: 768px), (orientation: landscape) { .form__req { font-size: min(calc((var(--t-small) - 1) * 1.2vw + 1rem), max(calc((var(--t-small) - 1) * .012 * var(--max-page) + 1rem), calc(var(--t-small) * 1rem))); } }
.form input[type="text"], .form input[type="email"], .form textarea {
  display: block; width: 100%; margin: 0; padding: 10px;
  border: 1px solid rgb(0 0 0 / .55); border-radius: 0;
  background: rgb(250 250 250 / .8); color: #000;
  font: inherit; font-size: 1rem; line-height: var(--body-lh);
  transition: background-color .15s cubic-bezier(.33,1,.68,1), transform .15s cubic-bezier(.33,1,.68,1);
}
.form textarea { height: 100px; min-height: 100px; resize: vertical; }
.form input:hover, .form textarea:hover, .form input:focus, .form textarea:focus { transform: scale(1.02); }
.form input:focus-visible, .form textarea:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.form input::placeholder, .form textarea::placeholder { color: rgb(0 0 0 / .55); }
.form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form__actions { display: flex; justify-content: flex-start; }
.form__actions--center { justify-content: center; }
.form__actions--right { justify-content: flex-end; }
.form__submit[disabled] { opacity: .6; cursor: default; }
.form__error { margin: 1rem 0 0; color: var(--text); }
.form__done { color: var(--text); }
@media (prefers-reduced-motion: reduce) { .form input, .form textarea { transition: none; } .form input:hover, .form textarea:hover, .form input:focus, .form textarea:focus { transform: none; } }

/* portfolio grid (collection pages) */
.s--portfolio { display: block; background: var(--bg); }
.s__inner--portfolio { display: block; }
/* the grid's padding counts inside its maximum width, as on the original */
.pf {
  display: grid; grid-template-columns: repeat(var(--pf-cols, 3), minmax(0, 1fr)); column-gap: var(--pf-hg); row-gap: var(--pf-vg);
  max-width: var(--max-page); margin: 0 auto; padding: 3.3vw var(--gutter-m);
}
@media (min-width: 768px) { .pf { padding-left: var(--page-pad); padding-right: var(--page-pad); } }
.pf__item { display: block; color: var(--text); }
.pf__img { position: relative; overflow: hidden; aspect-ratio: 4 / 3; }
.pf__img img { width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform 1s cubic-bezier(.19,1,.22,1); }
.pf--hover-zoom .pf__item:hover .pf__img img { transform: scale(1.05); }
.pf__text { padding-top: var(--pf-ts, 15px); }
/* titles are h3 elements set at the h4 size, as on the original */
.pf__title { margin: 0 0 .5em; line-height: 1; color: var(--heading); }
@media (max-width: 767px) and (orientation: portrait) { .pf__title { font-size: calc((var(--h4) - 1) * .012 * min(100vh, 900px) + 1rem); } }
@media (min-width: 768px), (orientation: landscape) { .pf__title { font-size: min(calc((var(--h4) - 1) * 1.2vw + 1rem), max(calc((var(--h4) - 1) * .012 * var(--max-page) + 1rem), calc(var(--h4) * 1rem))); } }
@media (max-width: 767px) { .pf { grid-template-columns: minmax(0, 1fr); } }

/* item pagination (previous / next project) */
.ipg { display: flex; padding: 3vw var(--gutter-m); background: var(--bg); color: var(--text); }
@media (min-width: 768px) { .ipg { padding: 3vw var(--page-pad); } }
.ipg__link { display: flex; align-items: center; max-width: 50%; min-width: 0; text-align: left; color: var(--text); }
.ipg__link--prev { margin-right: auto; }
.ipg__link--next { margin-left: auto; text-align: right; }
.ipg__icon { flex: 0 0 auto; box-sizing: content-box; width: 18px; height: 32px; padding-right: 25px; fill: none; stroke: currentColor; stroke-miterlimit: 10; }
.ipg__link--next .ipg__icon { padding-right: 0; padding-left: 25px; }
.ipg__text { min-width: 0; }
.ipg__title { display: block; font-weight: 700; line-height: 1; overflow-wrap: break-word; color: var(--heading); }
@media (min-width: 768px), (orientation: landscape) {
  .ipg__title { font-size: min(calc((var(--h3) - 1) * 1.2vw + 1rem), max(calc((var(--h3) - 1) * .012 * var(--max-page) + 1rem), calc(var(--h3) * 1rem))); }
}
/* phones: the original kept the desktop size here and the two titles ran into each other and off
   the screen; they use the smaller heading size instead so both fit */
@media (max-width: 767px) {
  .ipg__title { font-size: 1rem; }
  .ipg__icon { padding-right: 16px; }
  .ipg__link--next .ipg__icon { padding-right: 0; padding-left: 16px; }
}

/* generative backgrounds */
.s__bg--gen canvas { display: block; }
/* pause / play button for animated backgrounds (sits above the wavy edge when there is one) */
.gen__toggle {
  position: absolute; right: 14px; bottom: 14px; z-index: 999;
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%;
  background: rgb(0 0 0 / .5); -webkit-backdrop-filter: blur(15px); backdrop-filter: blur(15px);
  color: #fff; cursor: pointer; pointer-events: auto; outline: none;
}
.s--divider .gen__toggle { bottom: calc(14px + var(--dh) * 1vw); }
.gen__toggle:focus-visible { background: rgb(0 0 0 / .7); box-shadow: 0 0 0 5px transparent, 0 0 0 7px rgb(0 0 0 / .7); }
.gen__toggle svg { width: 16px; height: 16px; fill: currentColor; }
.gen__toggle .i-play, .gen__toggle[aria-pressed="true"] .i-pause { display: none; }
.gen__toggle[aria-pressed="true"] .i-play { display: block; }

/* 404: Squarespace's plain system page (text under the header, 3vw side margins) */
.sys__page { max-width: 1900px; padding: var(--header-h, 100px) var(--page-pad) var(--page-pad); }
.sys__page > p:first-child { padding-top: var(--page-pad); }
.sys__page p, .sys__page ul { margin: 16px 0; }
.sys__page ul { padding-left: 40px; list-style: disc; }
.sys__page a { color: inherit; background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-size: 100% 1px; background-position: 0 100%; }