/* 
*********
VARIABLES.CSS
*********
The custom properties defined here provide a set of base custom properties for common 
shared styles. Alongside styles set within components and regions directly, these 
custom properties provide the default theme for the system

DO NOT MAKE THEME LEVEL CHANGES IN THIS FILE
This file is exclusively for default theme styling - please ensure all site-specific 
theme changes are made as overrides within theme.css

ADDING NEW CUSTOM PROPERTIES
Please ensure all new custom properties added here are also added to theme.css
*/

/* 1. THEME-ABLE */

:root {
  /********
  Colour
  ********/
  /* Light & dark */
  --color-light: #ffffff;
  --color-light-glare: #d0d0d0;
  --color-dark: #000000;
  --color-dark-glare: #2b2b2b;
  --color-mid: #888888;
  --color-mid-shade: #555555;
  --color-highlight: #F5A03C;  /* trying to find a variable that will do for review stars across the board */
  /* Primary */
  --color-primary: #0000ff;
  --color-primary-glare: #3030ff;
  --color-primary-shade: #0000aa;
  /* Secondary */
  --color-secondary: var(--color-primary);
  --color-secondary-glare: var(--color-primary-glare);
  /* Tertiary */
  --color-tertiary: var(--color-primary);
  --color-tertiary-glare: var(--color-primary-glare);
  /* Traffic lights */
  --color-error: #ee0000;
  --color-warning: #ee9900;
  --color-success: #55dd00;
  /* Colour utilities */
  --color-links: var(--color-light-glare);
  --color-global-bg: var(--color-light);
  --color-global-text: var(--color-dark);
  --color-surface-bg: var(--color-mid);
  --color-surface-bg-interact: var(--color-mid-shade);
  --color-surface-text: var(--color-dark);
  --color-surface-text-interact: var(--color-dark);
  --color-selection-bg: var(--color-light);
  --color-selection-text: var(--color-dark);
  --color-disabled: var(--color-mid);

  /********
  Font
  ********/
  /* Family */
  --font-family-base: Inter, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
  --font-family-accent: var(--font-family-base);
  --font-family-display: var(--font-family-base);
  --font-family-condensed: var(--font-family-base);
  --font-family-secondary: var(--font-family-base);
  /* Weight */
  --font-weight-base: 400;
  --font-weight-accent: 500;
  --font-weight-display: 700;
  --font-weight-condensed: 400;
  --font-weight-bold: 700;

  /********
  Typesetting
  ********/
  /* Leading (line height) */
  --leading: 1.5;
  --leading-short: 1.3;
  --leading-fine: 1.1;
  --leading-flat: 1;
  --leading-loose: 1.7;
  /* Measure (line length) */
  --measure: 65ch;
  --measure-xs: 20ch;
  --measure-s: 35ch;
  --measure-m: 50ch;
  --measure-l: 70ch;
  /* Kerning (letter spacing) */
  --kerning: normal;
  --kerning-tight: -0.04em;
  --kerning-loose: 0.04em;
  /* Text sizing */
  --text-size-base: var(--size-step-0);
  --text-size-lede: var(--size-step-1);
  --text-size-lede-lg: var(--size-step-1);
  --text-size-meta: var(--size-step--1);
  /* Headings (h1, h2, h3, h4) */
  --text-size-heading-1: var(--size-step-5);
  --text-size-heading-2: var(--size-step-4);
  --text-size-heading-3: var(--size-step-3);
  --text-size-heading-4: var(--size-step-2);
  --text-size-heading-5: var(--size-step-1);
  --text-size-heading-6: var(--size-step-0);
  --measure-heading-1: var(--measure-xs);
  --measure-heading-2: var(--measure-s);
  --measure-heading-3: var(--measure-s);
  --measure-heading-4: var(--measure-m);
  --measure-heading-5: var(--measure-m);
  --measure-heading-6: var(--measure-m);
  --font-weight-heading: var(--font-weight-bold);
  --leading-heading: var(--leading-flat);
  --kerning-heading: var(--kerning-tight);
  --text-transform-heading: none;
  --cpsp-heading: off;

  /********
  Type scale
  @link https://utopia.fyi/type/calculator/?c=393,18,1.125,1440,20,1.25,10,3,&s=0.75%7C0.5%7C0.25,1.5%7C2%7C3%7C4%7C6,s-l&g=s,l,xl,12
  ********/
  --size-step--3: clamp(0.625rem, 0.5714rem + 0.2679vi, 0.8125rem); /* 10px --> 13px */
  --size-step--2: clamp(0.875rem, 0.8393rem + 0.1786vi, 1rem); /* 14px --> 16px */
  --size-step--1: clamp(1rem, 0.9643rem + 0.1786vi, 1.125rem); /* 16px --> 18px */
  --size-step-0: clamp(1.125rem, 1.0781rem + 0.191vw, 1.25rem); /* 18px --> 20px */
  --size-step-1: clamp(1.2656rem, 1.1542rem + 0.4537vw, 1.5625rem); /* 20px --> 25px */
  --size-step-2: clamp(1.4238rem, 1.2252rem + 0.8089vw, 1.9531rem); /* 23px --> 31px */
  --size-step-3: clamp(1.6018rem, 1.2867rem + 1.2831vw, 2.4414rem); /* 26px --> 39px */
  --size-step-4: clamp(1.802rem, 1.3329rem + 1.9098vw, 3.0518rem); /* 29px --> 49px */
  --size-step-5: clamp(2.0273rem, 1.3564rem + 2.7315vw, 3.8147rem); /* 32px --> 61px */
  --size-step-6: clamp(2.2807rem, 1.3469rem + 3.8016vw, 4.7684rem); /* 36px --> 76px */
  --size-step-7: clamp(2.5658rem, 1.2916rem + 5.1877vw, 5.9605rem); /* 41px --> 95px */
  --size-step-8: clamp(2.8865rem, 1.1733rem + 6.9747vw, 7.4506rem); /* 46px --> 119px */
  --size-step-9: clamp(3.2473rem, 0.9704rem + 9.2698vw, 9.3132rem); /* 52px --> 149px */
  --size-step-10: clamp(3.6532rem, 0.6548rem + 12.2075vw, 11.6415rem); /* 58px --> 186px */
  --size-step-11: clamp(5rem, 0.05rem + 20.1528vw, 18.1875rem); /* 80px --> 291px */

  /********
  Space scale
  @link https://utopia.fyi/space/calculator/?c=393,18,1.125,1440,24,1.25,10,2,&s=0.75%7C0.5%7C0.25,1.5%7C2%7C3%7C4%7C5%7C6,3xs-s%7Cxl-3xl&g=s,l,xl,12
  ********/
  --space-4xs: clamp(0.1875rem, 0.164rem + 0.0955vw, 0.25rem);/* 3px --> 4px */
  --space-3xs: clamp(0.3125rem, 0.289rem + 0.0955vw, 0.375rem); /* 5px --> 6px */
  --space-2xs: clamp(0.5625rem, 0.4921rem + 0.2865vw, 0.75rem); /* 9px --> 12px */
  --space-xs: clamp(0.875rem, 0.7812rem + 0.382vw, 1.125rem); /* 14px --> 18px */
  --space-s: clamp(1.125rem, 0.9842rem + 0.5731vw, 1.5rem); /* 18px --> 24px */
  --space-m: clamp(1.6875rem, 1.4764rem + 0.8596vw, 2.25rem); /* 27px --> 36px */
  --space-l: clamp(2.25rem, 1.9685rem + 1.1461vw, 3rem); /* 36px --> 48px */
  --space-xl: clamp(3.375rem, 2.9527rem + 1.7192vw, 4.5rem); /* 54px --> 72px */
  --space-2xl: clamp(4.5rem, 3.937rem + 2.2923vw, 6rem); /* 72px --> 96px */
  --space-3xl: clamp(5.625rem, 4.9212rem + 2.8653vw, 7.5rem); /* 90px --> 120px */
  --space-4xl: clamp(6.75rem, 5.9054rem + 3.4384vw, 9rem); /* 108px --> 144px */
  /* One-up pairs */
  --space-3xs-2xs: clamp(0.3125rem, 0.1483rem + 0.6686vw, 0.75rem);
  --space-2xs-xs: clamp(0.5625rem, 0.3514rem + 0.8596vw, 1.125rem);
  --space-xs-s: clamp(0.875rem, 0.6404rem + 0.9551vw, 1.5rem);
  --space-s-m: clamp(1.125rem, 0.7027rem + 1.7192vw, 2.25rem);
  --space-m-l: clamp(1.6875rem, 1.1948rem + 2.0057vw, 3rem);
  --space-l-xl: clamp(2.25rem, 1.4054rem + 3.4384vw, 4.5rem);
  --space-xl-2xl: clamp(3.375rem, 2.3897rem + 4.0115vw, 6rem);
  --space-2xl-3xl: clamp(4.5rem, 3.3739rem + 4.5845vw, 7.5rem);
  --space-3xl-4xl: clamp(5.625rem, 4.3582rem + 5.1576vw, 9rem);
  /* Custom pairs */
  --space-3xs-s: clamp(0.3125rem, -0.1332rem + 1.8147vw, 1.5rem);
  --space-xl-3xl: clamp(3.375rem, 1.8266rem + 6.3037vw, 7.5rem);

  /********
  Spacing
  ********/
  /* Gutters */
  --gutter: var(--space-s);
  --gutter-s: var(--space-xs);
  --gutter-l: var(--space-l);
  /* Regions */
  --region-space: var(--space-2xl);
  /* Text icons */
  --text-icon-gap: var(--space-xs, 1em);
  /* Blockquotes */
  --blockquote-space: var(--space-s);
  /* Figures */
  --figure-margin: 0;

  /********
  Sizing
  ********/
  /* Size limits */
  --limited-width: 2rem;
  --limited-height: 2rem;
  /* Wrappers */
  --wrapper-max-width: 1360px;
  --narrow-wrapper-max-width: 1180px;
  --wide-wrapper-max-width: 1600px;
  --small-wrapper-max-width: 480px;

  /********
  Border
  ********/
  /* Radius */
  --radius: 0.75rem;
  --radius-l: 2rem;
  --radius-m: 1rem;
  --radius-s: 0.25rem;
  /* Stroke */
  --stroke-color: var(--color-light);
  --stroke: 1px solid var(--stroke-color, currentColor);
  --stroke-weight-light: 1px;
  --stroke-weight-medium: 3px;
  --stroke-weight-heavy: 6px;
  --stroke-style: solid;

  /********
  Shadow
  ********/
  /* Box shadow */
  --box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.25);
  /* Drop shadow */
  --drop-shadow: 0 0 60px rgba(0, 0, 0, 0.5);

  /********
  Overscroll
  ********/
  /* Scroll bars */
  --scroll-bar-offset: var(--space-l);
  --scroll-bar-size: 0.4em;
  --scroll-bar-track-color: var(--color-mid);
  --scroll-bar-thumb-color: var(--color-light);

  /********
  Interaction
  ********/
  /* Focus */
  --focus-ring: 2px solid var(--color-mid-shade);
  --focus-ring-offset: 2px;
  /* Target */
  --scroll-margin: var(--space-3xl-4xl);

  /********
  Lists
  ********/
  /* Global */
  --global-ul-padding: 1.75ch;
  --global-list-flow: 0.5em;
  /* Description lists */
  --dt-font-family: var(--font-family-base);
  --dt-font-weight: var(--font-weight-bold);
  --dt-font-size: var(--size-step--2);
  --dt-color: var(--color-primary);
  --dt-text-transform: uppercase;
  --dt-kerning: var(--kerning-loose);
  --dd-font-size: var(var(--text-size-lede));
  --dd-measure: 60ch;

  /********
  Forms
  ********/
  --input-padding-block: 0.5em;
  --input-padding-inline: 0.8em;
  --input-radius: 0;
  --input-border-color: var(--stroke-color);
  --input-border-width: var(--stroke-weight-light);
  --input-border-style: var(--stroke-style);
  --input-width: 100%;
  --input-background: var(--color-light);
  --input-color: var(--color-dark);
  --input-flex-gap: var(--space-2xs);
  --input-check-sibling-space: var(--space-xs);
  --form-label-leading: var(--leading-short);
  --form-label-weight: var(--font-weight-base);
  --form-max-width: 60rem;
}

/* 2. NON THEME-ABLE */

:root {
  /********
  Utilities
  ********/
  /* Small screen (determines if we're on a small screen for JS components) */
  /* This is static for now because we don't have access to custom properties in media queries 😩 */
  --small-screen: 1;

  /********
  Media queries
  ********/
  /* USAGE @media (--md) */
}

/* 
  Global styles 

  Low(ish)-specificity, global styles that apply to the whole 
  project: https://cube.fyi/css.html 
*/

/* Box sizing rules */

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

/* Remove default margin in favour of better control in authored CSS */

:where(body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd) {
  margin-block: 0;
}

/* Core elements */

html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  scroll-behavior: smooth;
}

body {
  overflow-x: hidden;
  margin: 0;
  background: var(--color-global-bg);
  color: var(--color-global-text);
  font-size: var(--text-size-base);
  font-family: var(--font-family-base);
  line-height: var(--leading);
  min-height: 100vh;
}

/* Add any modal/full screen cases into this :has() and the body will prevent scrolling */

body:has(.off-screen-menu details[open]) {
  overflow: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: var(--leading-heading, 1);
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-heading, 700);
  letter-spacing: var(--kerning-heading, 0);
  text-transform: var(--text-transform-heading, none);
  text-wrap: balance;
  overflow-wrap: anywhere;
  font-feature-settings: 'cpsp' var(--cpsp-heading, off);
}

:is(h1, h2, h3, h4, h5, h6) em {
  font-style: normal;
}

@media (min-width: 40em) {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    overflow-wrap: unset;
  }
}

h1 {
  font-size: var(--text-size-heading-1);
  max-width: var(--measure-heading-1, 25ch);
}

h2 {
  font-size: var(--text-size-heading-2);
  max-width: var(--measure-heading-2, 25ch);
}

h3 {
  font-size: var(--text-size-heading-3);
  max-width: var(--measure-heading-3, 25ch);
}

h4 {
  font-size: var(--text-size-heading-4);
  max-width: var(--measure-heading-4, 25ch);
}

h5 {
  font-size: var(--text-size-heading-5);
  max-width: var(--measure-heading-5, 25ch);
}

h6 {
  font-size: var(--text-size-heading-6);
  max-width: var(--measure-heading-6, 25ch);
}

/* Position sub and sup with transform so it doesn't affect leading */

sub,
sup {
  font-size: 0.75em;
  vertical-align: baseline;
  display: inline-block;
}

sub {
  transform: translateY(0.65ex);
}

sup {
  transform: translateY(-0.7ex);
}

/* Reset blockquotes to be more paragraph like because we're only using them within components on this project */

blockquote {
  padding: 0;
  margin: 0;
}

blockquote > * + * {
  margin-block-start: var(--blockquote-space, 1em);
}

/* Lists */

:is(ol, ul) {
  margin-block-end: 0;
}

ul {
  padding-inline-start: var(--global-ul-padding);
  list-style-type: disc;
}

:is(ol, ul, dl):where(:not([class])) > li + li {
  margin-block-start: var(--global-list-flow);
}

:is(ol, ul, dl):where(:not([class])) :is(ol, ul, dl) {
  margin-block-start: var(--global-list-flow);
}

ul ::marker {
  font-size: 1.2em;
  line-height: 1;
}

ol ::marker {
  font-size: 1em;
  font-weight: var(--font-bold);
}

/* Lists with classes and roles will be out of standard flow, so remove the default spacing and style */

[role='list'][class],
[role='tablist'] {
  margin-block: 0;
  padding: 0;
  list-style: none;
}

/* Description lists */

dt {
  font-family: var(--dt-font-family, inherit);
  font-weight: var(--dt-font-weight, inherit);
  font-size: var(--dt-font-size, inherit);
  color: var(--dt-color, inherit);
  text-transform: var(--dt-text-transform, uppercase);
  letter-spacing: var(--dt-kerning, 0.04em);
  font-feature-settings: var(--dt-caps-spacing, 'cpsp' on);
}

dd {
  margin-inline: 0;
  font-size: var(--dd-font-size, var(--text-size-lede));
  max-width: var(--dd-measure, var(--measure-m, 60ch));
  margin-inline: auto;
  text-wrap: balance;
}

dt + dd {
  margin-block-start: var(--space-2xs);
}

dd + dt {
  margin-block-start: var(--space-l);
}

dd + dd {
  margin-block-start: var(--space-3xs);
}

/* Media */

video,
iframe[src*='youtube'],
iframe[src*='vimeo'] {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
}

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

picture {
  width: max-content;
}

figure {
  margin: var(--figure-margin, 0);
}

figcaption {
  padding-block-start: 0.5em;
  font-size: var(--text-size-meta);
}

/* Tables */

table {
  border: var(--stroke);
  border-collapse: collapse;
  width: 100%;
}

th {
  text-align: left;
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-fine);
  background: rgb(0 0 0 / 2%);
}

thead th {
  padding-block: var(--space-s);
}

td,
th {
  padding: var(--space-xs) var(--space-s);
}

th:not(:only-of-type) {
  border-block-end: var(--stroke);
}

th:only-of-type {
  border-inline-end: var(--stroke);
}

:is(th, td) ~ :is(th, td) {
  border-inline-start: var(--stroke);
}

tr + tr :is(th, td) {
  border-block-start: var(--stroke);
}

caption {
  caption-side: bottom;
  margin-block-start: var(--space-2xs, 0.5lh);
}

:is(caption, figcaption) {
  font-style: var(--caption-font-style, normal);
  font-size: var(--caption-font-size, 1em);
}

/* Interactive */

a:not([class]) {
  color: var(--color-links, inherit);
  text-decoration-skip-ink: auto;
  text-decoration-thickness: from-font;
}

a:not([class]):hover {
  text-underline-offset: 0.2ex;
}

abbr {
  cursor: help;
  text-underline-offset: 0.2ex;
  color: var(--color-mid-shade);
}

/* Focus as a fallback */

/* We have to define the full focus outline custom property code because if set that as 
   a custom property itself, the --focus-color won't correctly cascade */

:focus {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

/* If focus-visible is supported, opt for that approach as it's a better pointer experience */

@supports selector(:focus-visible) {
  :focus {
    outline: none;
  }

  :focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
  }
}

/* Firefox is the only browser that doesn't outline the whole element unless you 
   make it display: inline-block. That in itself causes multiple flow issues so 
   we can detect it, using its own vendor prefix and reduce focus offset
*/

@supports (-moz-appearance: none) {
  :root {
    --focus-ring-offset: -0.2lh;
  }
}

:is([tabindex='-1']):focus,
:is([tabindex='-1']):focus-visible {
  outline: none;
}

::selection {
  color: var(--color-selection-text);
  background: var(--color-selection-bg);
}

:target {
  scroll-margin-block: var(--scroll-margin, 3em);
}

/* Horizontal rule*/

hr {
  text-align: center;
  border: none;
  border-block-start: var(--stroke);
  overflow: visible;
}

hr:not([class]) {
  margin-block: var(--flow-space, var(--gutter-l));
}

/* Scale icons within container*/

svg:not([height]) {
  width: auto;
  height: 1lh;
}

/* Don't let SVGs shirnk in flex contexts where there's less space */

svg {
  flex-shrink: 0;
}

/* Forms */

input,
button,
textarea,
select {
  font: inherit;
}

form {
  --focus-color: var(--color-mid-shade);
}

form > * {
  text-align: left;
}

form > * + * {
  margin-top: var(--flow-space, 1rem);
}

::placeholder {
  color: var(--color-mid);
}

input,
select,
textarea {
  accent-color: var(--color-primary);
}

input:not([type='checkbox'], [type='radio'], [type='color']),
select,
textarea {
  --focus-ring-offset: -0.6ex;
  --color-selection-text: var(--input-background);

  padding-block: var(--input-padding-block);
  padding-inline: var(--input-padding-inline);
  border-radius: var(--input-radius);
  border-color: var(--input-border-color);
  border-width: var(--input-border-width);
  border-style: var(--input-border-style);
  width: var(--input-width);
  background: var(--input-background);
  color: var(--input-color);
}

textarea {
  padding-block: var(--input-padding-inline, 0.8em);
}

label {
  line-height: var(--form-label-leading, var(--leading-short));
  font-weight: var(--form-label-weight, var(--font-weight-base));
}

/* Creates a line break, but maintains its inline behaviour */

label::after {
  content: '\A';
  white-space: pre;
}

/* Usually label wraps checkbox and radio buttons, so we give ourselves more layout and text-flow control with flex */

label:has(input) {
  display: flex;
  align-items: flex-start;
  gap: var(--input-flex-gap, 0.5em);
  font-weight: revert;
}

label:has(input) + label:has(input) {
  margin-block-start: var(--input-check-sibling-space);
}

/* Optical adjustment to raise the checkbox/radio */

label:has(input) input {
  transform: translateY(0.25ex);
}

input:disabled {
  background: var(--color-disabled);
}

input:disabled,
label input:disabled + * {
  cursor: not-allowed;
}

/* Sets a sesible height if textarea rows attribute is missing */

textarea:not([rows]) {
  min-height: 10em;
}

fieldset {
  border: var(--stroke);
  padding: var(--space-s);
}

legend {
  font-weight: var(--font-weight-base);
  padding-inline: var(--space-xs);
}

/* Details and summary */

summary {
  font-weight: var(--font-bold);
  cursor: default;
}

details[open] summary {
  margin-block-end: var(--space-s);
}

/* Allow video player to play landscape videos */

@media (min-width: 40em) {
  :root {
    --small-screen: 0;
  }
}

.accordion {
  --accordion-calculated-gutter: var(--gutter, var(--space-s));
  --accordion-calculated-space: var(--accordion-space, var(--space-l));
  --accordion-calculated-gap: var(--text-icon-gap, var(--space-xs));
  --accordion-stroke-enabled: var(--accordion-borders, 1);

  background: var(--accordion-bg, transparent);
}

/* This is the reason accordion is a div wrapping a details element. 
   We need to query whether to show the stroke. 
   You can't apply style to the element you are style querying */

@container style(--accordion-stroke-enabled: 1) {
  .accordion summary {
    border-block: var(--stroke);
  }

  .accordion__content {
    border-block-end: var(--stroke);
  }
}

.accordion summary {
  display: flex;
  align-items: var(--accordion-vertical-alignment, center);
  justify-content: var(--accordion-horizontal-alignment, center);
  gap: var(--accordion-calculated-gap);
  padding: var(--accordion-calculated-gutter);
  line-height: var(--leading-flat);
  font-weight: var(--accordion-font-weight, var(--font-weight-bold));
  cursor: pointer;
  background: var(--accordion-summary-bg, transparent);
  color: var(--accordion-summary-color, currentColor);
}

/* Overrides global style */

.accordion details[open] summary {
  margin-block: 0;
}

.accordion summary svg {
  height: var(--accordion-icon-height, 1.2ex);
  transform: translateY(var(--accordion-icon-optical-adjustment, 0));
}

.accordion__content {
  padding: var(--accordion-calculated-space) var(--accordion-calculated-gutter);
  text-align: center;
}

/* Variants */

.accordion[data-align='left'] summary {
  justify-content: start;
}

.accordion[data-align='left'] .accordion__content {
  text-align: left;
}

.availability-slot {
  --flow-space: var(--availability-slot-flow-space, var(--space-s));

  padding-block-start: var(--availability-slot-padding--block-start, var(--availability-slot-padding, var(--space-m)));
  padding-block-end: var(--availability-slot-padding-block-end, var(--availability-slot-padding, var(--space-m)));
  border-top-width: var(--availability-slot-border-top-width, var(--stroke-weight-heavy));
  border-bottom-width: var(--availability-slot-border-bottom-width, var(--stroke-weight-heavy));
  border-color: var(--availability-slot-border-color, currentColor);
  border-style: var(--availability-slot-border-style, solid);
  border-right-width: 0;
  border-left-width: 0;
  text-align: left;
}

.availability-slot__heading {
  font-size: var(--availability-slot-heading-font-size, var(--size-step-2));
  font-family: var(--availability-slot-heading-font-family, var(--font-family-base));
  font-weight: var(--availability-slot-heading-font-weight, var(--font-weight-base));
}

.availability-slot__item {
  padding-block: var(--availability-slot-item-padding-block, var(--space-3xs));
}

.blowout-gallery {
  width: clamp(500px, 200vi, var(--wrapper-max-width));
  margin-left: 50%;
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--blowout-gallery-gutter, var(--gutter));
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--button-gap, var(--gutter));
  padding: var(--button-padding, var(--space-2xs, 0.8em) var(--space-m, 2em));
  background: var(--button-bg, var(--color-surface-bg));
  color: var(--button-text, var(--color-surface-text));
  line-height: var(--button-leading, var(--leading-fine));

  border-color: var(--button-border-color, var(--color-mid));
  border-width: var(--button-border-width, var(--stroke-weight-heavy));
  border-style: var(--button-border-style, var(--stroke-style));

  border-radius: var(--button-radius, var(--radius));

  text-decoration: none;
  text-transform: var(--button-text-transform, uppercase);
  font-family: var(--button-font-family, var(--font-family-base));
  font-weight: var(--button-font-weight, var(--font-weight-bold));
  font-size: var(--button-font-size, var(--size-step--1));
  letter-spacing: var(--button-kerning, var(--kerning-loose));

  transition:
    background-color 100ms cubic-bezier(0.45, 0, 0.55, 1),
    color 100ms cubic-bezier(0.45, 0, 0.55, 1);

  cursor: pointer;
}

.button:hover,
.button:focus {
  background: var(--button-interact-bg, var(--color-surface-bg-interact));
  color: var(--button-interact-text, var(--color-surface-text-interact));
}

/* Disabled state takes absolute priority, so !important is utilised */

.button[disabled] {
  background: var(--button-disabled-bg, var(--color-mid)) !important;
  color: var(--button-disabled-color, var(--color-dark-glare)) !important;
  cursor: not-allowed;
}

/* Variants */

.button[data-button-variant='primary'] {
  background: var(--button-primary-button-bg, var(--color-primary));
  color: var(--button-primary-button-text, var(--color-dark));
  border-color: var(--button-primary-border-color, var(--color-primary));
}

.button[data-button-variant='primary']:hover,
.button[data-button-variant='primary']:focus {
  background: var(--button-primary-interact-bg, var(--color-primary-glare));
  color: var(--button-primary-interact-text, var(--color-surface-text-interact));
}

.button[data-button-variant='secondary'] {
  background: var(--button-secondary-button-bg, var(--color-secondary));
  color: var(--button-secondary-button-text, var(--color-dark));
  border-color: var(--button-secondary-border-color, var(--color-secondary));
}

.button[data-button-variant='secondary']:hover,
.button[data-button-variant='secondary']:focus {
  background: var(--button-secondary-interact-bg, var(--color-secondary-glare));
  color: var(--button-secondary-interact-text, var(--color-surface-text-interact));
}

.button[data-button-variant='tertiary'] {
  background: var(--button-tertiary-button-bg, var(--color-tertiary));
  color: var(--button-tertiary-button-text, var(--color-dark));
  border-color: var(--button-tertiary-border-color, var(--color-tertiary));
}

.button[data-button-variant='tertiary']:hover,
.button[data-button-variant='tertiary']:focus {
  background: var(--button-tertiary-interact-bg, var(--color-tertiary-glare));
  color: var(--button-tertiary-interact-text, var(--color-surface-text-interact));
}

.button[data-button-variant='light'] {
  background: var(--button-light-button-bg, var(--color-light));
  color: var(--button-light-button-text, var(--color-dark));
  border-color: var(--button-light-border-color, var(--color-light));
}

.button[data-button-variant='light']:hover,
.button[data-button-variant='light']:focus {
  background: var(--button-light-interact-bg, var(--color-light-glare));
  color: var(--button-light-interact-text, var(--color-surface-text-interact));
}

.button[data-button-variant='dark'] {
  background: var(--button-dark-button-bg, var(--color-dark));
  color: var(--button-dark-button-text, var(--color-light));
  border-color: var(--button-dark-border-color, var(--color-dark));
}

.button[data-button-variant='dark']:hover,
.button[data-button-variant='dark']:focus {
  background: var(--button-dark-interact-bg, var(--color-dark-glare));
  color: var(--button-dark-interact-text, var(--color-light));
}

.button[data-button-variant='docked'] {
  border-radius: var(--button-docked-radius, var(--radius));
  background: var(--button-docked-bg, var(--color-primary));
  color: var(--button-docked-color, var(--color-dark));
  padding-inline: var(--button-docked-padding-inline, var(--space-l));
  /* Force removal of border top, whether it's there or not */
  border-top: 0;
  /* Force removal of border radius, whether it's there or not */
  border-top-right-radius: 0;
  border-top-left-radius: 0;
}

.button[data-button-variant='docked']:hover,
.button[data-button-variant='docked']:focus {
  background: var(--button-docked-interact-bg, var(--color-primary-glare));
  color: var(--button-docked-interact-text, var(--color-surface-text-interact));
}

.button[data-button-variant='solid'] {
  background: var(--button-solid-button-bg, var(--color-primary));
  color: var(--button-solid-button-text, var(--color-dark));
  border-radius: var(--button-solid-radius, var(--radius));
  border-color: var(--button-solid-border-color, transparent);
  padding: var(--button-solid-padding, var(--button-padding));
}

.button[data-button-variant='solid']:hover,
.button[data-button-variant='solid']:focus {
  background: var(--button-solid-interact-bg, var(--color-primary-glare));
  color: var(--button-solid-interact-text, var(--color-surface-text-interact));
}

.button[data-button-variant='small'] {
  background: var(--button-small-button-bg, var(--color-primary));
  color: var(--button-small-button-text, var(--color-dark));
  --button-font-size: var(--button-small-font-size, var(--size-step--3));
  --button-padding: var(--button-small-padding, var(--space-2xs) var(--space-2xs));
  --button-font-weight: var(--button-small-font-weight, var(--font-weight-bold));
  border-radius: var(--button-small-radius, var(--radius));
  border: none;
}

.button[data-button-variant='small']:hover,
.button[data-button-variant='small']:focus {
  background: var(--button-small-interact-bg, var(--color-primary-glare));
  color: var(--button-small-interact-text, var(--color-surface-text-interact));
}

/* Ghost buttons */

.button[data-ghost='true'] {
  background: transparent;
  color: var(--button-ghost-color, var(--color-light-glare));
  border-width: var(--button-ghost-border-width, var(--stroke-weight));
}

.button[data-ghost='true'][data-button-variant='primary'] {
  border-color: var(--button-primary-ghost-border-color, var(--color-primary));
}

.button[data-ghost='true'][data-button-variant='secondary'] {
  border-color: var(--button-secondary-ghost-border-color, var(--color-secondary));
}

.button[data-ghost='true'][data-button-variant='tertiary'] {
  border-color: var(--button-tertiary-ghost-border-color, var(--color-tertiary));
}

.button[data-ghost='true'][data-button-variant='light'] {
  border-color: var(--button-light-ghost-border-color, var(--color-light));
}

.button[data-ghost='true'][data-button-variant='dark'] {
  border-color: var(--button-dark-ghost-border-color, var(--color-dark));
  color: var(--button-dark-ghost-color, var(--color-dark));
}

.button[data-ghost='true'][data-button-variant='dark']:hover {
  color: var(--button-dark-ghost-hover-color, var(--color-light));
}

/* Theme */

.button[data-button-theme='light'] {
  border-color: var(--button-theme-light-border-color, var(--color-light));
}

.button[data-button-theme='dark'] {
  border-color: var(--button-theme-dark-border-color, var(--color-dark));
}

.card {
  --flow-space: var(--card-flow-space, var(--space-s));

  padding: var(--card-padding, var(--space-s));
  color: var(--card-color, currentColor);
}

.card__header {
  --flow-space: var(--card-header-flow-space, var(--space-2xs));
}

.card__heading {
  --flow-space: var(--card-heading-flow-space, var(--space-s));

  font-size: var(--card-heading-font-size, var(--size-step-4));
  font-family: var(--card-heading-font-family, var(--font-family-base));
}

.card__subheading {
  font-size: var(--card-subheading-font-size, var(--size-step-0));
  font-family: var(--card-subheading-font-family, var(--font-family-base));
  font-weight: var(--card-subheading-font-weight, var(--font-weight-bold));
}

.card .tag {
  font-size: var(--card-tag-font-size, var(--size-step--2));
}

.card p {
  max-width: 60ch;
  text-wrap: pretty;
}

.contact-form {
  --flow-space: var(--contact-form-flow-space, var(--space-xl));

  text-align: var(--contact-form-text-align, center);
  background: var(--contact-form-bg, inherit);
  color: var(--contact-form-color, inherit);
}

.contact-form__header {
  --flow-space: var(--contact-form-header-flow-space, var(--space-3xl));

  padding-block-start: var(--contact-form-header-padding--block-start, var(--contact-form-header-padding, 0));
  padding-block-end: var(--contact-form-header-padding-block-end, var(--contact-form-header-padding, 0));
  border-top-width: var(--contact-form-header-border-top-width, 0);
  border-bottom-width: var(--contact-form-header-border-bottom-width, 0);
  border-color: var(--contact-form-header-border-color, currentColor);
  border-style: var(--contact-form-header-border-style, solid);
  border-right-width: 0;
  border-left-width: 0;
}

.contact-form__header .prose {
  --flow-space: var(--space-s);

  text-wrap: balance;
}

.contact-form__header .prose > p:first-child {
  font-size: var(--text-size-lede);
}

.contact-form label {
  font-size: var(--contact-form-label-font-size,  var(--size-step--3));
}

.countdown {
  --flow-space: var(--space-xl);

  color: var(--countdown-text-color, currentColor);
  text-align: var(--countdown-text-align, center);
}

.countdown h2 {
  font-size: var(--size-step-7);
}

.countdown__sections {
  --flow-space: var(--space-xl);

  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-m-l) var(--gutter);
}

.countdown__section {
  --flow-space: var(--countdown-flow-space, var(--space-2xs));

  container-type: inline-size;
  text-align: var(--countdown-section-text-align, center);
}

/* First item, AKA "days" flexes out across the whole grid */

.countdown__section:first-child {
  grid-column: 1/4;
}

.countdown__number {
  display: block;
  position: relative;

  /* This needs too much control to be configurable */
  padding: max(8cqw, var(--space-m)) 0.2em;
  font-variant-numeric: tabular-nums;
  background: var(--countdown-section-bg, var(--color-light));
  color: var(--coundown-section-color, var(--color-dark));
  border-radius: var(--countdown-section-radius, var(--radius));
  font-size: max(40px, 25cqw);
  font-weight: var(--font-weight-bold);
  line-height: 1;

  &::after {
    content: '';
    display: block;
    height: 1px;
    width: 100%;
    background: currentColor;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
  }
}

@media (min-width: 40em) {
  .countdown__sections {
    grid-template-columns: repeat(4, 1fr);
  }

  .countdown__section:first-child {
    grid-column: unset;
  }

  /* In the complete state, there is 1 item, so undo the grid */
  .countdown__sections:has(.countdown__section:only-child) {
    display: block;
  }

  .countdown__section:only-child {
    margin-inline: auto;
    max-width: var(--countdown-complete-item-max-width, 30rem);
  }
}

.credits {
  padding: var(--credits-padding-block, var(--space-m)) var(--credits-padding-inline, var(--gutter));
  border-top-width: var(--credits-border-top-width, var(--stroke-weight-heavy));
  border-bottom-width: var(--credits-border-bottom-width, var(--stroke-weight-heavy));
  border-color: var(--credits-border-color, currentColor);
  border-style: var(--credits-border-style, solid);
  border-right-width: 0;
  border-left-width: 0;
}

.credits__item {
  display: flex;
  flex-direction: column;
  gap: var(--credits-item-gap, var(--space-3xs));
}

.credits dl {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  row-gap: var(--credits-dl-row-gap, var(--space-2xs));
  column-gap: var(--credits-dl-column-gap, var(--space-xs));
}

.credits dt {
  font-family: var(--credits-dt-font-family, var(--font-family-condensed));
  font-weight: var(--credits-dt-font-weight, var(--font-weight-condensed));
  text-transform: var(--credits-dt-text-transform, uppercase);
  font-size: var(--credits-dt-font-size-base, var(--size-step--3));
  color: var(--credits-dt-color, var(--color-light));
  line-height: var(--leading-fine);
  text-align: center;
}

.credits dd {
  font-family: var(--credits-dd-font-family, var(--font-family-accent));
  font-size: var(--credits-dd-font-size-base, var(--size-step-6));
  text-transform: var(--credits-dd-text-transform, uppercase);
  line-height: 1;
  text-align: center;
  margin: 0;
}

.credits a:not(:hover) {
  text-decoration: none;
}

.credits dl em {
  font-style: normal;
}

@media (min-width: 30em) {
  .credits dt {
    padding-top: var(--credits-dt-offset, 0.5ex);
  }

  .credits dd {
    font-size: var(--credits-dd-font-size-sm, var(--size-step-4));
  }

  .credits dl {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

@media (min-width: 40em) {
  .credits__item {
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
  }

  .credits dl em {
    display: block;
  }

  .credits :is(dt, dd) {
    text-align: right;
  }
}

@media (min-width: 66em) {
  .credits dt {
    font-size: var(--credits-dt-font-size-lg, var(--size-step--2));
  }

  .credits dd {
    font-size: var(--credits-dd-font-size-lg, var(--size-step-4));
  }
}

.cta {
  text-align: var(--cta-text-align, center);
}

.cta .flow {
  --flow-space: var(--space-2xs);
}

.cta__title {
  --flow-space: var(--space-xs);

  font-size: var(--size-step-7);
  text-wrap: balance;
  overflow-wrap: anywhere;
  margin-inline: auto;

  /* All of this matches the global styles for headings. Semantically, we can't have 
     stacked headings, so if there is a title prefix element, this will be a paragraph 
     element */
  line-height: var(--leading-heading, var(--leading-fine));
  font-family: var(--font-family-display, var(--font-family-display));
  font-weight: var(--font-weight-heading, 700);
  letter-spacing: var(--kerning-heading, var(--kerning-tight));
  text-transform: var(--text-transform-heading);
}

.cta .praise {
  padding-block-end: 0;
  text-align: inherit;
}

.cta__form {
  --cta-form-button-bg: var(--cta-cta-form-button-bg, var(--button-solid-button-bg));
  --flow-space: var(--space-l);
}

/* Variants */

.cta[data-variant='alt'] {
  background: var(--cta-alt-variant-bg, var(--color-primary));
  color: var(--cta-alt-variant-color, currentColor);
}

.cta[data-variant='alt'] :is(.cta-form input, .cta-form label) {
  color: var(--cta-alt-variant-cta-form-text-colour, currentColor);
}

.cta[data-variant='alt'] .cta-form input::placeholder {
  color: var(--cta-alt-variant-cta-form-placeholder-colour, var(--color-dark-glare));
}

.cta[data-variant='alt'] .star-rating {
  color: var(--cta-alt-variant-star-rating-colour, currentColor);
}

.cta[data-variant='alt'] .praise__foot {
  color: var(--cta-alt-variant-praise-foot-colour, currentColor);
}

.cta {
  text-align: var(--cta-text-align, center);
  background: var(--cta-bg, inherit);
  color: var(--cta-color, inherit);
}

.cta .flow {
  --flow-space: var(--space-2xs);
}

.cta__title {
  --flow-space: var(--space-xs);

  font-size: var(--size-step-7);
  text-wrap: balance;
  overflow-wrap: anywhere;
  margin-inline: auto;

  /* All of this matches the global styles for headings. Semantically, we can't have 
     stacked headings, so if there is a title prefix element, this will be a paragraph 
     element */
  line-height: var(--leading-heading, var(--leading-fine));
  font-family: var(--font-family-display, var(--font-family-display));
  font-weight: var(--font-weight-heading, 700);
  letter-spacing: var(--kerning-heading, var(--kerning-tight));
  text-transform: var(--text-transform-heading);
}

.cta .praise {
  padding-block-end: 0;
  text-align: inherit;
}

.cta__form {
  --cta-form-button-bg: var(--cta-cta-form-button-bg, var(--button-solid-button-bg));
  --flow-space: var(--space-l);
}

/* Variants */

.cta[data-variant='alt'] {
  background: var(--cta-alt-variant-bg, var(--color-primary));
  color: var(--cta-alt-variant-color, currentColor);
}

.cta[data-variant='alt'] :is(.cta-form input, .cta-form label) {
  color: var(--cta-alt-variant-cta-form-text-colour, currentColor);
}

.cta[data-variant='alt'] .cta-form input::placeholder {
  color: var(--cta-alt-variant-cta-form-placeholder-colour, var(--color-dark-glare));
}

.cta[data-variant='alt'] .star-rating {
  color: var(--cta-alt-variant-star-rating-colour, currentColor);
}

.cta[data-variant='alt'] .praise__foot {
  color: var(--cta-alt-variant-praise-foot-colour, currentColor);
}

.eyebrow {
  display: var(--eyebrow-display, inline-block);
  text-align: var(--eyebrow-text-align, center);
  width: max-content;
  max-width: 100%;
}

.eyebrow__heading {
  font-size: var(--eyebrow-font-size, var(--size-step-0));
  line-height: var(--eyebrow-leading, var(--leading-short, 1.2));
  font-family: var(--eyebrow-font-family, var(--font-family-base));
  font-weight: var(--eyebrow-font-weight, var(--font-weight-bold));
  /* Set .caps styles as default, but allow this to be adjusted in theme config */
  text-transform: var(--eyebrow-text-transform, uppercase);
  letter-spacing: var(--eyebrow-kerning, var(--caps-kerning));
  font-feature-settings: var(--eyebrow-cpsp, var(--caps-cpsp));
}

.eyebrow[data-eyebrow-font-type='display'] {
  --eyebrow-font-family: var(--font-family-display);
}

.eyebrow[data-eyebrow-font-type='display'] h2 {
  font-size: var(--eyebrow-display-heading-size, var(--size-step-7));
  font-weight: var(--font-weight-heading);
  line-height: var(--leading-heading);
  letter-spacing: var(--kerning-heading);
}

.eyebrow + .prose {
  text-wrap: balance;
  margin-inline: auto;
}

.eyebrow + .prose {
  --flow-space: var(--space-s);
}

.eyebrow__media {
  margin-inline: auto;
}

.eyebrow__media[data-limit] {
  width: auto;
  height: auto;
}

.eyebrow__media + .eyebrow__heading {
  --flow-space: var(--space-s);
}

.eyebrow + :is(h2, h3, h4) {
  --flow-space: var(--space-xs);
}

.eyebrow__media[data-limit='width'] {
  max-width: var(--limited-width, 100%);
}

.eyebrow__media[data-limit='height'] {
  max-height: var(--limited-height, 100%);
}

.faq-list {
  --flow-space: var(--faqs-list-flow-space, var(--space-s));

  text-align: var(--faq-list-text-align, left);
  border-bottom: var(--faq-list-border-width, var(--stroke-weight-heavy, 3px));
}

.faq-list li {
  padding-block-start: var(--faq-list-padding, var(--space-m));
  padding-block-end: var(--faq-list-padding, var(--space-m));
}

.faq-list h3 {
  font-size: var(--faq-list-heading-font-size, var(--size-step-3));
  margin-block-end: var(--space-xs);
  max-width: var(--faqs-list-heading-max-width, 45ch);
}

.faq-list p {
  max-width: var(--measure);
}

.faq-list :is(h3, p, ul, ol) {
  margin-inline: auto;
}

.feature-cta {
  --flow-space: var(--cta-flow-space, var(--space-m));

  padding-block: var(--cta-padding-block, var(--space-l));
  padding-inline: var(--cta-padding-inline, 0);
  background: var(--cta-background, none);
  border-block: var(--cta-border-block, 1px solid var(--stroke-color));
  border-inline: var(--cta-border-inline, none);
  color: var(--cta-color, var(--color-light));
  text-align: var(--cta-text-align, center);
}

.feature-cta .eyebrow__heading {
  font-size: var(--cta-eyebrow-font-size, var(--eyebrow-font-size));
  font-family: var(--cta-eyebrow-font-family, var(--eyebrow-font-family));
}

.feature-cta__heading {
  font-size: var(--cta-heading-font-size, var(--size-step-9));
  line-height: var(--cta-heading-line-height, var(--leading-heading));
  font-family: var(--cta-heading-font-family, var(--font-family-display));
}

.feature-cta .feature-list[data-feature-list-variant='bullet'] span::before,
.feature-cta .feature-list[data-feature-list-variant='bullet'] span::after {
  background-color: var(--cta-feature-list-icon-color, var(--color-primary));
}

.feature-cta > :is(p, .lede) + :is(p, .lede) {
  margin-block-start: var(--cta-paragraph-margin, var(--space-2xs));
}

.feature-cta > * + :is(.button) {
  margin-block-start: var(--cta-button-margin, var(--space-l));
}

/* Variants */

.feature-cta[data-cta-variant='highlighted'] {
  --cta-flow-space: var(--cta-highlighted-cta-flow-space, var(--space-m));

  --cta-padding-block: var(--cta-highlighted-cta-padding, var(--space-l));
  --cta-padding-inline: var(--cta-highlighted-cta-padding, var(--gutter));
  --cta-background: var(--cta-highlighted-cta-background, var(--color-primary-glare));
  --cta-border-block: var(--cta-highlighted-cta-border-block, 1px solid var(--stroke-color));
  --cta-border-inline: var(--cta-highlighted-cta-border-inline, none);
  --cta-color: var(--cta-highlighted-cta-color, var(--color-dark));
  --cta-text-align: var(--cta-highlighted-cta-text-align, center);

  --cta-eyebrow-font-size: var(--cta-highlighted-cta-eyebrow-font-size, var(--eyebrow-font-size));
  --cta-eyebrow-font-family: var(--cta-highlighted-cta-eyebrow-font-family, var(--eyebrow-font-family));

  --cta-heading-font-size: var(--cta-highlighted-cta-font-size, var(--size-step-9));
  --cta-heading-line-height: var(--cta-highlighted-cta-heading-line-height, var(--leading-heading));
  --cta-heading-font-family: var(--cta-highlighted-cta-heading-font-family, var(--font-family-display));

  --cta-feature-list-icon-color: var(--cta-highlighted-cta-feature-list-icon-color, var(--color-primary-shade));

  --cta-paragraph-margin: var(--cta-highlighted-cta-paragraph-margin, var(--space-2xs));

  --cta-button-margin: var(--cta-highlighted-cta-button-margin, var(--space-l));
}

.feature-cta[data-cta-variant='dark'] {
  --cta-flow-space: var(--cta-dark-cta-flow-space, var(--cta-flow-space));

  --cta-padding-block: var(--cta-dark-cta-padding, var(--space-l));
  --cta-padding-inline: var(--cta-dark-cta-padding, var(--gutter));
  --cta-background: var(--cta-dark-cta-background, var(--color-primary-glare));
  --cta-border-block: var(--cta-dark-cta-border-block, 1px solid var(--stroke-color));
  --cta-border-inline: var(--cta-dark-cta-border-inline, none);
  --cta-color: var(--cta-dark-cta-color, var(--color-light));
  --cta-text-align: var(--cta-dark-cta-text-align, center);

  --cta-eyebrow-font-size: var(--cta-dark-cta-eyebrow-font-size, var(--eyebrow-font-size));
  --cta-eyebrow-font-family: var(--cta-dark-cta-eyebrow-font-family, var(--eyebrow-font-family));

  --cta-heading-font-size: var(--cta-dark-cta-font-size, var(--size-step-9));
  --cta-heading-line-height: var(--cta-dark-cta-heading-line-height, var(--leading-heading));
  --cta-heading-font-family: var(--cta-dark-cta-heading-font-family, var(--font-family-display));

  --cta-feature-list-icon-color: var(--cta-dark-cta-feature-list-icon-color, var(--cta-feature-list-icon-color));

  --cta-paragraph-margin: var(--cta-dark-cta-paragraph-margin, var(--space-2xs));

  --cta-button-margin: var(--cta-dark-cta-button-margin, var(--space-l));
}

.feature-list {
  text-align: center;
}

.feature-list li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--feature-list-gutter, var(--space-2xs));
  padding: var(--feature-list-item-padding, var(--gutter));
  border-bottom: var(--feature-list-item-border, 1px solid var(--stroke-color));
}

.feature-list li:first-child {
  border-top: var(--feature-list-item-border, 1px solid var(--stroke-color));
}

.feature-list span {
  position: relative;
  padding-inline-start: calc(var(--feature-list-icon-height, 1ex) + var(--space-2xs));
  padding-inline-end: calc(var(--feature-list-icon-height, 1ex) + var(--space-2xs));
  text-wrap: balance;
}

.feature-list span::before,
.feature-list span::after {
  content: '';
  display: inline-block;
  aspect-ratio: 1;
  height: var(--feature-list-icon-height, 1ex);
  background-color: var(--feature-list-icon-color, var(--color-primary));
  border-radius: 100%;
  flex-shrink: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.feature-list span::before {
  left: 0;
}

.feature-list span::after {
  right: 0;
}

/* Variants */

.feature-list[data-feature-list-variant='bullet'] {
  --feature-list-icon-height: 2ex;
}

.feature-list[data-feature-list-variant='left-align'] {
  text-align: left;
}

.feature-list[data-feature-list-variant='left-align'] li {
  justify-content: start;
}

.feature-list[data-feature-list-variant='left-align'] span::after {
  display: none;
}

@supports (mask-image: url('')) {
  .feature-list[data-feature-list-variant='bullet'] span::before,
  .feature-list[data-feature-list-variant='bullet'] span::after {
    border-radius: 0;
    mask: url('/theme.svg#bullet') no-repeat center;
    mask-size: contain;
  }
}

.form {
  --flow-space: var(--space-s);
  margin-block-start: var(--space-xl);
  margin-inline: auto;
  max-width: var(--form-max-width, 60rem);
}

.form textarea {
  min-height: var(--contact-form-min-height, 12em);
}

.form label + input,
.form label + textarea {
  margin-block-start: var(--space-2xs, 1em);
}

.form__button {
  margin-block-start: var(--space-m);
}

/* .gallery {
  --reel-item-width: clamp(10rem, 20vi, 24rem);
} */

.gallery.reel {
  --reel-calculated-space: var(--reel-space, var(--gutter, 2rem));
}

.gallery figcaption {
  font-size: var(--gallery-figcaption-font-size, var(--size-step--3));
  text-align: var(--gallery-figcaption-text-align, left);
  text-transform: var(--gallery-figcaption-text-transform, none);
  letter-spacing: var(--gallery-figcaption-letter-spacing, 0);
  margin-block-start: var(--gallery-figcaption-space, var(--space-3xs));
  text-wrap: balance;
}

.gallery .image, .gallery .video-player {
  width: var(--gallery-image-width, clamp(16rem, 80vw, 22rem));
}

.group-booking-form {
  --flow-space: var(--group-booking-form-flow-space, var(--space-xl));

  text-align: var(--group-booking-form-text-align, center);
  background: var(--group-booking-form-bg, inherit);
  color: var(--group-booking-form-color, inherit);
}

.group-booking-form__header {
  --flow-space: var(--group-booking-form-header-flow-space, var(--space-3xl));

  padding-block-start: var(--group-booking-form-header-padding--block-start, var(--group-booking-form-header-padding, 0));
  padding-block-end: var(--group-booking-form-header-padding-block-end, var(--group-booking-form-header-padding, 0));
  border-top-width: var(--group-booking-form-header-border-top-width, 0);
  border-bottom-width: var(--group-booking-form-header-border-bottom-width, 0);
  border-color: var(--group-booking-form-header-border-color, currentColor);
  border-style: var(--group-booking-form-header-border-style, solid);
  border-right-width: 0;
  border-left-width: 0;
}

.group-booking-form__header .prose {
  --flow-space: var(--space-s);

  text-wrap: balance;
}

.group-booking-form__header h2 {
  /* This should match eyebrow heading font size */
  font-size: var(--eyebrow-display-heading-size, var(--size-step-7));
}

.group-booking-form__header h2 {
  /* This should match eyebrow heading font size */
  font-size: var(--eyebrow-display-heading-size, var(--size-step-7));
}

.group-booking-form__header .prose > p:first-child {
  font-size: var(--text-size-lede);
}

.icon-heading {
  display: var(--icon-heading-display, flex);
  align-items: var(--icon-heading-align-items, center);
  justify-content: var(--icon-heading-justify-content, flex-start);
  gap: var(--icon-heading-gutter, var(--space-xs));
}

.icon-heading svg {
  height: var(--icon-heading-icon-size, 1.75ex);
  width: auto;
}

.image[data-image-with-mask] img {
  mask-image: var(--image-mask);
  mask-size: cover;
  mask-repeat: no-repeat;
  width: 100%;
  height: auto;
}

.image[data-image-blowout] {
  overflow: hidden;
  container-type: inline-size;

  img {
    width: min(var(--image-blowout), var(--image-blowout-max-width));
    max-width: unset;
    margin-inline-start: 50%;
    transform: translateX(-50%);

    /* This helps remove subpixel rendering issues */
    perspective: 1px;
  }
}

.loader svg {
  height: var(--loader-size, 3lh);
  width: auto;
  display: block;
  margin-inline: auto;
}

.modal {
    background: var(--modal-bg, inherit);
    color: var(--modal-color, inherit);
    margin-block: 0;
    max-width: 100vw;
    padding: 0;
    width: 100vw;
}

.modal__header {
    align-items: center;
    display: flex;
    justify-content: space-between;
    padding-block: var(--modal-header-padding-block, var(--space-xs));
    padding-inline: var(--modal-header-padding-inline, var(--space-xs));
}

.modal__heading {
    font-family: var(--modal-heading-font-family, var(--font-family-display));
    font-weight: var(--modal-heading-font-weight, var(--font-weight-heading, 700));
    font-size: var(--modal-heading-size, var(--size-step-2));
    letter-spacing: var(--modal-heading-kerning, var(--kerning-heading, 0));
    color: var(--modal-heading-color, currentColor);
}

.modal__close {
    padding: 0;
    appearance: none;
    background: var(--modal-close-bg, inherit);
    color: var(--modal-close-color, inherit);
    border: none;
}

.modal__body {
    padding-block: var(--modal-body-padding-block, var(--space-xs));
    padding-inline: var(--modal-body-padding-inline, var(--space-xs));
}

@media (min-width: 40em) {
    .modal {
        margin-block: revert;
        width: clamp(10rem, 80vw, 100rem);
    }
}

.notice {
  padding-block: var(--notice-padding-block, var(--gutter));
  padding-inline: var(--space-m);
  background: var(--notice-default-bg, var(--color-mid));
  color: var(--notice-color, var(--color-dark));
  border-radius: var(--notice-border-radius, var(--color-dark));
  text-align: left;
}

.notice[data-type='error'] {
  background: var(--notice-error-bg, var(--color-error));
  color: var(--notice-error-color, var(--color-dark));
}

.notice[data-type='warning'] {
  background: var(--notice-warning-bg, var(--color-warning));
  color: var(--notice-warning-color, var(--color-dark));
}

.notice[data-type='success'] {
  background: var(--notice-success-bg, var(--color-success));
  color: var(--notice-success-color, var(--color-dark));
}

.off-screen-menu {
  text-align: var(--offscreen-menu-text-align, center);
  background: var(--offscreen-menu-bg, inherit);
  color: var(--offscreen-menu-color, inherit);
}

/* Force removal of border radius, whether it's there or not */

.off-screen-menu summary {
  font-size: var(--off-screen-menu-icon-size, var(--size-step-2));
  padding: var(--off-screen-menu-button-padding, var(--space-s));
  background: var(--off-screen-menu-button-bg, transparent);
  color: var(--off-screen-menu-button-color, currentColor);
  list-style: none;
  cursor: pointer;
}

.off-screen-menu summary::-webkit-details-marker {
  display: none;
}

.off-screen-menu__panel {
  /* There's more vertical padding so the menu doesn't class with the button */
  padding: var(--off-screen-menu-panel-space, var(--space-4xl) var(--space-xl));
  position: absolute;
  width: 100vi;
  height: calc(100vb + 1em);
  inset: 0;
  z-index: -1;
  background: var(--off-screen-menu-bg, var(--color-dark));
  color: var(--off-screen-menu-color, var(--color-light));
  overflow-y: auto;
  display: flex;
  justify-content: var(--off-screen-menu-justify-content, center);
  flex: 1;
  overflow: auto;
}

.off-screen-menu__panel__content {
  display: flex;
  align-items: var(--off-screen-menu-align-items, center);
  min-height: min-content;
}

.off-screen-menu__nav {
  --flow-space: var(--off-screen-menu-nav-item-space, var(--space-s));
  font-size: var(--off-screen-menu-nav-font-size, var(--size-step-3));
  font-family: var(--off-screen-menu-nav-font, inherit);
  font-weight: var(--off-screen-menu-nav-font-weight, inherit);
  text-transform: var(--off-screen-menu-nav-text-transform, none);
  letter-spacing: var(--off-screen-menu-nav-kerning, none);
  font-feature-settings: var(--off-screen-menu-nav-cpsp, off);
  line-height: 1; /* None configurable. We need this to be absolute for some control — especially if they choose wild fonts */
}

/* List role is in place for specificity purposes */

.off-screen-menu__subnav[role='list'] {
  --flow-space: var(--off-screen-menu-subnav-item-space, var(--space-s));
  margin-inline-start: var(--off-screen-menu-subnav-indent, 1ch); /* To align nicely with the top level nav item */
  margin-block-start: var(--off-screen-menu-subnav-space, var(--flow-space));
}

/* Font stuff applied to list items so the menu parent can align with the top level typography */

.off-screen-menu__subnav li {
  font-size: var(--off-screen-menu-subnav-font-size, var(--size-step-2));
  font-family: var(--off-screen-menu-subnav-font, var(--font-family-base));
  font-style: var(--off-screen-menu-subnav-font-style, normal);
  font-weight: var(--off-screen-menu-subnav-font-weight, inherit);
  text-transform: var(--off-screen-menu-subnav-text-transform, uppercase);
  opacity: var(--off-screen-menu-subnav-opacity, inherit);
}

.off-screen-menu a {
  text-decoration-thickness: var(--offscreen-nav-underline-size, 1px);
  text-underline-offset: var(--offscreen-nav-underline-offset, 0.2ex);
}

.off-screen-menu a:not(:hover) {
  text-decoration: none;
}

.off-screen-menu__logo {
  width: clamp(120px, 20vi, 180px);
  height: auto;
}

.pano-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    overflow: hidden;
}

#pano {
    position: absolute;
    inset: 0;
}

.pano-controls {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 12px;
    display: flex;
    gap: 12px;
    justify-content: center;
    align-items: center;
    pointer-events: none;
}

.pano-btn {
    pointer-events: auto;
    border: none;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    padding: 8px 12px;
    border-radius: 999px;
    font: 600 14px/1 system-ui, -apple-system, Segoe UI, Roboto, Helvetica,
    Arial, sans-serif;
    backdrop-filter: blur(4px);
}

.pano-btn:hover {
    background: rgba(0, 0, 0, 0.7);
}

.pano-label {
    pointer-events: auto;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    padding: 8px 14px;
    border-radius: 10px;
    font: 700 14px/1 system-ui, -apple-system, Segoe UI, Roboto, Helvetica,
    Arial, sans-serif;
    letter-spacing: 0.08em;
}

.floating-message {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 10px 16px;
    border-radius: 8px;
    font: 500 14px/1.2 system-ui, -apple-system, Segoe UI, Roboto,
    Helvetica, Arial, sans-serif;
    transition: opacity 0.3s ease;
    z-index: 5;
    pointer-events: none;
}

.performance time {
  color: var(--performance-time-color, var(--color-primary));
  font-size: var(--performance-time-font-size, var(--size-step-1));
  font-family: var(--performance-time-font-family, var(--font-family-base));
}

.performance.cluster {
  --cluster-horizontal-alignment: space-between;
  gap: var(--space-3xs);
  column-gap: var(--space-s);
}

.performance__action.cluster {
  --cluster-horizontal-alignment: space-between;

  gap: var(--performance-gutter, var(--space-xs));
}

.performance .tag {
  font-size: var(--performance-tag-font-size, var(--size-step--2));
}

.performance :is(span, time) {
  font-size: var(--size-step--2);
}

/* Variants */

.performance[data-variant='unavailable'] time {
  text-decoration: var(--performance-time-unavailable-text-decoration, line-through);
}

.play-pause {
  display: grid;
  position: relative;
  place-items: center;
  color: var(--play-pause-color, currentColor);
  width: var(--play-pause-size, 7rem);
  height: var(--play-pause-size, 7rem);
  font-size: var(--play-pause-icon-size, var(--size-step-2));
  z-index: 1;
  border: 0;
  background: none;
  cursor: pointer;

  @supports (mask-size: cover) {
    &::after {
      content: '';
      display: block;
      position: absolute;
      background: var(--play-pause-background, rgb(255 255 255 / 50%));
      inset: 0;
      z-index: -1;
      mask-image: var(--play-pause-mask);
      mask-size: cover;
      mask-repeat: no-repeat;
    }
  }
}

.praise {
  --star-rating-size: var(--praise-star-rating-size, 1lh);
  --star-rating-justification: var(--praise-star-rating-justification, center);

  font-family: var(--praise-font-family, var(--font-family-base));
  font-weight: var(--praise-font-weight, var(--font-weight-base));
  font-style: var(--praise-font-style, var(--font-style-base));
  font-size: var(--praise-font-size-sm, var(--size-step--1));
  text-align: var(--praise-text-align, center);
  background: var(--praise-background, transparent);
  color: var(--praise-color, currentColor);
  padding-inline: var(--praise-padding-inline, var(--space-s));
  padding-block: var(--praise-padding-inline, var(--space-s));
  border-radius: var(--praise-radius, 0);
}

@media (min-width: 66em) {
  .praise {
    font-size: var(--praise-font-size-lg, var(--size-step-0));
  }
}

.praise:not(blockquote) {
  --praise-text-align: center;

  padding: 0;
}

.praise > * {
  margin-inline: auto;
}

:is(.praise__title, .praise__content) {
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.praise__content {
  --blockquote-space: var(--praise-content-space, var(--space-s));

  /* No fallbacks needed as styles are inherited from the parent .praise element by default  */
  color: var(--praise-content-color, currentColor);
}

.praise__title {
  --blockquote-space: var(--praise-title-space, var(--space-s));

  font-family: var(--praise-title-font-family, var(--font-family-display));
  font-weight: var(--praise-title-font-weight, var(--font-weight-display));
  font-style: var(--praise-title-font-style, var(--font-style-display));
  font-size: var(--praise-title-font-size, var(--size-step-4));
  line-height: var(--praise-title-line-height, var(--leading-heading));
  text-transform: var(--praise-title-text-transform, initial);
  letter-spacing: var(--praise-title-kerning, 0);
  font-feature-settings: 'cpsp' var(--praise-title-cpsp, off);
  color: var(--praise-title-color, currentColor);
}

.praise__title + .praise__content {
  /* Set this gap to less than the gap between other siblings so as to visually group .praise__heading and .praise__content */
  --blockquote-space: var(--praise-title-plus-heading-space, var(--space-3xs));
}

.praise__foot {
  --blockquote-space: var(--praise-author-space, var(--space-s));

  /* No fallbacks needed as styles are inherited from the parent .praise element by default  */
  font-family: var(--praise-foot-font-family);
  font-style: var(--praise-foot-font-style, normal);
  font-size: var(--praise-foot-font-size);
  font-weight: var(--praise-foot-font-weight);
  color: var(--praise-foot-color);
}

.praise__foot a {
  color: currentColor;
  text-decoration: none;
}

.praise q {
  hanging-punctuation: first last;
}

.praise q::before {
  content: var(--praise-opening-quotes, '\2018');
}

.praise q::after {
  content: var(--praise-closing-quotes, '\2019');
}

.praise .star-rating {
  color: var(--praise-star-rating-color, var(--star-rating-color, currentColor));
}

/* Variants */

.praise[data-variant='small'] {
  --blockquote-space: var(--praise-small-variant-blockquote-space, var(--space-2xs));
}

.praise[data-variant='small'] .praise__content {
  --blockquote-space: var(--praise-small-variant-content-space, var(--space-2xs));
}

.praise[data-variant='small'] .praise__foot {
  --blockquote-space: var(--praise-small-variant-author-space, var(--space-2xs));
  --praise-foot-font-size: var(--size-step--3);
}

.praise[data-variant='small'] .praise__title {
  --praise-title-font-size: var(--size-step-3);
  letter-spacing: var(--praise-title-small-letter-spacing, 0);
}

.praise[data-variant='small'] .star-rating {
  --star-rating-size: var(--praise-small-variant-star-rating-size, 0.5lh);
}

.praise[data-variant='extra-small'] {
  --blockquote-space: var(--praise-extra-small-variant-blockquote-space, var(--space-2xs));
  --praise-font-size-sm: var(--size-step--2);
}

.praise[data-variant='extra-small'] .praise__content {
  --blockquote-space: var(--praise-extra-small-variant-content-space, var(--space-2xs));
}

.praise[data-variant='extra-small'] .praise__foot {
  --blockquote-space: var(--praise-extra-small-variant-author-space, var(--space-2xs));
  --praise-foot-font-size: var(--size-step--3);
}

.praise[data-variant='extra-small'] .praise__title {
  --praise-title-font-size: var(--size-step-2);
  letter-spacing: var(--praise-title-small-letter-spacing, 0);
}

@media (min-width: 66em) {
  .praise[data-variant='extra-small'] {
    --praise-font-size-lg: var(--size-step--1);
  }
}

.praise[data-variant='extra-small'] .star-rating {
  --star-rating-size: var(--praise-extra-small-variant-star-rating-size, 0.5lh);
}

/* Exceptions */

.region .flow > .praise {
  padding: 0;
  --flow-space: var(--space-l);
}

.prose {
  --flow-space: var(--prose-flow-space, var(--space-m));

  line-height: var(--prose-leading, var(--leading-loose));
  text-align: var(--prose-text-align, center);
}

.region .prose {
  --region-space: 0;
}

/* Increase legibility by limiting line lengths */

.prose :is(p, li, dl, figcaption) {
  max-width: var(--prose-flow-content-measure, var(--measure));
  margin-inline: auto;
}

.prose blockquote {
  max-width: var(--prose-blockquote-measure, var(--prose-flow-content-measure, var(--measure)));
}

/* Allow inline margin configuration of elements that'll be limited in width */

.prose :is(h1, h2, h3, h4, h5, h6, blockquote, img, picture) {
  margin-inline: var(--prose-limited-width-item-margin, auto);
}

.prose :is(h1, h2, h3, h4, h5, h6):not([class]) {
  text-align: var(--prose-heading-text-align, inherit);
}

/* Add more space to headings on block start */

.prose * + :is(h1, h2, h3, h4, h5, h6):not([class]) {
  --flow-space: var(--prose-before-heading-space, var(--space-xl));
}

/* Heading flow for elements that follow them */

.prose :is(h1, h2, h3, h4, h5, h6) + :not([class]) {
  --flow-space: var(--prose-after-heading-space, var(--space-m));
  text-wrap: pretty;
}

/* Add more space for figures and media etc */

.prose :is(figure, img:not([class]), .video-player, hr),
.prose :is(figure, img:not([class]), .video-player, hr) + * {
  --flow-space: var(--prose-image-space, var(--space-xl));
}

/* Add a subtle stroke to media in case the background blends with the prose container */

.prose :is(img:not([class]), picture, video, svg[width][height]) {
  border: var(--prose-media-stroke, var(--stroke));
}

/* Reset global SVG rules for prose SVGs because they're likely a diagram etc */

.prose svg[width][height] {
  width: unset;
  height: unset;
  max-width: 100%;
  padding: var(--space-xs);
}

.prose :is(table) {
  text-align: left;
}

.prose li {
  list-style-position: inside;
}

@supports selector(::marker) {
  .prose li::marker {
    white-space: pre-wrap;
    color: var(--prose-list-marker-color, var(--color-primary));
  }

  .prose ol {
    counter-reset: ol;
  }

  .prose li {
    counter-increment: ol;
  }

  .prose ol li::marker {
    font-size: var(--prose-ordered-list-marker-font-size, var(--size-step-0));
    font-weight: var(--prose-ordered-list-marker-font-weight, var(--font-weight-bold));
    content: counter(ol, decimal-leading-zero) '. \A';
    font-size: var(--prose-ordered-list-marker-font-size, var(--size-step-1));
    font-family: var(--prose-ordered-list-marker-font-family, var(--font-family-base));
  }

  .prose ul li::marker {
    /* The \A in the list item marker is required in order to drop the marker onto a new line */
    content: var(--prose-unordered-list-marker, '♦\A');
    font-size: var(--prose-unordered-list-marker-font-size, 1.5ex);
  }
}

/* Add lots of space for horizontal rules */

hr {
  --flow-space: var(--prose-hr-flow-space, var(--space-xl-2xl));
}

.shout-box {
  padding-block: var(--shout-box-padding-block, var(--space-2xs));
  padding-inline: var(--shout-box-padding-inline, var(--gutter));
  background: var(--shout-box-background, var(--color-primary));
  color: var(--shout-box-color, var(--color-dark));
  line-height: var(--shout-box-line-height, var(--leading-fine));
}

.shout-box .praise {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--shout-box-praise-gap, var(--space-2xs));
  font-size: var(--shout-box-praise-font-size-base, var(--size-step--3));
  font-weight: var(--shout-box-praise-font-weight, var(--font-weight-base));
  text-transform: var(--shout-box-text-transform, none);
  letter-spacing: var(--shout-box-text-letter-spacing, none);
  font-feature-settings: 'cpsp' var(--shout-box-text-cpsp, off);
}

.shout-box:not(:has(.star-rating)) .praise {
  font-size: var(--shout-box-praise-text-only-font-size-base, var(--size-step-0));
  font-weight: var(--shout-box-praise-text-only-font-weight, var(--font-weight-bold));
}

.shout-box .praise > * {
  margin: 0;
}

.shout-box .star-rating .icon {
  height: var(--shout-box-star-rating-icon-size, 1lh);
}

.shout-box .praise .star-rating {
  color: currentColor;
  transform: var(--shout-box-rating-optical-adjustment, translateY(-0.05lh));
}

.shout-box p {
  margin: 0;
}

@media (min-width: 40em) {
  .shout-box .praise {
    font-size: var(--shout-box-praise-font-size-lg, var(--size-step-0));
  }

  .shout-box:not(:has(.star-rating)) .praise {
    font-size: var(--shout-box-praise-text-only-font-size-lg, var(--size-step-1));
  }
}

/* Blocks */

.sign-up-form {
  --sidebar-target-width: max-content;
  --sidebar-content-min-width: 300px;
  --focus-ring-offset: var(--sign-up-form-focus-ring-offset, -0.6ex);
  --sign-up-form-calculated-space: var(--sign-up-form-space, 0.25em);
  --sign-up-form-calculated-radius: var(--sign-up-form-radius, var(--radius));
  --sign-up-form-calculated-font-size: var(--sign-up-form-font-size, var(--size-step-0));
  --gutter: var(--sign-up-form-calculated-space);

  max-width: var(--form-max-width, 60rem);
  margin-inline: auto;
  text-align: left;
}

.sign-up-form > * {
  --flow-space: var(--space-2xs);
}

.sign-up-form__controls {
  background: var(--sign-up-form-controls-bg, var(--color-light));
  border: var(--sign-up-form-controls-border-width, 1px) solid var(--sign-up-form-controls-border-colour, currentColor);
  padding: var(--sign-up-form-calculated-space);

  /* https://set.studio/relative-rounded-corners/ */
  border-radius: calc(var(--sign-up-form-calculated-space) + var(--button-solid-radius, var(--radius)));
}

.sign-up-form label {
  display: block;
  font-family: var(--sign-up-form-label-font-family, var(--font-family-base));
  font-size: var(--sign-up-form-calculated-font-size);
  text-wrap: balance;
  text-align: center;
}

.sign-up-form label + * {
  margin-block-start: var(--space-2xs, 1em);
}

.sign-up-form input {
  color: var(--sign-up-form-controls-color, var(--color-dark));
  background: transparent;
  border: none;
  border-radius: var(--button-solid-radius, var(--radius));
  font-size: var(--sign-up-form-calculated-font-size);
  padding: var(--sign-up-form-input-padding, 0.5em 2ch);
}

.sign-up-form .button {
  font-family: var(--sign-up-form-button-font-family, var(--button-font-family, var(--font-family-base)));
  font-size: var(--sign-up-form-button-font-size, var(--button-font-size, var(--size-step--1)));
  font-weight: var(--sign-up-form-button-font-weight, var(--button-font-weight, var(--font-weight-bold)));
  text-transform: var(--sign-up-form-button-text-transform, uppercase);
  text-align: var(--sign-up-form-button-alignment, center);
  justify-content: var(--sign-up-form-button-alignment, center);
  background-color: var(--sign-up-form-button-bg, var(--button-solid-button-bg));
  flex: auto;
}

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: var(--gutter);
  z-index: 1;
}

.skip-link:focus {
  background-color: var(--color-primary);
}

.skip-link:not(:focus) {
  display: inline-block;
  height: 1px;
  width: 1px;
  min-width: auto;
  max-width: fit-content;
  overflow: hidden;
  clip: rect(1px 1px 1px 1px);
  clip: rect(1px, 1px, 1px, 1px);
}

.skip-list {
  --cluster-horizontal-alignment: center;
  max-width: var(--measure-s);
  margin-inline: auto;
}

.skip-list .cluster {
  /* TODO: Remove !important once .cluster has been updated with over-rideable token value for gap */
  row-gap: var(--skip-list-row-gap, var(--space-3xs));
}

.skip-list :is(ul, li) {
  margin: 0;
  padding: 0;
}

.skip-list ul {
  list-style: none;
}

.skip-list a {
  font-size: var(--skip-list-text-size, var(--size-step-0));
  font-weight: var(--skip-list-text-font-weight, var(--font-weight-base));
  font-style: var(--skip-list-text-font-style, italic);
  text-underline-offset: var(--skip-list-text-underline-offset, 0.5ex);
}

.smallprint {
  color: var(--smallprint-color, currentColor);
  font-family: var(--smallprint-font-family, var(--font-family-base));
  font-size: var(--smallprint-font-size, var(--size-step--1));
  text-align: var(--smallprint-text-align, center);
}

.smallprint a {
  color: currentColor;
}

.socials__list,
.socials__item {
  display: inline-flex;
  align-items: center;
  list-style: none;
}

.socials__list {
  gap: var(--socials-gutter, var(--space-xs));
}

.socials__link {
  color: var(--socials-link-color, currentColor);
}

.socials__link:hover {
  color: var(--socials-link-color-hover, var(--color-mid-shade));
}

.socials__icon {
  display: block;
  width: var(--socials-icon-size, 1.5rem);
  height: auto;
}

.split-heading > div {
  font-family: var(--split-heading-eyebrow-font, var(--font-family-base));
  font-size: var(--split-heading-eyebrow-size, var(--size-step-0));
  font-weight: var(--split-heading-eyebrow-font-weight, var(--eyebrow-font-weight));
  color: var(--split-heading-eyebrow-color, currentColor);
  margin-block-end: var(--space-s);
}

.split-media {
  --flow-space: var(--split-media-flow-space, var(--space-s));
  --switcher-target-container-width: var(--split-media-target-container-width, 860px);
  --switcher-vertical-alignment: center;
  --gutter: var(--split-media-gap, var(--space-xl));

  text-align: var(--split-media-text-align, left);
  background: var(--split-media-bg, none);
  flex-direction: row-reverse;
}

.split-media > div {
  display: flex;
  flex-direction: column;
  align-items: start;
}

.split-media__body {
  --flow-space: var(--split-media-body-flow-space, var(--space-s));

  padding-block: var(--split-media-padding-block, 0);
  padding-inline: var(--split-media-padding-inline, 0);
}

.split-media__body[data-alignment='left'] {
  align-items: start;
  text-align: left;
}

.split-media__body[data-alignment='right'] {
  align-items: end;
  text-align: right;
}

.split-media__body[data-alignment='center'] {
  align-items: center;
  text-align: center;
}

.split-media__body[data-alignment='justify'] {
  align-items: stretch;
  text-align: justify;
}

.split-media__body p:first-of-type {
  font-size: var(--text-size-lede, var(--size-step-0));
}

.split-media .eyebrow {
  color: var(--split-media-eyebrow-color, currentColor);
}

.split-media__heading {
  display: inline-block;
  font-size: var(--split-media-heading-size, var(--size-step-6));
  color: var(--split-media-heading-color, currentColor);
}

.split-media__heading[data-alignment='left'] {
  align-self: start;
  text-align: left;
}

.split-media__heading[data-alignment='right'] {
  align-self: end;
  text-align: right;
}

.split-media__heading[data-alignment='center'] {
  align-self: center;
  text-align: center;
}

.split-media__heading[data-alignment='justify'] {
  align-self: stretch;
  text-align: justify;
}

.split-media__heading + *,
.split-media .button-group {
  --flow-space: var(--space-l);
}

.button-group.cluster {
  gap: var(--split-media-button-group-gap, var(--space-m));
}

/* Reversed */

.split-media[data-reversed='true'] {
  flex-direction: row;
}

/* Variants */

.split-media[data-variant='promo'] {
  --split-media-gap: 0;
  --split-media-bg: var(--split-media-promo-variant-bg, var(--color-primary));
  --split-media-padding-block: var(--split-media-promo-variant-padding-block, var(--space-xl));
  --split-media-padding-inline: var(--split-media-promo-variant-padding-inline, var(--space-m));

  color: var(--split-media-promo-variant-color, currentColor);
}

.split-media[data-variant='promo'] .split-media__asset {
  align-self: stretch;
}

.split-media[data-variant='promo'] .split-media__asset > div,
.split-media[data-variant='promo'] .split-media__asset > div > div,
.split-media[data-variant='promo'] .split-media__asset img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.split-media[data-variant='promo'] .eyebrow {
  color: var(--split-media-promo-variant-eyebrow-color, var(--split-media-promo-variant-color));
}

.split-media[data-variant='promo'] .split-media__heading {
  color: var(--split-media-promo-variant-heading-color, var(--split-media-promo-variant-color));
}

.split-media[data-variant='promo'] .button[data-ghost='true'] {
  --button-ghost-color: var(--promo-button-tertiary-ghost-color, var(--color-dark));
}

.split-media[data-variant='promo'] .button[data-ghost='true']:hover {
  --button-ghost-color: var(--promo-button-tertiary-ghost-color-hover, var(--color-light));
}

.split-media[data-variant='promo'][data-background='dark'] {
  --split-media-promo-variant-bg: var(--color-dark);
}

.split-media[data-variant='promo'][data-background='light'] {
  --split-media-promo-variant-bg: var(--color-light);
}

.split-media[data-variant='promo'][data-background='primary'] {
  --split-media-promo-variant-bg: var(--color-primary);
}

.split-media[data-variant='promo'][data-background='secondary'] {
  --split-media-promo-variant-bg: var(--color-secondary);
}

.split-media[data-variant='promo'][data-foreground='dark'] {
  --split-media-promo-variant-color: var(--color-dark);
}

.split-media[data-variant='promo'][data-foreground='light'] {
  --split-media-promo-variant-color: var(--color-light);
}

.split-media[data-variant='promo'][data-foreground='primary'] {
  --split-media-promo-variant-color: var(--color-primary);
}

.split-media[data-variant='promo'][data-foreground='secondary'] {
  --split-media-promo-variant-color: var(--color-secondary);
}

.split-media[data-variant='alt-promo'] {
  --split-media-gap: 0;
  --split-media-bg: var(--split-media-alt-promo-variant-bg, var(--color-secondary));
  --split-media-padding-block: var(--split-media-alt-promo-variant-padding-block, var(--space-xl));
  --split-media-padding-inline: var(--split-media-alt-promo-variant-padding-inline, var(--space-m));

  color: var(--split-media-alt-promo-variant-color, currentColor);
}

.split-media[data-variant='alt-promo'] .split-media__asset {
  align-self: stretch;
}

.split-media[data-variant='alt-promo'] .split-media__asset > div,
.split-media[data-variant='alt-promo'] .split-media__asset > div > div,
.split-media[data-variant='alt-promo'] .split-media__asset img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.split-media[data-variant='alt-promo'] .eyebrow {
  color: var(--split-media-alt-promo-variant-eyebrow-color, var(--split-media-alt-promo-variant-color));
}

.split-media[data-variant='alt-promo'] .split-media__heading {
  color: var(--split-media-alt-promo-variant-heading-color, var(--split-media-alt-promo-variant-color));
  font-family: var(--split-media-alt-promo-variant-heading-font-family, var(--font-family-accent));
  font-size: var(--split-media-alt-promo-variant-heading-font-size, var(--size-step-8));
}

.split-media[data-variant='alt-promo'] .button[data-ghost='true'] {
  --button-ghost-color: var(--alt-promo-button-tertiary-ghost-color, var(--color-dark));
}

.split-media[data-variant='alt-promo'] .button[data-ghost='true']:hover {
  --button-ghost-color: var(--alt-promo-button-tertiary-ghost-color-hover, var(--color-light));
}

@media (min-width: 66em) {
  .split-media__body p:first-of-type {
    font-size: var(--text-size-lede-lg);
  }
}

/* Icons use currentColor so to set the star colour, define a colour in this component's parent */

.star-rating {
  display: flex;
  justify-content: var(--star-rating-justification, flex-start);
  align-items: var(--star-rating-alignment, center);
  gap: var(--star-rating-space, 0.05ch);
  font-size: var(--star-rating-size, 1.5rem);
  color: var(--star-rating-color, currentColor);
}

/* REFACTOR: We're limiting to 2 tabs for the first iteration. 
   We need to handle multiple triggers in the future by managing overflow
   with focus, or a better layout. */

.tab-panel {
  --flow-space: var(--space-xl);

  color: var(--tab-panel-color, var(--color-light));
  border: var(--tab-panel-border-width, 1px) solid var(--tab-panel-border-color, var(--color-light));
}

.tab-panel__triggers {
  display: flex;
}

.tab-panel__triggers > * {
  flex-basis: 50%;
}

.tab-panel__tab a {
  display: block;
  padding: var(--tab-panel-tab-padding, var(--space-xs) var(--space-s));
  background: var(--tab-panel-tab-bg, var(--color-mid-shade));
  border-bottom: var(--tab-panel-border-width, 1px) solid var(--tab-panel-border-color, var(--color-light));
  color: var(--tab-panel-tab-color, currentColor);
  text-transform: var(--tab-panel-tab-text-transform, uppercase);
  text-align: var(--tab-panel-tab-text-align, left);
  font-family: var(--tab-panel-tab-font-family, var(--font-family-base));
  font-size: var(--tab-panel-tab-font-size, var(--eyebrow-font-size, var(--size-step-1))); /* Ideally tabs are in line with eyebrows by default */
  font-weight: var(--tab-panel-tab-font-weight, var(--font-weight-bold));
  text-decoration: none;
  line-height: 1;
}

.tab-panel__tab a:hover,
.tab-panel__tab a:focus {
  /* background: var(--tab-panel-tab-interact-bg, var(--color-secondary-glare));
  color: var(--tab-panel-tab-interact-text, var(--color-surface-text-interact)); */
}

.tab-panel__tab a[aria-selected='true'] {
  background: var(--tab-panel-tab-active-bg, var(--color-mid));
  color: var(--tab-panel-tab-active-colour, currentColor);
}

.tab-panel__tab a[aria-selected='true']:hover,
.tab-panel__tab a[aria-selected='true']:focus {
  /* background: var(--tab-panel-tab-interact-bg, var(--color-secondary-glare));
  color: var(--tab-panel-tab-interact-text, var(--color-surface-text-interact)); */
}

@media (max-width: 30em) {
  .tab-panel__tab a {
    padding-inline: var(--space-xs);
    font-size: var(--size-step--2);
  }
}

@media (min-width: 40em) {
  .tab-panel__tab a {
    padding: var(--tab-panel-tab-padding-md, var(--space-s) var(--space-m));
  }
}

.tab-panel__tab + .tab-panel__tab a {
  border-left: var(--tab-panel-border-width, 1px) solid var(--tab-panel-border-color, var(--color-light));
}

.tab-panel__panel {
  background: var(--tab-panel-panel-bg, inherit);
  color: var(--tab-panel-panel-color, currentColor);
  text-align: var(--tab-panel-panel-text-align, center);
  overflow: hidden;
}

/* Add padding to child elements to allow full width border to be applied to video in theme */

.tab-panel__panel > * {
  --flow-space: var(--space-2xl);

  padding-inline: var(--tab-panel-panel-padding-inline, var(--space-m));
  padding-block: var(--tab-panel-panel-padding-block, var(--space-2xl));
}

/* Match video panel bottom padding to inline padding */

.tab-panel__panel > .tab-panel__video {
  padding-block-end: var(--tab-panel-panel-padding-inline, var(--space-m));
}

.tab-panel__header h2 {
  /* This should match eyebrow heading font size */
  font-size: var(--eyebrow-display-heading-size, var(--size-step-7));
}

.tab-panel .prose {
  --region-space: 0;
  margin-block-start: var(--space-s);
}

.tab-panel .prose > p:first-child {
  font-size: var(--text-size-lede);
  text-wrap: balance;
}

.tab-panel__header + .image {
  margin-block-start: var(--tab-panel-image-space, var(--space-l));
}

.tab-panel .image img {
  margin-inline: auto;
  margin-block-end: var(--tab-panel-image-space, var(--space-l));
}

.tab-panel__buttons {
  --cluster-horizontal-alignment: center;
}

.tab-panel__video {
  border-top: var(--tab-panel-border-width, 1px) solid var(--tab-panel-border-color, var(--color-light));
}

/* If there's a blowout gallery, whatever follows should have space added */

/* I'm not using flow space here because in the first iteration, the direct sibling was prose */

.tab-panel__panel .blowout-gallery + * {
  margin-block-start: var(--space-l-xl);
}

.tag {
  display: inline-block;
  padding: var(--tag-padding, 0.4em 0.63em 0.31em 0.63em);
  background: var(--tag-bg, transparent);
  color: var(--tag-text, currentColor);
  line-height: var(--tag-leading, var(--leading-flat));
  border: var(--tag-border, 1px solid currentColor);
  text-transform: var(--tag-text-transform, uppercase);
  border-radius: var(--tag-border-radius, none);
  font-weight: var(--tag-font-weight, var(--font-weight-accent));
  font-size: var(--tag-font-size, var(--size-step-0));
  letter-spacing: var(--tag-kerning, var(--kerning-loose));
}

/* Variants */

.tag[data-tag-level='good'] {
  --tag-text: var(--color-success);
}

.tag[data-tag-level='medium'] {
  --tag-text: var(--color-warning);
}

.tag[data-tag-level='low'] {
  --tag-text: var(--color-error);
}

.tag[data-tag-level='muted'] {
  --tag-text: var(--color-dark-glare);
}

.ticket {
  --flow-space: var(--ticket-flow-space, var(--space-s));
  --sidebar-target-width: var(--ticket-content-target-width, max(30rem, 50%));
  --switcher-vertical-alignment: stretch;
  --sidebar-gutter-width: 0;

  text-align: var(--ticket-text-align, left);
  background: var(--ticket-bg, none);
  color: var(--ticket-color, currentColor);
}

.ticket .image {
  height: 100%;
  width: 100%;
}

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

.ticket .prose {
  --region-space: 0;
  text-align: var(--ticket-body-text-align, left);
}

.ticket .prose * {
  margin-inline: 0;
}

.ticket__body {
  --flow-space: var(--ticket-body-flow-space, var(--space-s));

  color: var(--ticket-body-text, currentColor);
  padding-block: var(--ticket-padding-block, var(--space-m));
  padding-inline: var(--ticket-padding-inline, var(--space-m));
}

.ticket .tag {
  background: var(--ticket-tag-background, var(--tag-bg, transparent));
  border: var(--tag-tag-border, var(--tag-border, 1px solid currentColor));
  color: var(--ticket-tag-text, var(--tag-text, currentColor));
  font-family: var(--ticket-tag-font-family, var(--font-family-base));
  font-size: var(--ticket-tag-font-size, var(--tag-font-size, var(--size-step-0)));
  font-weight: var(--ticket-tag-font-weight, var(--tag-font-weight, var(--font-weight-accent)));
  margin-right: auto;
  padding: var(--ticket-tag-padding, var(--tag-padding, 0.4em 0.63em 0.31em 0.63em));
  text-transform: var(--ticket-tag-text-transform, var(--tag-text-transform, uppercase));
}

.ticket__body .lede {
  --flow-space: var(--space-2xs);
  color: var(--ticket-price-text, currentColor);
}

.ticket__body .lede em {
  color: var(--ticket-price-text-emphasis, currentColor);
  font-style: var(--ticket-price-font-style, italic);
}

.ticket__heading {
  --flow-space: var(--space-xs);

  font-family: var(--ticket-heading-font-family, var(--font-family-display));
  font-weight: var(--ticket-heading-font-weight, var(--font-weight-heading, 700));
  font-size: var(--ticket-heading-size, var(--size-step-4));
  letter-spacing: var(--ticket-heading-kerning, var(--kerning-heading, 0));
  color: var(--ticket-heading-color, currentColor);
}

.ticket__body > button,
.ticket__body > .button {
  font-size: var(--ticket-button-font-size, var(--button-font-size));
}

.button-group.cluster {
  gap: var(--ticket-button-group-gap, var(--space-m));
}

.tle-logo {
  max-width: 100%;
}

.video-player {
  display: grid;
  place-items: center;
  grid-template-areas: 'stacked';
  overflow: hidden;
}

/* Force a wide aspect on wider devices  */

/* @media (--md) {
  .video-player:not([data-forced-portrait]),
  .video-player:not([data-forced-portrait]) .video-player__media,
  .video-player:not([data-forced-portrait]) video {
    aspect-ratio: 16/9;
  }
} */

.video-player[data-portrait-aspect='portrait'] video {
  aspect-ratio: 9 / 16;
}

.video-player[data-portrait-aspect='wide'] video {
  aspect-ratio: 24 / 10;
}

.video-player[data-portrait-aspect='theatre'] video {
  aspect-ratio: 16 / 9;
}

.video-player[data-portrait-aspect='square'] video {
  aspect-ratio: 1 / 1;
}

.video-player[data-portrait-aspect='fullWidth'] video {
  aspect-ratio: unset;
}

.video-player[data-portrait-aspect='original'] video {
  aspect-ratio: unset;
}

@media (min-width: 40em) {
  .video-player[data-aspect='portrait'] video {
    aspect-ratio: 9 / 16;
  }

  .video-player[data-aspect='wide'] video {
    aspect-ratio: 24 / 10;
  }

  .video-player[data-aspect='theatre'] video {
    aspect-ratio: 16 / 9;
  }

  .video-player[data-aspect='square'] video {
    aspect-ratio: 1 / 1;
  }

  .video-player[data-aspect='fullWidth'] video {
    aspect-ratio: unset;
  }

  .video-player[data-aspect='original'] video {
    aspect-ratio: unset;
  }
}

.video-player__media {
  width: 100%;
  height: 100%;
  position: relative;
}

.video-player video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-player > * {
  grid-area: stacked;
}

/* This whole block needs removing when the PlayPause refactor is done */

.video-player__button {
  display: grid;
  position: relative;
  place-items: center;
  color: var(--video-player-button-color, currentColor);
  width: var(--video-player-button-size, 7rem);
  height: var(--video-player-button-size, 7rem);
  font-size: var(--video-player-icon-size, var(--size-step-2));
  z-index: 1;
  border: 0;
  background: none;
  cursor: pointer;
}

@supports (mask-size: cover) {
  .video-player__button::after {
    content: '';
    display: block;
    position: absolute;
    background: var(--video-player-button-background, rgb(255 255 255 / 50%));
    inset: 0;
    z-index: -1;
    mask-image: var(--video-player-button-mask);
    mask-size: cover;
    mask-repeat: no-repeat;
  }
}

/* While the video is playing, if the pointer leaves, hide the button */

.video-player[data-video-play-state='playing']:not(:hover) .video-player__button {
  opacity: 0;
  transform: translateY(5%);
  transition: var(--video-player-button-leave-transition, all 300ms ease);
}

.all-faqs {
  --flow-space: var(--all-faqs-flow-space, var(--space-xl));

  text-align: var(--all-faqs-text-align, center);
  background: var(--all-faqs-bg, inherit);
  color: var(--all-faqs-color, inherit);
}

.all-faqs__header {
  --flow-space: var(--contact-form-header-flow-space, var(--space-3xl));

  padding-block-start: var(--contact-form-header-padding--block-start, var(--contact-form-header-padding, 0));
  padding-block-end: var(--contact-form-header-padding-block-end, var(--contact-form-header-padding, 0));
  border-top-width: var(--contact-form-header-border-top-width, 0);
  border-bottom-width: var(--contact-form-header-border-bottom-width, 0);
  border-color: var(--contact-form-header-border-color, currentColor);
  border-style: var(--contact-form-header-border-style, solid);
  border-right-width: 0;
  border-left-width: 0;
}

.all-faqs__header .skip-list {
  --flow-space: var(--skip-list-flow-space, var(--space-m));
}

.all-faqs__header h2 {
  /* This should match eyebrow heading font size */
  font-size: var(--eyebrow-display-heading-size, var(--size-step-7));
}

.all-faqs__category-title {
  display: flex;
  justify-content: center;
  padding-block: var(--faq-list-padding, var(--space-m));
  border-top-width: var(--faq-list-border-width, var(--stroke-weight-heavy, 3px));
  border-bottom-width: var(--faq-list-border-width, var(--stroke-weight-heavy, 3px));
  border-left-width: 0;
  border-right-width: 0;
  border-color: var(--faq-list-border-color, currentColor);
  border-style: var(--faq-list-border-style, solid);
  color: var(--faq-list-category-title-color, currentColor);
  margin-block-end: var(--faq-list-padding, var(--space-m));
}

.all-faqs__category + .all-faqs__category {
  margin-block-start: var(--faq-list-padding, var(--space-m));
}

.all-faqs--tight .all-faqs__category + .all-faqs__category {
  margin-block-start: 0;
}

.all-faqs__category-title h2 {
  /* Duplicate of .eyebrow__heading styles */
  font-size: var(--eyebrow-font-size, var(--size-step-0));
  line-height: var(--eyebrow-leading, var(--leading-short, 1.2));
  font-family: var(--eyebrow-font-family, var(--font-family-base));
  font-weight: var(--eyebrow-font-weight, var(--font-weight-bold));
  text-transform: var(--eyebrow-text-transform, uppercase);
  letter-spacing: var(--eyebrow-kerning, var(--caps-kerning));
  font-feature-settings: var(--eyebrow-cpsp, var(--caps-cpsp));
}

.all-faqs__category:last-of-type .faq-list > :last-child {
  padding-block-end: 0;
}

.collage {
  --collage-calculated-gutters: var(--collage-gutters, var(--space-3xs));
  --flow-space: var(--collage-calculated-gutters);
}

/* This is a column in the "masonry" / reel layout */

.collage__column {
  gap: var(--collage-calculated-gutters);
}

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

@media (min-width: 40em) {
  .collage__columns {
    overflow-x: visible;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--collage-calculated-gutters);
    padding-block-end: 0;
  }
}

.content-page {
  --region-space: var(--space-2xl);
  --praise-text-align: center;

  text-align: center;
}

.content-page h1:first-child {
  font-size: var(--size-step-9);
}

.content-page em {
  color: var(--content-page-spot-color, currentColor);
  font-style: normal;
}

.content-page .praise {
  --flow-space: var(--space-xl);
}

/* Generally in center-aligned contexts, this pushes everything into the middle */

.content-page .prose > * {
  margin-inline: auto;
}

.cta-unit {
  text-align: var(--cta-unit-text-align, center);
  background: var(--cta-unit-bg, inherit);
  color: var(--cta-unit-color, inherit);
}

.cta-unit__summary {
  --flow-space: var(--space-s);
}

.cta-unit__title {
  --flow-space: var(--space-xs);

  font-size: var(--size-step-7);
  text-wrap: balance;
  overflow-wrap: anywhere;
  margin-inline: auto;

  /* All of this matches the global styles for headings. Semantically, we can't have 
     stacked headings, so if there is a title prefix element, this will be a paragraph 
     element */
  line-height: var(--leading-heading, var(--leading-fine));
  font-family: var(--font-family-display, var(--font-family-display));
  font-weight: var(--font-weight-heading, 700);
  letter-spacing: var(--kerning-heading, var(--kerning-tight));
  text-transform: var(--text-transform-heading);
}

.cta-unit__buttons {
  --flow-space: var(--space-l);
  --cluster-horizontal-alignment: center;

  /* TODO: Remove !important once .cluster has been updated with over-rideable token value for gap */
  gap: var(--space-m) !important;
}

.filtered-faqs {
  --flow-space: var(--filtered-faqs-flow-space, var(--space-xl));

  text-align: var(--filtered-faqs-text-align, center);
  background: var(--filtered-faqs-bg, inherit);
  color: var(--filtered-faqs-color, inherit);
}

.filtered-faqs__title {
  display: flex;
  justify-content: center;
  padding-block: var(--faq-list-padding, var(--space-m));
  border-top-width: var(--faq-list-border-width, var(--stroke-weight-heavy, 3px));
  border-bottom-width: var(--faq-list-border-width, var(--stroke-weight-heavy, 3px));
  border-left-width: 0;
  border-right-width: 0;
  border-color: var(--faq-list-border-color, currentColor);
  border-style: var(--faq-list-border-style, solid);
  color: var(--faq-list-category-title-color, currentColor);
  margin-block-end: var(--faq-list-padding, var(--space-m));
}

.filtered-faqs__title h2 {
  /* Duplicate of .eyebrow__heading styles */
  font-size: var(--eyebrow-font-size, var(--size-step-0));
  line-height: var(--eyebrow-leading, var(--leading-short, 1.2));
  font-family: var(--eyebrow-font-family, var(--font-family-base));
  font-weight: var(--eyebrow-font-weight, var(--font-weight-bold));
  text-transform: var(--eyebrow-text-transform, uppercase);
  letter-spacing: var(--eyebrow-kerning, var(--caps-kerning));
  font-feature-settings: var(--eyebrow-cpsp, var(--caps-cpsp));
}

.filtered-faqs .faq-list li:last-of-type {
  padding-block-end: 0;
}

.food-menu {
  --calculated-spot-color: var(--food-menu-spot-color, currentColor);
  --praise-text-align: var(--food-menu-text-align, center);
  --dt-color: var(--food-menu-dt-color, currentColor);
  --star-rating-color: var(--food-menu-star-rating-color, currentColor);

  text-align: var(--food-menu-text-align, center);
}

.food-menu h3 {
  font-size: var(--food-menu-heading-font-size, var(--size-step-7));
}

.food-menu .eyebrow__heading {
  --eyebrow-display-heading-size: var(--food-menu-eyebrow-heading-font-size, var(--size-step-6));

  max-width: var(--food-menu-eyebrow-heading-max-width, 27ch);
}

.food-menu dl {
  --flow-space: var(--space-xl);
}

.food-menu dt {
  color: var(--food-menu-category-color, var(--color-light));
}

.food-menu dd {
  font-family: var(--food-menu-dishes-font-family, var(--font-family-accent));
  font-weight: var(--food-menu-dishes-font-weight, var(--font-weight-accent));
  text-transform: var(--food-menu-dishes-text-transform, none);
  letter-spacing: var(--food-menu-dishes-letter-spacing, none);
  font-feature-settings: 'cpsp' var(--food-menu-dishes-cpsp, off);
  font-size: var(--food-menu-dishes-font-size, var(--size-step-7));
  line-height: var(--food-menu-dishes-leading, var(--leading-short));
}

.food-menu dd:has(em) {
  font-family: var(--food-menu-dish-ingredient-font, var(--font-family-base));
  font-weight: var(--food-menu-dish-ingredient-font-weight, var(--font-weight-base));
  font-size: var(--food-menu-dish-ingredient-font-size, var(--size-step-0));
  text-transform: var(--food-menu-dish-ingredient-text-transform, none);
  letter-spacing: var(--food-menu-dish-ingredient-letter-spacing, none);
  font-feature-settings: 'cpsp' var(--food-menu-dish-ingredient-cpsp, off);
}

.food-menu dd + dt {
  margin-block-start: var(--food-menu-category-space, var(--space-xl));
}

.food-menu dt + dd,
.food-menu dd:has(strong) + dd:has(strong),
.food-menu dd:has(em) + dd:has(strong) {
  margin-block-start: var(--food-menu-dish-space, var(--space-s));
}

.food-menu dd:has(em) {
  margin-block-start: var(--food-menu-description-space, var(--space-3xs));
}

.food-menu__tabs {
  padding-inline: var(--gutter, 0);
}

/* Mimic category space above dishes when a dl has only one dt (e.g. drinks menu) */

.food-menu dl:has(dt:only-of-type) > dd:has(strong) {
  margin-block-start: var(--food-menu-category-space, var(--space-xl));
}

.food-menu dt:only-of-type + dd {
  margin-block-start: 0;
}

@media (min-width: 66em) {
  .food-menu dd {
    font-size: var(--food-menu-dishes-lg-font-size, var(--size-step-4));
  }
}

.footer {
  --region-space: var(--space-3xl);
  --flow-space: var(--footer-flow-space, var(--space-xl));

  text-align: var(--footer-text-align, center);
  position: relative;
  overflow: hidden;
}

.footer .tle-logo {
  display: inline-block;
  width: var(--footer-logo-width, 17.5rem);
  height: auto;
}

.footer__welcome {
  width: clamp(300px, 105vi, 110vi);
  margin-left: 50%;
  transform: translateX(-50%);
  height: auto;
  color: var(--footer-welcome-color, var(--color-primary));
}

.footer__brand {
  text-transform: var(--footer-brand-text-transform, uppercase);
  font-family: var(--footer-brand-font-family, var(--font-family-base));
  font-weight: var(--footer-brand-font-weight, var(--font-weight-base));
  font-size: var(--footer-brand-font-size, var(--size-step-1));
  letter-spacing: var(--footer-brand-kerning, var(--kerning-loose));
}

.footer__brand a {
  --flow-space: var(--space-2xs);

  display: block;
}

.footer__brand > * {
  --flow-space: var(--footer-brand-flow-space, var(--space-s));
}

.footer__nav {
  color: var(--footer-nav-color, var(--color-primary));
  font-family: var(--footer-nav-font-family, var(--font-family-base));
}

.footer__nav a {
  color: currentColor;
}

@media (max-width: 66em) {
  .footer.region > .wrapper > :last-child {
    padding-bottom: var(--space-m); /* Add some additional padding on smaller viewports to account for the docked button */
  }
}

.gallery-region {
  --flow-space: var(--gallery-region-flow-space, var(--space-xl));

  text-align: var(--gallery-region-text-align, center);
  background: var(--gallery-region-bg, inherit);
  color: var(--gallery-region-color, inherit);
}

.gallery-region__header {
  --flow-space: var(--gallery-region-header-flow-space, var(--space-3xl));

  padding-block-start: var(--gallery-region-header-padding--block-start, var(--gallery-region-header-padding, 0));
  padding-block-end: var(--gallery-region-header-padding-block-end, var(--gallery-region-header-padding, 0));
  border-top-width: var(--gallery-region-header-border-top-width, 0);
  border-bottom-width: var(--gallery-region-header-border-bottom-width, 0);
  border-color: var(--gallery-region-header-border-color, currentColor);
  border-style: var(--gallery-region-header-border-style, solid);
  border-right-width: 0;
  border-left-width: 0;
}

.header {
  background: var(--header-background, transparent);
  padding-block-start: var(--header-padding-block-start, var(--space-m));
  padding-block-end: var(--header-padding-block-end, var(--space-m));
  position: var(--header-position, relative);
  top: var(--header-top, initial);
  bottom: var(--header-bottom, initial);
  left: var(--header-left, initial);
  right: var(--header-right, initial);
  transition: var(--header-transition, none);
  z-index: 10;
}

.is-scrolled .header {
  background: var(--header-scrolled-background, transparent);
}

.header .wrapper {
  display: var(--header-display, flex);
  justify-content: var(--header-justify-content, center);
  align-items: var(--header-align-items, center);
  position: relative;
  /* z-index: 1; */
}

.header__logo {
  width: var(--header-logo-width, auto);
  margin-inline: var(--header-logo-margin-inline, auto);
  color: var(--header-color, var(--color-light));
  /* Improve readability with a subtle shadow */
  filter: drop-shadow(var(--drop-shadow));
}

.header__logo :is(img, svg) {
  display: block;
  width: var(--header-logo-base-width);
  height: var(--header-logo-base-height);
}

.header__secondary-logo {
  color: var(--header-color, var(--color-light));
}

.header__book-now {
    display: var(--header-book-now-display, flex);
    align-items: var(--header-book-now-align-items, center);
    justify-content: var(--header-book-now-justify-content, center);
    background: var(--header-book-now-background, var(--color-dark));
    color: var(--header-book-now-color, var(--color-light));
    text-align: center;
    text-decoration: var(--header-book-now-text-decoration, none);
    text-transform: var(--header-book-now-text-transform, uppercase);
    font-family: var(--header-book-now-font-family, var(--button-font-family));
    line-height: var(--header-book-now-leading, var(--button-leading));
    letter-spacing: var(--header-book-now-kerning, var(--button-kerning));
    font-size: var(--header-book-now-font-size, var(--size-step-6));
    font-weight: var(--header-book-now-font-weight, var(--button-font-weight));
    padding: var(--header-book-now-padding, var(--button-padding));
    position: var(--header-book-now-position, static);
    top: var(--header-book-now-top, initial);
    bottom: var(--header-book-now-bottom, initial);
    left: var(--header-book-now-left, initial);
    right: var(--header-book-now-right, initial);
    box-shadow: var(--header-book-now-box-shadow, none);
    border-width: var(--header-book-now-button-border-width, var(--button-border-width));
    border-style: var(--header-book-now-button-border-width, var(--button-border-style, var(--stroke-style)));
    border-color: var(--header-book-now-button-border-radius, var(--header-book-now-button-border-color, var(--button-primary-border-color)));
    border-radius: var(--button-radius, var(--radius));
    transform: var(--header-book-now-transform, none);
    transition: var(--header-book-now-transition, none);
}

.is-scrolled .header__book-now {
  transform: var(--header-book-now-scrolled-transform, none);
}

/* Variants */

.header__book-now[data-portrait-variant='primary'] {
  background: var(--button-primary-button-bg, var(--color-primary));
  color: var(--button-primary-button-text, var(--color-dark));
  border-color: var(--button-primary-border-color, var(--color-primary));
}

.header__book-now[data-portrait-variant='primary']:hover,
.header__book-now[data-portrait-variant='primary']:focus {
  background: var(--button-primary-interact-bg, var(--color-primary-glare));
  color: var(--button-primary-interact-text, var(--color-surface-text-interact));
}

.header__book-now[data-portrait-variant='secondary'] {
  background: var(--button-secondary-button-bg, var(--color-secondary));
  color: var(--button-secondary-button-text, var(--color-dark));
  border-color: var(--button-secondary-border-color, var(--color-secondary));
}

.header__book-now[data-portrait-variant='secondary']:hover,
.header__book-now[data-portrait-variant='secondary']:focus {
  background: var(--button-secondary-interact-bg, var(--color-secondary-glare));
  color: var(--button-secondary-interact-text, var(--color-surface-text-interact));
}

.header__book-now[data-portrait-variant='tertiary'] {
  background: var(--button-tertiary-button-bg, var(--color-tertiary));
  color: var(--button-tertiary-button-text, var(--color-dark));
  border-color: var(--button-tertiary-border-color, var(--color-tertiary));
}

.header__book-now[data-portrait-variant='tertiary']:hover,
.header__book-now[data-portrait-variant='tertiary']:focus {
  background: var(--button-tertiary-interact-bg, var(--color-tertiary-glare));
  color: var(--button-tertiary-interact-text, var(--color-surface-text-interact));
}

.header__book-now[data-portrait-variant='light'] {
  background: var(--button-light-button-bg, var(--color-light));
  color: var(--button-light-button-text, var(--color-dark));
  border-color: var(--button-light-border-color, var(--color-light));
}

.header__book-now[data-portrait-variant='light']:hover,
.header__book-now[data-portrait-variant='light']:focus {
  background: var(--button-light-interact-bg, var(--color-light-glare));
  color: var(--button-light-interact-text, var(--color-surface-text-interact));
}

.header__book-now[data-portrait-variant='dark'] {
  background: var(--button-dark-button-bg, var(--color-dark));
  color: var(--button-dark-button-text, var(--color-light));
  border-color: var(--button-dark-border-color, var(--color-dark));
}

.header__book-now[data-portrait-variant='dark']:hover,
.header__book-now[data-portrait-variant='dark']:focus {
  background: var(--button-dark-interact-bg, var(--color-dark-glare));
  color: var(--button-dark-interact-text, var(--color-light));
}

.header__book-now__icon {
  display: var(--header-book-now-icon-display, block);
  margin: var(--header-book-now-icon-margin, 0);
  padding: var(--header-book-now-icon-padding, 0);
  width: var(--header-book-now-icon-width, 1em);
}

.fixed-nav {
  padding-inline: var(--gutter);
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;

  position: fixed;

  top: 0;
  left: 0;
}

@media (min-width: 40em) {
  .header__logo :is(img, svg) {
    width: var(--header-logo-md-width);
    height: var(--header-logo-md-height);
  }
}

@media (min-width: 66em) {
  .header {
    padding-block-start: var(--header-padding-block-start-lg, var(--space-m));
  }
  
  .header__logo {
    margin-inline: var(--header-logo-lg-margin-inline, auto);
  }
  
  .header__book-now {
      background: var(--header-book-now-lg-background, var(--color-dark));
      color: var(--header-book-now-lg-color, var(--color-light));
      font-size: var(--header-book-now-lg-font-size, var(--size-step-3));
      line-height: var(--header-book-now-lg-leading, var(--button-leading));
      padding: var(--header-book-now-lg-padding, var(--button-padding));
      position: var(--header-book-now-lg-position, inherit);
      top: var(--header-book-now-lg-top, inherit);
      bottom: var(--header-book-now-lg-bottom, inherit);
      left: var(--header-book-now-lg-left, inherit);
      right: var(--header-book-now-lg-right, inherit);
      box-shadow: var(--header-book-now-lg-box-shadow, none);
      border-width: var(--header-book-now-lg-button-border-width, var(--button-border-width));
      border-style: var(--header-book-now-lg-button-border-width, var(--button-border-style, var(--stroke-style)));
      border-color: var(--header-book-now-lg-button-border-color, var(--button-primary-border-color));
      transform: var(--header-book-now-lg-transform, none);
      z-index: var(--header-book-now-lg-z-index, initial);
    }

    /* Variants */
    .header__book-now[data-landscape-variant='primary'] {
      background: var(--button-primary-button-bg, var(--color-primary));
      color: var(--button-primary-button-text, var(--color-dark));
      border-color: var(--button-primary-border-color, var(--color-primary));
    }

    .header__book-now[data-landscape-variant='primary']:hover,
    .header__book-now[data-landscape-variant='primary']:focus {
      background: var(--button-primary-interact-bg, var(--color-primary-glare));
      color: var(--button-primary-interact-text, var(--color-surface-text-interact));
    }

    .header__book-now[data-landscape-variant='secondary'] {
      background: var(--button-secondary-button-bg, var(--color-secondary));
      color: var(--button-secondary-button-text, var(--color-dark));
      border-color: var(--button-secondary-border-color, var(--color-secondary));
    }

    .header__book-now[data-landscape-variant='secondary']:hover,
    .header__book-now[data-landscape-variant='secondary']:focus {
      background: var(--button-secondary-interact-bg, var(--color-secondary-glare));
      color: var(--button-secondary-interact-text, var(--color-surface-text-interact));
    }

    .header__book-now[data-landscape-variant='tertiary'] {
      background: var(--button-tertiary-button-bg, var(--color-tertiary));
      color: var(--button-tertiary-button-text, var(--color-dark));
      border-color: var(--button-tertiary-border-color, var(--color-tertiary));
    }

    .header__book-now[data-landscape-variant='tertiary']:hover,
    .header__book-now[data-landscape-variant='tertiary']:focus {
      background: var(--button-tertiary-interact-bg, var(--color-tertiary-glare));
      color: var(--button-tertiary-interact-text, var(--color-surface-text-interact));
    }

    .header__book-now[data-landscape-variant='light'] {
      background: var(--button-light-button-bg, var(--color-light));
      color: var(--button-light-button-text, var(--color-dark));
      border-color: var(--button-light-border-color, var(--color-light));
    }

    .header__book-now[data-landscape-variant='light']:hover,
    .header__book-now[data-landscape-variant='light']:focus {
      background: var(--button-light-interact-bg, var(--color-light-glare));
      color: var(--button-light-interact-text, var(--color-surface-text-interact));
    }

    .header__book-now[data-landscape-variant='dark'] {
      background: var(--button-dark-button-bg, var(--color-dark));
      color: var(--button-dark-button-text, var(--color-light));
      border-color: var(--button-dark-border-color, var(--color-dark));
    }

    .header__book-now[data-landscape-variant='dark']:hover,
    .header__book-now[data-landscape-variant='dark']:focus {
      background: var(--button-dark-interact-bg, var(--color-dark-glare));
      color: var(--button-dark-interact-text, var(--color-light));
    }

    .header__book-now[data-landscape-variant='solid'] {
      background: var(--button-solid-button-bg, var(--color-dark));
      color: var(--button-solid-button-text, var(--color-light));
      border-color: var(--button-solid-border-color, var(--color-dark));
    }

    .header__book-now[data-landscape-variant='solid']:hover,
    .header__book-now[data-landscape-variant='solid']:focus {
      background: var(--button-solid-interact-bg, var(--color-dark-glare));
      color: var(--button-solid-interact-text, var(--color-light));
    }

    .header__book-now__icon {
      display: var(--header-book-now-lg-icon-display, block);
      margin: var(--header-book-now-lg-icon-margin, 0);
      padding: var(--header-book-now-lg-icon-padding, 0);
      width: var(--header-book-now-lg-icon-width, 1em);
    }
}

.hero {
  --flow-space: var(--space-xl);

  text-align: var(--hero-text-align, center);
  background: var(--hero-bg, inherit);
  color: var(--hero-color, inherit);
}

.hero .region {
  /* Ensure no top padding on region to accomodate overlaid header */
  padding-top: 0;
  position: relative;
}

.hero__media {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

/* The viewport filler is not needed if the images are art directed */

.hero__media:has(picture) {
  height: unset;
}

.hero__media[data-hero-media-maintain-aspect-ratio] {
  height: unset;
}

.hero__media picture {
  width: 100%;
}

.hero__media:not([data-hero-media-no-gradient])::after {
  content: '';
  display: block;
  position: absolute;
  top: var(--hero-gradient-top, 20%);
  bottom: 0;
  width: 100%;
  background: linear-gradient(
    to bottom,
    hsla(0, 0%, 0%, 0) 0%,
    hsla(0, 0%, 0%, 0.013) 8.1%,
    hsla(0, 0%, 0%, 0.049) 15.5%,
    hsla(0, 0%, 0%, 0.104) 22.5%,
    hsla(0, 0%, 0%, 0.175) 29%,
    hsla(0, 0%, 0%, 0.259) 35.3%,
    hsla(0, 0%, 0%, 0.352) 41.2%,
    hsla(0, 0%, 0%, 0.45) 47.1%,
    hsla(0, 0%, 0%, 0.55) 52.9%,
    hsla(0, 0%, 0%, 0.648) 58.8%,
    hsla(0, 0%, 0%, 0.741) 64.7%,
    hsla(0, 0%, 0%, 0.825) 71%,
    hsla(0, 0%, 0%, 0.896) 77.5%,
    hsla(0, 0%, 0%, 0.951) 84.5%,
    hsla(0, 0%, 0%, 0.987) 91.9%,
    hsl(0, 0%, 0%) 100%
  );
  opacity: 1;
}

/* reduce the height of the gradient for heros that are image, rather than video */

.hero:has(.image) {
  --hero-gradient-top: 40%;
}

.hero__media h1 {
  margin-block-end: var(--space-xl);
}

.hero__media :is(.video-player, .video-player__media, .video-player video, .image, img) {
  width: 100%;
  height: 100%;
}

.hero__media:not([data-hero-media-maintain-aspect-ratio]) .image {
  position: absolute;
  top: 0;
  left: 0;
}

.hero__media img {
  object-fit: cover;
}

.hero .region > .flow {
  margin-block-start: var(--space-xl);
}

.hero h1 {
  font-family: var(--hero-title-font-family, var(--font-family-display));
  font-size: var(--hero-title-font-size-base, var(--size-step-7));
  font-weight: var(--hero-title-font-weight-base, 400);
  letter-spacing: var(--hero-title-kerning, var(--kerning-heading));
  line-height: var(--hero-heading-line-height, var(--leading-heading, 1));
  text-wrap: balance;
  padding-inline: var(--space-xs);
  margin-inline: auto;
  max-width: var(--hero-title-max-width, var(--measure-heading-1));
}

/* Contains heading and shoutbox */

.hero__media__text {
  position: absolute;
  bottom: 0;
  z-index: 1;
  width: 100%;
}

.hero__media__title-image {
  margin-inline: auto;
  max-width: var(--hero-title-image-max-width, var(--space-xl));
  margin-block-end: var(--space-xl);
}

/* If the vertical positioning of the text is center or top, we need the 
   hero__media__text element to fill the hero and push the shout-box to the bottom
   which this grid layout does for us. It allows us to then align child items nicely too.
*/

.hero__media__text[data-hero-title-y-position='center'],
.hero__media__text[data-hero-title-y-position='top'] {
  top: 0;
  display: grid;
  grid-template-rows: 1fr minmax(0, auto);
}

/* AB: we're only making this a flex parent because I'm not 100% how supported align-content: center is on a block element */

.hero__media__text[data-hero-title-y-position='center'] .hero__media__title {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero__media__text[data-hero-title-y-position='center'] h1 {
  margin-block-end: 0;
}

/* Space is added to top variants so the absolutely positioned logo doesn't clip the text */

.hero__media__text[data-hero-title-y-position='top'] .hero__media__title {
  margin-block-start: var(--space-4xl);
}

/* For each item on horizontal alignment, we add padding on the edge side so text doesn't butt up to the edge of the screen */

.hero__media__text[data-hero-title-x-position='right'] {
  text-align: right;

  h1 {
    padding-inline-end: var(--gutter);
  }
}

.hero__media__text[data-hero-title-x-position='left'] {
  text-align: left;

  h1 {
    /* This aligns it with the burger menu, which is why the 'right' variant is just --gutter */
    padding-inline-start: calc(var(--gutter) + var(--space-s));
  }
}

@media (min-width: 40em) {
  .hero h1 {
    font-size: var(--hero-title-font-size-md, var(--size-step-8));
    padding-inline: var(--space-l);
  }
}

.hero__body .button {
  --flow-space: var(--space-l);
}

.hero__body {
  h1, h2, h3, h4, h5, h6{
    font-family: var(--hero-heading-font-family, var(--font-family-display));
    margin-inline: auto;
  }
}

.hero__body p {
  max-width: var(--measure-l);
  font-size: var(--hero-text-size-lede, var(--size-step-2));
  margin-inline: auto;
}

.hero__praise {
  --praise-star-rating-color: var(--hero-praise-star-rating-color, var(--color-primary));
  --praise-foot-color: var(--hero-praise-foot-color, var(--color-light));

  margin-block-start: var(--space-xl);
  max-width: var(--measure);
  margin-inline: auto;
}

.hero__praise .praise {
  padding-block: 0;
}

.hero__praise .praise .star-rating {
  --star-rating-size: var(--hero-praise-star-rating-size, 1.25lh);
}

/* Style header when it preceeds the hero */

:has(:is(.header + .hero, main .hero:first-child)) .header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 99;
}

/* Variants */

.hero__inner.region[data-flush='bottom-ltlg'] {
  padding-block-end: 0;
}

.highlights {
  --calculated-spot-color: var(--highlights-spot-color, currentColor);
  --dt-color: var(--calculated-spot-color);
  --flow-space: var(--space-xl);

  background: var(--highlights-background, inherit);
  color: var(--highlights-color, currentColor);
  text-align: var(--highlights-text-align, left);
  counter-reset: highlights 0;
}

.highlights__intro {
  text-align: var(--highlights-intro-text-align, center);
}

.highlights__container {
  display: grid;
}

.highlights__item {
  --flow-space: var(--highlights-item-space, var(--space-l));
  display: flex;
  align-items: start;
  justify-content: start;
  gap: var(--highlights-item-gap, var(--space-xs));
  counter-increment: highlights;
  font-weight: var(--highlights-item-font-weight, 400);
  text-align: var(--highlights-item-text-align, inherit);
  color: var(--highlights-item-color, var(--color-light));
}

.highlights__item::before {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--highlights-counter-background-color, var(--color-dark));
  content: counter(highlights);
  color: var(--highlights-counter-color, var(--color-light));
  font-family: var(--highlights-counter-font-family, var(--font-family-base));
  font-size: var(--highlights-counter-font-size, var(--size-step-4));
}

.highlights__item > * {
  --flow-space: var(--space-l);
  margin-inline: auto;
}

.highlights__item h3 {
  font-size: var(--highlights-heading-font-size, var(--size-step-2));
  line-height: var(--highlights-heading-leading, var(--leading-short, 1.2));
  font-family: var(--highlights-heading-font-family, var(--font-family-base));
  font-weight: var(--highlights-heading-font-weight, var(--font-weight-bold));
  /* Set .caps styles as default, but allow this to be adjusted in theme config */
  text-transform: var(--highlights-heading-text-transform, uppercase);
  text-shadow: var(--highlights-heading-shadow, none);
  letter-spacing: var(--highlights-heading-kerning, var(--caps-kerning));
  font-feature-settings: var(--highlights-heading-cpsp, var(--caps-cpsp));
  color: var(--highlights-heading-color, currentColor);
  margin-inline: auto;
}

.highlights__item__text {
  --flow-space: var(--space-m);
}

.highlights__item__text > * {
  --flow-space: var(--space-2xs);
}

.highlights__item__text p {
  font-size: var(--highlights-item-font-size, var(--size-step-0));
  line-height: var(--highlights-item-leading, var(--leading-short, 1.2));
  max-width: var(--measure);
  margin-inline: auto;
  text-wrap: pretty;
  text-align: var(--highlights-item-text-align, inherit);
}

.highlights h2 {
  font-size: var(--highlights-heading-size, var(--size-step-7));
}

.highlights__image img {
  margin-inline: auto;
}

.highlights .prose {
  font-size: var(--size-step-0);
}

@media (min-width: 66em) {
  .highlights__container {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto auto;
  }

  .highlights__items {
    grid-column: 1;
    grid-row: 1;
  }

  .highlights__image {
    grid-column: 2;
    grid-row: 1;
  }
}

.image-region {
  max-width: var(--image-region-cms-control-max-width, unset);
  margin-inline: var(--image-region-inline-margin, auto);
}

.image-region img {
  margin-inline: auto;
}

.image-region[data-scale='full'] img {
  width: 100%;
  height: auto;
}

.image-region[data-flush] {
  margin-block: -1px;
}

.in-page-nav {
  --flow-space: var(--in-page-nav-flow-space, var(--space-xl));

  text-align: var(--in-page-nav-text-align, center);
  background: var(--in-page-nav-bg, inherit);
  color: var(--in-page-nav-color, currentColor);
  border-bottom-color: var(--in-page-nav-border-bottom-color, currentColor);
  border-bottom-style: var(--in-page-nav-border-bottom-style, solid);
  border-bottom-width: var(--in-page-nav-border-bottom-width, 0);
}

.in-page-nav h2 {
  display: flex;
  justify-content: center;
  padding-block-end: var(--space-xl);
  color: var(--in-page-nav-item-heading-color, currentColor);
  font-size: var(--eyebrow-font-size, var(--size-step-0));
  line-height: var(--eyebrow-leading, var(--leading-short, 1.2));
  font-family: var(--eyebrow-font-family, var(--font-family-base));
  font-weight: var(--eyebrow-font-weight, var(--font-weight-bold));
  /* Set .caps styles as default, but allow this to be adjusted in theme config */
  text-transform: var(--eyebrow-text-transform, uppercase);
  letter-spacing: var(--eyebrow-kerning, var(--caps-kerning));
  font-feature-settings: var(--eyebrow-cpsp, var(--caps-cpsp));
  max-width: none;
}

.in-page-nav ul {
  list-style: none;
  margin: 0;
  padding-block: var(--in-page-nav-padding-block, 0);
  padding-inline: var(--in-page-nav-padding-inline, 0);
}

.in-page-nav li {
  margin: 0;
  padding: 0;
  border-top-width: var(--in-page-nav-item-border-width, var(--stroke-weight-heavy));
  border-color: var(--in-page-nav-item-border-color, currentColor);
  border-style: var(--in-page-nav-item-border-style, solid);
  border-bottom-width: 0;
  border-right-width: 0;
  border-left-width: 0;
  font-family: var(--in-page-nav-item-font-family, var(--font-family-display));
  font-weight: var(--in-page-nav-item-font-weight, var(--font-weight-display));
  font-size: var(--in-page-nav-item-font-size, var(--size-step-8));
  font-weight: var(--in-page-nav-item-font-weight, var(--font-weight-heading));
  line-height: var(--leading-flat);
  letter-spacing: var(--in-page-nav-item-letter-spacing, var(--kerning-heading));
  /* Set .caps styles as default, but allow this to be adjusted in theme config */
  text-transform: var(--eyebrow-text-transform, uppercase);
  letter-spacing: var(--eyebrow-kerning, var(--caps-kerning));
  font-feature-settings: var(--eyebrow-cpsp, var(--caps-cpsp));
}

.in-page-nav li:last-of-type {
  border-bottom-width: var(--in-page-nav-item-border-width, var(--stroke-weight-heavy));
}

.in-page-nav li a {
  color: currentColor;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  gap: var(--space-m);
  justify-content: center;
  align-items: center;
}

.in-page-nav li a:hover {
  color: currentColor;
  opacity: 0.8;
}

@media (min-width: 66em) {
  .in-page-nav ul {
    display: var(--in-page-nav-display-lg, block);
    justify-content: var(--in-page-nav-justify-lg, initial);
    gap: var(--in-page-nav-gap-lg, initial);
  }

  .in-page-nav li {
    font-size: var(--in-page-nav-item-font-size-lg, var(--size-step-8));
  }

  .in-page-nav li a {
    display: flex;
    flex-direction: row;
    justify-content: var(--in-page-nav-link-justify-lg, flex-start);
    padding-block: var(--in-page-nav-item-padding-block-lg, var(--space-xl));
  }

  .in-page-nav li:nth-child(2n) a {
    flex-direction: row-reverse;
  }
}

.in-page-nav img {
  max-width: 200px;
}

.in-page-nav a {
  text-decoration: none;
  display: flex;
  width: 100%;
  padding-block: var(--in-page-nav-item-padding-block, var(--space-xl));
}

.in-page-nav a:hover {
  color: var(--in-page-nav-item-hover-color, var(--color-primary));
}

.in-page-nav a span {
  transition: color 0.25s ease;
}

.key-customer-quotes {
  /* Keep quotes in this region monochromatic */
  --praise-star-rating-color: currentColor;
  --praise-foot-color: currentColor;
}

.region .key-customer-quotes {
  --region-space: 0;
}

.key-customer-quotes .wrapper {
  display: grid;
  grid-template-columns: repeat(var(--key-customer-quotes-grid-placement, auto-fit), minmax(var(--key-customer-quotes-grid-min-item-size, 16rem), 1fr));
  row-gap: var(--key-customer-quotes-row-gap, var(--space-xl));
  column-gap: var(--key-customer-quotes-column-gap, var(--space-xs));
}

.key-customer-quotes .praise {
  padding: 0;
}

.key-customer-quotes .praise__title {
  --praise-title-font-size: var(--key-customer-quotes-praise-title-font-size, var(--size-step-3));
  --praise-title-kerning: var(--kerning);
}

.people {
  --flow-space: var(--people-flow-space, var(--space-xl));

  text-align: var(--people-text-align, center);
  background: var(--people-bg, inherit);
  color: var(--people-color, inherit);
}

.people .image-based-list {
  list-style: none;
  padding: 0;
  text-align: left;
  column-gap: var(--people-grid-column-gap, var(--space-xs));
  row-gap: var(--people-grid-row-gap, var(--space-l));
}

.people__member {
  --flow-space: var(--space-xs);
}

.people__member a {
  text-decoration: none;
}

.people__member a:hover {
  text-decoration: underline;
}

.people__member p {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs, 0.25em);
}

.people__member a {
  font-size: var(--people-member-title-font-size, var(--size-step-0));
  line-height: var(--people-member-title-leading, var(--leading-short, 1.2));
  font-family: var(--people-member-title-font-family, var(--font-family-base));
  font-weight: var(--people-member-title-font-weight, var(--font-weight-bold));
  /* Set .caps styles as default, but allow this to be adjusted in theme config */
  text-transform: var(--people-member-title-text-transform, uppercase);
  letter-spacing: var(--people-member-title-kerning, var(--caps-kerning));
  font-feature-settings: var(--people-member-title-cpsp, var(--caps-cpsp));
}

.people__member p span {
  font-size: var(--people-member-role-font-size, var(--size-step--2));
  font-weight: var(--people-member-role-font-weight, var(--font-weight-base));
  text-transform: var(--people-member-role-transform, capitalize);
  color: var(--people-member-role-color, var(--people-color));
}

.people__category {
  padding-block-start: var(--credits-padding-block, var(--space-xl));
  border-top-width: var(--credits-border-top-width, var(--stroke-weight-heavy));
  border-color: var(--credits-border-color, currentColor);
  border-style: var(--credits-border-style, solid);
  border-bottom-width: 0;
  border-right-width: 0;
  border-left-width: 0;
}

.people__category[data-layout='credits'] + .people__category {
  padding-block-start: 0;
  border-top-width: 0;
}

.pre-sale {
  --pre-sale-calculated-background: var(--pre-sale-background, inherit);
  --pre-sale-calculated-color: var(--pre-sale-color, inherit);

  --subscribe-bg: var(--pre-sale-calculated-background);
  --subscribe-color: var(--pre-sale-calculated-color);

  background: var(--pre-sale-calculated-background);
  color: var(--pre-sale-calculated-color);
}

.pre-sale__complete {
  --flow-space: var(--space-l-xl);

  background: var(--pre-sale-complete-bg, var(--color-dark));
  color: var(--pre-sale-complete-color, var(--color-light));
  padding: var(--space-m) var(--gutter) var(--space-l-xl) var(--gutter);
}

.pre-sale__complete h3 {
  font-size: var(--pre-sale-complete-heading-size, var(--size-step-9));
}

.pre-sale-complete .sign-up-form {
  --flow-space: var(--space-m);
}

.press-logos {
  background: var(--press-logos-bg-color, none);
}

.press-logos__inner {
  padding: var(--press-logos-padding-block, var(--space-m)) var(--press-logos-padding-inline, var(--gutter));
  border-top-width: var(--press-logos-border-width, var(--stroke-weight-heavy));
  border-bottom-width: var(--press-logos-border-width, var(--stroke-weight-heavy));
  border-color: var(--press-logos-border-color, currentColor);
  border-style: var(--press-logos-border-style, solid);
  border-right-width: 0;
  border-left-width: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  gap: var(--press-logos-gutter-base, var(--space-s-m));
}

.press-logos img {
  width: clamp(90px, 20vw, 175px);
}

.press-logos svg, .press-logos svg * {
  fill: currentColor !important;
}

/* 
TODO:
Create exceptions that set an aspect ratio to handle square, portrait and landscape
(and match the class names and sizes to Figma artboards)
*/

@media (min-width: 40em) {
  .press-logos__inner {
    flex-wrap: nowrap;
  }
}

.press-quote {
  --star-rating-size: var(--press-quote-star-rating-size, 1lh);

  text-align: var(--press-quote-text-align, center);
  color: var(--press-quote-color, currentColor);
  margin-inline: auto;
  padding-inline: var(--press-quote-padding-inline, 0);
}

.region .press-quote {
  --region-space: 0;
}

.press-quote__title {
  display: var(--press-quote-title-display, block);
  font-family: var(--press-quote-title-font-family, var(--font-family-display));
  font-weight: var(--press-quote-title-font-weight, var(--font-weight-heading));
  font-size: var(--press-quote-title-font-size, inherit);
  line-height: var(--press-quote-title-line-height, var(--leading-heading));
  text-transform: var(--press-quote-title-text-transform, var(--text-transform-heading));
  letter-spacing: var(--press-quote-title-kerning, var(--kerning-heading));
  margin-inline: var(--press-quote-title-margin-inline, initial);
}

.press-quote__quote {
  padding-block-start: var(--press-quote-padding-block, var(--gutter));
  font-family: var(--press-quote-quote-font-family, var(--font-family-accent));
  font-weight: var(--press-quote-quote-font-weight, var(--font-weight-accent));
  font-size: var(--press-quote-quote-font-size, var(--size-step-4));
  line-height: var(--press-quote-quote-line-height, var(--leading-heading));
  text-transform: var(--press-quote-quote-text-transform, initial);
  letter-spacing: var(--press-quote-quote-kerning, 0);
  font-feature-settings: 'cpsp' var(--press-quote-quote-cpsp, off);
  color: var(--press-quote-quote-color, currentColor);
  border-top-width: var(--press-quote-border-width, var(--stroke-weight-heavy, 3px));
  border-top-color: var(--press-quote-border-color, currentColor);
  border-top-style: var(--press-quote-border-style, solid);
}

.press-quote__foot {
  --cluster-horizontal-alignment: center;
  --flow-space: var(--press-quote-flow-space, var(--space-2xs));

  flex-direction: column;
  width: var(--press-quote-foot-width, 100%);
  display: flex;
  justify-content: var(--press-quote-foot-horizontal-alignment, center);
  align-items: var(--press-quote-foot-vertical-alignment, center);
  gap: var(--press-quote-foot-gap, var(--space-2xs));
  margin: 0;
  padding-block-end: var(--press-quote-padding-block, var(--gutter));
  font-family: var(--press-quote-foot-font-family, var(--font-family-base));
  font-weight: var(--press-quote-foot-font-weight, var(--font-weight-base));
  font-style: var(--press-quote-foot-font-style, italic);
  font-size: var(--press-quote-foot-font-size, var(--size-step-0));
  line-height: var(--press-quote-foot-line-height, var(--leading-flat));
  text-transform: var(--press-quote-foot-text-transform, initial);
  letter-spacing: var(--press-quote-foot-kerning, 0);
  font-feature-settings: 'cpsp' var(--press-quote-foot-cpsp, off);
  color: var(--press-quote-foot-color);
  border-bottom-width: var(--press-quote-border-width, var(--stroke-weight-heavy, 3px));
  border-bottom-color: var(--press-quote-border-color, currentColor);
  border-bottom-style: var(--press-quote-border-style, solid);
}

.press-quote__foot a {
  color: currentColor;
  text-decoration: none;
}

.press-quote q::before,
.press-quote q::after {
  display: none;
}

.press-quote .star-rating {
  --blockquote-space: var(--press-quote-star-rating-space, var(--space-s));

  color: var(--press-quote-star-rating-color, var(--star-rating-color, currentColor));
}

/* Variants */

.press-quote[data-variant='small'] {
  --blockquote-space: var(--press-quote-small-variant-blockquote-space, var(--space-2xs));
}

.press-quote[data-variant='small'] .press-quote__content {
  --blockquote-space: var(--press-quote-small-variant-content-space, var(--space-2xs));
}

.press-quote[data-variant='small'] .press-quote__foot {
  --blockquote-space: var(--press-quote-small-variant-author-space, var(--space-2xs));

  --press-quote-foot-font-size: var(--size-step--3);
}

.press-quote[data-variant='small'] .star-rating {
  --star-rating-size: var(--press-quote-small-variant-star-rating-size, 0.5lh);
}

.product-details {
  --calculated-spot-color: var(--product-details-spot-color, currentColor);
  --dt-color: var(--calculated-spot-color);
  --flow-space: var(--space-xl);

  background: var(--product-details-background, inherit);
  color: var(--product-details-color, currentColor);
  text-align: center;
}

.product-details__item {
  --flow-space: var(--product-details-item-space, var(--space-l));
}

.product-details__item > * {
  --flow-space: var(--space-l);
}

.product-details__item > * {
  margin-inline: auto;
}

.product-details__item h3 {
  font-size: var(--product-details-item-heading-font-size, var(--eyebrow-font-size, var(--size-step-0)));
  line-height: var(--eyebrow-leading, var(--leading-short, 1.2));
  font-family: var(--product-details-item-heading-font-family, var(--eyebrow-font-family, var(--font-family-base)));
  font-weight: var(--product-details-item-heading-font-weight, var(--eyebrow-font-weight, var(--font-weight-bold)));
  /* Set .caps styles as default, but allow this to be adjusted in theme config */
  text-transform: var(--eyebrow-text-transform, uppercase);
  letter-spacing: var(--eyebrow-kerning, var(--caps-kerning));
  font-feature-settings: var(--eyebrow-cpsp, var(--caps-cpsp));
  color: var(--product-details-item-color, currentColor);
  margin-inline: auto;
}

.product-details__item__text {
  --flow-space: var(--space-m);
}

.product-details__item__text > * {
  --flow-space: var(--space-2xs);
}

.product-details__features {
  --flow-space: var(--space-m);
}

.product-details h2 {
  font-size: var(--product-details-heading-size, var(--size-step-7));
}

.product-details p {
  max-width: var(--measure);
  margin-inline: auto;
  text-wrap: pretty;
}

.product-details__image img {
  margin-inline: auto;
}

.product-details .prose {
  font-size: var(--product-details-item-font-size, var(--size-step-0));
}

.profile {
  --sidebar-target-width: 24rem;
}

.profile .sidebar {
  gap: var(--profile-gutter, var(--space-l));
}

.profile h1 {
  font-size: var(--profile-heading-font-size, var(--size-step-6));
  max-width: none;
}

.profile__pronouns {
  font-size: var(--profile-pronouns-font-size, var(--size-step--2));
}

.profile__title {
  --cluster-vertical-alignment: baseline;

  /* TODO: Remove !important once .cluster has been updated with over-rideable token value for gap */
  gap: var(--space-3xs) !important;
}

.profile__role {
  font-size: var(--eyebrow-font-size, var(--size-step-0));
  line-height: var(--eyebrow-leading, var(--leading-short, 1.2));
  font-family: var(--eyebrow-font-family, var(--font-family-base));
  font-weight: var(--eyebrow-font-weight, var(--font-weight-bold));
  /* Set .caps styles as default, but allow this to be adjusted in theme config */
  text-transform: var(--eyebrow-text-transform, uppercase);
  letter-spacing: var(--eyebrow-kerning, var(--caps-kerning));
  font-feature-settings: var(--eyebrow-cpsp, var(--caps-cpsp));
}

.profile__bio {
  max-width: var(--measure);
}

:is(.profile__bio, .profile__role) {
  margin-block-end: var(--space-xl);
}

.sign-up {
  text-align: var(--sign-up-text-align, center);
  background: var(--sign-up-bg, inherit);
  color: var(--sign-up-color, inherit);
}

.sign-up .flow {
  --flow-space: var(--space-2xs);
}

.sign-up__title {
  --flow-space: var(--space-xs);

  font-size: var(--size-step-7);
  text-wrap: balance;
  overflow-wrap: anywhere;
  margin-inline: auto;

  /* All of this matches the global styles for headings. Semantically, we can't have 
     stacked headings, so if there is a title prefix element, this will be a paragraph 
     element */
  line-height: var(--leading-heading, var(--leading-fine));
  font-family: var(--font-family-display, var(--font-family-display));
  font-weight: var(--font-weight-heading, 700);
  letter-spacing: var(--kerning-heading, var(--kerning-tight));
  text-transform: var(--text-transform-heading);
}

.sign-up .praise {
  padding-block-end: 0;
  text-align: inherit;
}

.sign-up__form {
  --sign-up-form-button-bg: var(--sign-up-sign-up-form-button-bg, var(--button-solid-button-bg));
  --flow-space: var(--space-l);
}

/* Variants */

.sign-up[data-variant='alt'] {
  background: var(--sign-up-alt-variant-bg, var(--color-primary));
  color: var(--sign-up-alt-variant-color, currentColor);
}

.sign-up[data-variant='alt'] :is(.sign-up-form input, .sign-up-form label) {
  color: var(--sign-up-alt-variant-sign-up-form-text-colour, currentColor);
}

.sign-up[data-variant='alt'] .sign-up-form input::placeholder {
  color: var(--sign-up-alt-variant-sign-up-form-placeholder-colour, var(--color-dark-glare));
}

.sign-up[data-variant='alt'] .star-rating {
  color: var(--sign-up-alt-variant-star-rating-colour, currentColor);
}

.sign-up[data-variant='alt'] .praise__foot {
  color: var(--sign-up-alt-variant-praise-foot-colour, currentColor);
}

.social-proof {
  text-align: center;
}

.social-proof__heading {
  --flow-space: var(--social-proof-heading-space, var(--space-m));
  font-size: var(--social-proof-heading-size, var(--size-step-7));
}

.social-proof__opening-praise {
  --flow-space: var(--social-proof-opening-praise-space, var(--space-l-xl));
  --praise-star-rating-size: 0.8lh;
  --praise-star-rating-color: var(--social-proof-opening-praise-star-rating-color, var(--star-rating-color));
}

.social-proof__gallery {
  --flow-space: var(--social-proof-gallery-space, var(--space-l-xl));
}

.social-proof__cta {
  --flow-space: var(--social-proof-cta-space, var(--space-xl-2xl));
}

.social-proof__closing-praise {
  --flow-space: var(--social-proof-closing-praise-space, var(--space-s-m));
  --praise-text-align: center;
}

.ticket-availability {
  --flow-space: var(--ticket-availability-flow-space, var(--space-xl));

  text-align: var(--ticket-availability-text-align, center);
  background: var(--ticket-availability-bg, inherit);
  color: var(--ticket-availability-color, inherit);
  padding-block-start: var(--ticket-availability-header-padding--block-start, var(--ticket-availability-header-padding, 0));
  padding-block-end: var(--ticket-availability-header-padding-block-end, var(--ticket-availability-header-padding, 0));
  border-top-width: var(--ticket-availability-header-border-top-width, 0);
  border-bottom-width: var(--ticket-availability-header-border-bottom-width, 0);
  border-color: var(--ticket-availability-header-border-color, currentColor);
  border-style: var(--ticket-availability-header-border-style, solid);
  border-right-width: 0;
  border-left-width: 0;
}

.ticket-availability .availability-slot {
  height: 100%;
}

.ticket-availability .prose {
  --flow-space: var(--space-s);

  text-wrap: balance;
}

.ticket-availability .prose > p:first-child {
  font-size: var(--text-size-lede);
}

.ticket-availability__header h2 {
  /* This should match eyebrow heading font size */
  font-size: var(--eyebrow-display-heading-size, var(--size-step-7));
}

@media (min-width: 40em) {
  .ticket-availability .prose dl {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: center;
  }

  .ticket-availability .prose :is(dt, dd) {
    margin: 0;
    padding: 0;
  }

  .ticket-availability .prose dd {
    margin-inline-start: var(--space-2xs);
  }

  .ticket-availability .prose dd + dt {
    margin-inline-start: var(--space-l);
  }
}

.ticket-availability .reel {
  --reel-space: var(--ticket-availability-reel-space, 2rem);
  --reel-item-width: var(--ticket-availability-reel-item-width, clamp(18rem, calc(40% - var(--reel-space)), 40rem));

  padding: var(--ticket-availability-reel-padding, 0 0 var(--space-xl) 0);
}

.ticket-availability .reel::-webkit-scrollbar {
  block-size: var(--ticket-availability-reel-scrollbar-size, 0.75rem);
}

.ticket-availability .reel::-webkit-scrollbar-track {
  background-color: var(--ticket-availability-reel-scrollbar-track-color, var(--scroll-bar-track-color));
}

.ticket-availability .reel::-webkit-scrollbar-thumb {
  background-color: var(--ticket-availability-reel-scrollbar-thumb-color, var(--scroll-bar-thumb-color));
}

.ticket-availability__buttons {
  --cluster-horizontal-alignment: center;
}

/* If it's a single item, center it */

.ticket-availability .reel:has(> :only-child) {
  justify-content: center;
}

@media (min-width: 66em) {
  /* If there are 2 items or less, move them all to the center */
  .ticket-availability .reel:has(> :last-child:nth-child(-n + 2)) {
    justify-content: center;
  }
}

.ticket-types {
  --flow-space: var(--ticket-types-flow-space, var(--space-xl));

  text-align: var(--ticket-types-text-align, center);
  background: var(--ticket-types-bg, inherit);
  color: var(--ticket-types-color, inherit);
}

.ticket-types__header {
  --flow-space: var(--ticket-types-header-flow-space, var(--space-3xl));

  padding-block-start: var(--ticket-types-header-padding--block-start, var(--ticket-types-header-padding, 0));
  padding-block-end: var(--ticket-types-header-padding-block-end, var(--ticket-types-header-padding, 0));
  border-top-width: var(--ticket-types-header-border-top-width, 0);
  border-bottom-width: var(--ticket-types-header-border-bottom-width, 0);
  border-color: var(--ticket-types-header-border-color, currentColor);
  border-style: var(--ticket-types-header-border-style, solid);
  border-right-width: 0;
  border-left-width: 0;
}

.ticket-types__header .prose {
  --flow-space: var(--space-s);

  text-wrap: balance;
}

.ticket-types__header h3 {
  /* This should match eyebrow heading font size */
  font-size: var(--eyebrow-display-heading-size, var(--size-step-7));
}

.ticket-types__header .prose > p:first-child {
  font-size: var(--text-size-lede);
}

.ticket-types__items > * {
  --flow-space: var(--ticket-types-items-flow-space, var(--gutter));
}

.tiles .switcher {
  gap: var(--tiles-grid-grap, var(--gutter));
}

.tile {
  color: var(--tile-color, currentColor);
  background: var(--tile-bg, none);
  padding-block-start: var(--tile-padding-block-start, var(--tile-padding, var(--space-m)));
  padding-block-end: var(--tile-padding-block-end, var(--tile-padding, var(--space-m)));
  padding-inline-start: var(--tile-padding-inline-start, var(--tile-padding, 0));
  padding-inline-end: var(--tile-padding-inline-end, var(--tile-padding, 0));
  border-top-width: var(--tile-border-top-width, var(--stroke-weight-heavy));
  border-bottom-width: var(--tile-border-bottom-width, var(--stroke-weight-heavy));
  border-right-width: var(--tile-border-right-width, 0);
  border-left-width: var(--tile-border-left-width, 0);
  border-color: var(--tile-border-color, currentColor);
  border-radius: var(--tile-radius, 0);
  border-style: var(--tile-border-style, solid);
  text-decoration: none;
  overflow: var(--tile-overflow, initial);
}

.tile[href]:hover {
  filter: brightness(110%);
}

.tile .flow {
  --flow-space: var(--tile-flow-space, var(--space-m));
}

.tile__image-wrapper {
  position: relative;
  z-index: 1;
}

.tile__hover-image {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  transition: opacity 0.3s ease-out;
}

.tile:hover .tile__hover-image {
  opacity: 1;
  transition: opacity 0.3s ease-in;
}

.tile__content {
  background-color: var(--tile-content-background-color, transparent);
  color: var(--tile-content-color, currentColor);
  padding-block: var(--tile-content-padding-block, var(--flow-space));
  padding-inline: var(--tile-content-padding-inline, 0);
}

.tile__title {
  font-family: var(--tile-title-font-family, var(--font-family-display));
  font-size: var(--tile-title-font-size, var(--size-step-2));
  font-weight: var(--tile-title-font-weight, var(--font-weight-heading));
  text-transform: var(--tile-title-text-transform, var(--text-transform-heading));
}

.tile__body {
  --flow-space: var(--space-2xs);

  font-family: var(--tile-body-font-family, var(--font-family-base));
  font-size: var(--tile-body-font-size, var(--size-step--1));
}

.tripadvisor {
  --flow-space: var(--tripadvisor-flow-space, var(--space-xl));

  text-align: var(--tripadvisor-text-align, center);
  background: var(--tripadvisor-bg, var(--color-primary));
  color: var(--tripadvisor-color, var(--color-dark));
}

.tripadvisor__header {
  --flow-space: var(--tripadvisor-header-flow-space, var(--space-m));

  padding-block-start: var(--tripadvisor-header-padding--block-start, var(--tripadvisor-header-padding, 0));
  padding-block-end: var(--tripadvisor-header-padding-block-end, var(--tripadvisor-header-padding, 0));
  border-top-width: var(--tripadvisor-header-border-top-width, 0);
  border-bottom-width: var(--tripadvisor-header-border-bottom-width, 0);
  border-color: var(--tripadvisor-header-border-color, currentColor);
  border-style: var(--tripadvisor-header-border-style, solid);
  border-right-width: 0;
  border-left-width: 0;
}

.tripadvisor__header .prose {
  --flow-space: var(--space-s);

  text-wrap: balance;
}

.tripadvisor__header h2 {
  /* This should match eyebrow heading font size */
  font-size: var(--eyebrow-display-heading-size, var(--size-step-7));
}

.tripadvisor__header .prose > p:first-child {
  font-size: var(--text-size-lede);
}

.tripadvisor__review {
  --flow-space: var(--space-m);
  --praise-star-rating-color: var(--tripadvisor-praise-star-rating-color, var(--color-primary-deep));
  --praise-foot-color: var(--tripadvisor-praise-foot-color, var(--color-dark));
}

.tripadvisor img {
  margin-inline: auto;
}

.tripadvisor .praise {
  max-width: 70ch;
  margin-inline: auto;
}

.trust-signals {
  --flow-space: var(--space-xl);
}

.trust-signals .star-rating {
  --praise-star-rating-color: var(--trust-signals-star-rating-color, currentColor);
}

.video {
  --flow-space: var(--video-flow-space, var(--space-xl));

  text-align: var(--video-text-align, center);
  background: var(--video-bg, inherit);
  color: var(--video-color, inherit);
}

.video__container {
  max-width: var(--video-region-cms-control-max-width, unset);
  margin-inline: var(--video-region-inline-margin, auto);
}

.video__header {
  --flow-space: var(--video-header-flow-space, var(--space-s));

  padding-block-start: var(--video-header-padding--block-start, var(--video-header-padding, var(--space-m)));
  padding-block-end: var(--video-header-padding-block-end, var(--video-header-padding, var(--space-m)));
  border-top-width: var(--video-header-border-top-width, var(--stroke-weight-heavy));
  border-bottom-width: var(--video-header-border-bottom-width, var(--stroke-weight-heavy));
  border-color: var(--video-header-border-color, currentColor);
  border-style: var(--video-header-border-style, solid);
  border-right-width: 0;
  border-left-width: 0;
  text-align: var(--video-header-text-align, center);
}

.video__prose > * {
  --flow-space: var(--video-prose-flow-space, var(--space-s));

  margin-inline: auto;
}

.video__title {
  --flow-space: var(--space-xs);

  text-wrap: balance;
  overflow-wrap: anywhere;
  margin-inline: auto;

  /* All of this matches the global styles for headings. Semantically, we can't have 
     stacked headings, so if there is a title prefix element, this will be a paragraph 
     element */
  line-height: var(--leading-heading, var(--leading-fine));
  font-family: var(--video-title-font-family, var(--font-family-display));
  font-size: var(--video-title-font-size, var(--size-step-7));
  font-weight: var(--video-title-font-weight, 700);
  letter-spacing: var(--kerning-heading, var(--kerning-tight));
  max-width: var(--video-title-measure, 25ch);
  text-transform: var(--text-transform-heading);
}

.video__body:not([data-full-width])::not([data-portrait-full-width]) {
  margin-inline: auto;
  max-width: var(--wrapper-max-width);
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  position: relative; 
}

@media (min-width: 40em) {
  .video__body:not([data-full-width]) {
    margin-inline: auto;
    max-width: var(--wrapper-max-width);
    padding-left: var(--gutter);
    padding-right: var(--gutter);
    position: relative; 
  }
}

.wall-of-love {
  --flow-space: var(--wall-of-love-flow-space, var(--space-xl));
  --wall-of-love-calculated-gutters: var(--reel-space, var(--space-2xs));

  text-align: var(--wall-of-love-text-align, center);
}

.wall-of-love__header {
  --flow-space: var(--wall-of-love-header-flow-space, var(--space-s));

  padding-block-start: var(--wall-of-love-header-padding--block-start, var(--wall-of-love-header-padding, 0));
  padding-block-end: var(--wall-of-love-header-padding-block-end, var(--wall-of-love-header-padding, 0));
  border-top-width: var(--wall-of-love-header-border-top-width, 0);
  border-bottom-width: var(--wall-of-love-header-border-bottom-width, 0);
  border-color: var(--wall-of-love-header-border-color, currentColor);
  border-style: var(--wall-of-love-header-border-style, solid);
  border-right-width: 0;
  border-left-width: 0;
}

/* REFACTOR: determine text align with style query before pushing everything into the center */

.wall-of-love > * {
  margin-inline: auto;
}

.wall-of-love .reel[data-scroll='snap'] > * {
  scroll-snap-align: unset;
}

/* Wall of love is in groups so we need to make the scroll snap apply to their items */

.wall-of-love .reel[data-scroll='snap'] > * > * {
  scroll-snap-align: start;
}

/* This is a column in the "masonry" / reel layout */

.wall-of-love__group {
  display: flex;
  flex-shrink: 0;
  gap: var(--wall-of-love-calculated-gutters);
  justify-content: var(--wall-of-love-group-justify-content, flex-start);
}

.wall-of-love__group .praise {
  height: 100%;
}

.wall-of-love__tile {
  width: var(--wall-of-love-reel-tile-size, 16rem);
  border-radius: var(--wall-of-love-tile-radius, none);
  border-color: var(--wall-of-love-tile-border-color, var(--color-light));
  border-width: var(--wall-of-love-tile-border-width, var(--stroke-weight-light));
  border-style: var(--wall-of-love-tile-border-style, var(--stroke-style));
  background: var(--wall-of-love-reel-tile-background, none);
}

.wall-of-love__tile .praise {
  --praise-color: var(--wall-of-love-praise-color, currentColor);
  --color-selection-text: var(--wall-of-love-praise-selection-text);
  --color-selection-bg: var(--wall-of-love-praise-selection-bg);
  --praise-padding-block: var(--wall-of-love-praise-padding-block, var(--space-s));
  --praise-padding-inline: var(--wall-of-love-praise-padding-inline, var(--space-s));
}

@media (min-width: 66em) {
  .wall-of-love__groups {
    display: var(--wall-of-love-groups-lg-display, block);
    flex-wrap: var(--wall-of-love-groups-lg-flex-wrap, nowrap);
  }

  .wall-of-love__groups.reel {
    overflow-x: visible;
    display: grid;
    grid-template-columns: var(--wall-of-love-groups-reel-lg-columns, repeat(4, 1fr));
    gap: var(--wall-of-love-calculated-gutters);
    padding-block-end: 0;
  }

  .wall-of-love__groups.reel > * + * {
    /* Removes what reel adds to each item */
    margin-inline-start: 0;
  }

  .wall-of-love__group {
    flex-direction: var(--wall-of-love-group-lg-direction, column);
    width: var(--wall-of-love-group-lg-width, auto);
  }

  .wall-of-love__groups.reel .wall-of-love__group {
    width: var(--wall-of-love-group-reel-lg-width, auto);
  }

  .wall-of-love__tile {
    width: var(--wall-of-love-tile-reel-lg-size, unset);
  }
}

.word-fade[data-align='left'] {
    text-align: left;
}

.word-fade[data-align='right'] {
    text-align: right;
}

.word-fade[data-align='center'] {
    text-align: center;
}

/*
CLUSTER
More info: https://every-layout.dev/layouts/cluster/
A layout that lets you distribute items with consitent
spacing, regardless of their size

CUSTOM PROPERTIES AND CONFIGURATION
 --gutter (var(--space-s-m)): This defines the space
between each item.

--cluster-horizontal-alignment (flex-start) How items should align
horizontally. Can be any acceptable flexbox aligmnent value.

--cluster-vertical-alignment How items should align vertically.
Can be any acceptable flexbox alignment value.
*/

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gutter, var(--space-s-m));
  justify-content: var(--cluster-horizontal-alignment, flex-start);
  align-items: var(--cluster-vertical-alignment, center);
}

/* 
FLOW COMPOSITION 
Like the Every Layout stack: https://every-layout.dev/layouts/stack/
Info about this implementation: https://piccalil.li/quick-tip/flow-utility/ 
*/

.flow > * + * {
  margin-block-start: var(--flow-space, 1em);
}

/* AUTO GRID
Related Every Layout: https://every-layout.dev/layouts/grid/
More info on the flexible nature: https://piccalil.li/tutorial/create-a-responsive-grid-layout-with-no-media-queries-using-css-grid/
A flexible layout that will create an auto-fill grid with
configurable grid item sizes

CUSTOM PROPERTIES AND CONFIGURATION
 --gutter (var(--space-s-m)): This defines the space
between each item.

--grid-min-item-size (14rem): How large each item should be
ideally, as a minimum.

--grid-placement (auto-fill): Set either auto-fit or auto-fill
to change how empty grid tracks are handled */

.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-placement, auto-fill), minmax(var(--grid-min-item-size, 16rem), 1fr));
  gap: var(--gutter, var(--space-s-l));
}

/* A split 50/50 layout */

.grid[data-layout='halves'] {
  --grid-placement: auto-fit;
  --grid-min-item-size: clamp(16rem, 50vw, 33rem);
}

/* Three column grid layout */

.grid[data-layout='thirds'] {
  --grid-placement: auto-fit;
  --grid-min-item-size: clamp(16rem, 33%, 20rem);
}

/* Four column grid layout */

.grid[data-layout='quarters'] {
  --grid-placement: auto-fit;
  --grid-min-item-size: clamp(10rem, 25%, 16rem);
}

/* Five column grid layout */

.grid[data-layout='fifths'] {
  --grid-placement: auto-fit;
  --grid-min-item-size: clamp(8rem, 20%, 14rem);
}

/* 
 REEL
 A layout that creates a carousel-like element


 CONFIGURATION
 Add an attribute of data-scroll="snap" to the element
 to enable scroll snapping
*/

.reel {
  --reel-calculated-space: var(--reel-space, var(--gutter, 2rem));
  display: flex;
  align-items: var(--reel-align-items, normal);
  height: auto;
  max-width: 100%;
  margin-inline: auto;

  /* Padding allows child element hover states to show */
  padding: 0 0 var(--scroll-bar-offset) 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.reel > * {
  flex-basis: var(--reel-item-width, calc(33.333% - var(--reel-calculated-space)));
  flex-shrink: 0;
}

.reel > * + * {
  margin-inline-start: var(--reel-calculated-space);
}

.reel::-webkit-scrollbar {
  block-size: var(--scroll-bar-size);
}

.reel::-webkit-scrollbar-track {
  background-color: var(--scroll-bar-track-color);
}

.reel::-webkit-scrollbar-thumb {
  background-color: var(--scroll-bar-thumb-color);
}

/* SCROLL TYPE EXCEPTION
   Sets the reel to snap on each item on scroll */

.reel[data-scroll='snap'] {
  scroll-snap-type: x mandatory;
}

.reel[data-scroll='snap'] > * {
  scroll-snap-align: start;
}

/*
REPEL
A little layout that pushes items away from each other where
there is space in the viewport and stacks on small viewports

CUSTOM PROPERTIES AND CONFIGURATION
 --gutter (var(--space-s-m)): This defines the space
between each item.

--repel-vertical-alignment How items should align vertically.
Can be any acceptable flexbox alignment value.
*/

.repel {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: var(--repel-vertical-alignment, center);
  gap: var(--gutter, var(--space-s-m));
}

.repel[data-nowrap] {
  flex-wrap: nowrap;
}

/* 
SIDEBAR
More info: https://every-layout.dev/layouts/sidebar/
A layout that allows you to have a flexible main content area
and a "fixed" width sidebar that sits on the left or right.
If there is not enough viewport space to fit both the sidebar
width *and* the main content minimum width, they will stack
on top of each other

CUSTOM PROPERTIES AND CONFIGURATION
 --gutter (var(--space-size-1)): This defines the space
between the sidebar and main content.

--sidebar-target-width (20rem): How large the sidebar should be

--sidebar-content-min-width(50%): The minimum size of the main content area

EXCEPTIONS
.sidebar[data-direction='rtl']: flips the sidebar to be on the right 
*/

.sidebar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sidebar-gutter-width, var(--gutter, var(--space-s-l)));
}

.sidebar:not([data-direction]) > :first-child {
  flex-basis: var(--sidebar-target-width, 20rem);
  flex-grow: 1;
}

.sidebar:not([data-direction]) > :last-child {
  flex-basis: 0;
  flex-grow: 999;
  min-width: var(--sidebar-content-min-width, 50%);
}

.sidebar[data-reversed] {
  flex-direction: row-reverse;
}

.sidebar[data-direction='rtl'] > :last-child {
  flex-basis: var(--sidebar-target-width, 20rem);
  flex-grow: 1;
}

.sidebar[data-direction='rtl'] > :first-child {
  flex-basis: 0;
  flex-grow: 999;
  min-width: var(--sidebar-content-min-width, 50%);
}

/*
SWITCHER
More info: https://every-layout.dev/layouts/switcher/
A layout that allows you to lay **2** items next to each other
until there is not enough horizontal space to allow that.

CUSTOM PROPERTIES AND CONFIGURATION
 --gutter (var(--space-size-1)): This defines the space
between each item

--switcher-target-container-width (40rem): How large the container
needs to be to allow items to sit inline with each other

--switcher-vertical-alignment How items should align vertically.
Can be any acceptable flexbox alignment value.
*/

.switcher {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gutter, var(--space-s-l));
  align-items: var(--switcher-vertical-alignment, flex-start);
}

.switcher > * {
  flex-grow: 1;
  flex-basis: calc((var(--switcher-target-container-width, 40rem) - 100%) * 999);
}

/* Max 2 items,
so anything greater than 2 is full width */

.switcher > :nth-child(n + 3) {
  flex-basis: 100%;
}

/*
WRAPPER COMPOSITION 
A common wrapper/container
*/

.wrapper {
  margin-inline: auto;
  max-width: var(--wrapper-max-width);
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  position: relative;
}

.wrapper[data-wrapper-type='small'] {
  max-width: var(--small-wrapper-max-width, var(--wrapper-max-width));
}

.wrapper[data-wrapper-type='narrow'] {
  max-width: var(--narrow-wrapper-max-width, var(--wrapper-max-width));
}

.wrapper[data-wrapper-type='wide'] {
  max-width: var(--wide-wrapper-max-width, var(--wrapper-max-width));
}

.wrapper[data-wrapper-type='full'] {
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}

.wrapper > .wrapper {
  padding-inline: 0;
}

.bg-dark {
  background: var(--color-dark);
}

.bg-dark-glare {
  background: var(--color-dark-glare);
}

.bg-light {
  background: var(--color-light);
}

.bg-mid {
  background: var(--color-mid);
}

.bg-mid-shade {
  background: var(--color-mid-shade);
}

.bg-mid-dark {
  background: var(--color-mid-dark);
}

.bg-primary {
  background: var(--color-primary);
}

.bg-primary-shade {
  background: var(--color-primary-glare);
}

.bg-primary-deep {
  background: var(--color-primary-shade);
}

.bg-secondary {
  background: var(--color-secondary);
}

.bg-secondary-glare {
  background: var(--color-secondary-glare);
}

/*
BOLD
Applies bold styling with customisable font weight

CUSTOM PROPERTIES AND CONFIGURATION
1. Config properties should be set with 'default theme' values in default-theme.css
2. Default styles should be overridden via theme.css for custom themes
*/

.bold {
  font-weight: var(--font-weight-bold, bold);
}

/*
CAPS
Applies uppercase typesetting with customisable kerning and spacing

CUSTOM PROPERTIES AND CONFIGURATION
1. Config properties should be set with 'default theme' values in default-theme.css
2. Default styles should be overridden via theme.css for custom themes
*/

.caps {
  text-transform: uppercase;
  letter-spacing: var(--caps-kerning, var(--kerning-loose, 0.04em));
  font-feature-settings: 'cpsp' var(--caps-cpsp, on);
}

.flow-space-3xs {
  --flow-space: var(--space-3xs);
}

.flow-space-2xs {
  --flow-space: var(--space-2xs);
}

.flow-space-xs {
  --flow-space: var(--space-xs);
}

.flow-space-s {
  --flow-space: var(--space-s);
}

.flow-space-m {
  --flow-space: var(--space-m);
}

.flow-space-l {
  --flow-space: var(--space-l);
}

.flow-space-xl {
  --flow-space: var(--space-xl);
}

.flow-space-2xl {
  --flow-space: var(--space-2xl);
}

.flow-space-3xl {
  --flow-space: var(--space-3xl);
}

.flow-space-3xs-2xs {
  --flow-space: var(--space-3xs-2xs);
}

.flow-space-2xs-xs {
  --flow-space: var(--space-2xs-xs);
}

.flow-space-xs-s {
  --flow-space: var(--space-xs-s);
}

.flow-space-s-m {
  --flow-space: var(--space-s-m);
}

.flow-space-m-l {
  --flow-space: var(--space-m-l);
}

.flow-space-l-xl {
  --flow-space: var(--space-l-xl);
}

.flow-space-xl-2xl {
  --flow-space: var(--space-xl-2xl);
}

.flow-space-2xl-3xl {
  --flow-space: var(--space-2xl-3xl);
}

/*
FLUSH
Removes padding from top and/or bottom of an element
*/

.flush-top {
  padding-block-start: 0 !important;
}

.flush-bottom {
  padding-block-start: 0 !important;
}

.flush {
  padding-block: 0 !important;
}

.text-step--2 {
  font-size: var(--size-step--2);
}

.text-step--1 {
  font-size: var(--size-step--1);
}

.text-step-0 {
  font-size: var(--size-step-0);
}

.text-step-1 {
  font-size: var(--size-step-1);
}

.text-step-2 {
  font-size: var(--size-step-2);
}

.text-step-3 {
  font-size: var(--size-step-3);
}

.text-step-4 {
  font-size: var(--size-step-4);
}

.text-step-5 {
  font-size: var(--size-step-5);
}

.text-step-6 {
  font-size: var(--size-step-6);
}

.text-step-7 {
  font-size: var(--size-step-7);
}

.text-step-8 {
  font-size: var(--size-step-8);
}

.text-step-9 {
  font-size: var(--size-step-9);
}

.text-step-10 {
  font-size: var(--size-step-10);
}

/*
FONT
Applies grouped styles to switch between the three font families:
1. base
2. accent
3. display

CUSTOM PROPERTIES AND CONFIGURATION
1. Config properties should be set with 'default theme' values in default-theme.css
2. Default styles should be overridden via theme.css for custom themes for custom themes
*/

.font-base {
  font-family: var(--font-family-base, sans-serif);
  font-weight: var(--font-weight-base, 400);
  font-style: var(--font-style-base, normal);
}

.font-accent {
  font-family: var(--font-family-accent, sans-serif);
  font-weight: var(--font-weight-accent, 400);
  font-style: var(--font-style-accent, normal);
}

.font-display {
  font-family: var(--font-family-display, sans-serif);
  font-weight: var(--font-weight-display, 700);
  font-style: var(--font-style-display, normal);
}

.frame {
  position: relative;
}

.frame::before,
.frame::after {
  content: '';
  display: block;
  width: var(--frame-border-thickness, var(--space-3xs, 6px));
  height: 100%;
  background: var(--frame-border-color, currentColor);
  position: absolute;
  top: 0;
}

.frame::before {
  left: 0;
}

.frame::after {
  right: 0;
}

/* Variants */

.frame[data-variant='block'] img {
  padding-block: var(--space-s);
  border-block: var(--frame-border-thickness, var(--space-3xs, 6px)) solid var(--frame-border-color, currentColor);
}

.frame[data-variant='block']::before,
.frame[data-variant='block']::after {
  display: none;
}

/*
LEDE
Applies lede paragraph styling with customisable kerning and spacing

CUSTOM PROPERTIES AND CONFIGURATION
1. Config properties should be set with 'default theme' values in default-theme.css
2. Default styles should be overridden via theme.css for custom themes
*/

.lede {
  font-size: var(--text-size-lede, var(--size-step-0));

  /* Unset any styles that may be applied by the .caps utility, just in case! */
  text-transform: initial !important;
  letter-spacing: 0 !important;
  font-feature-settings: 'cpsp' off !important;
}

/*
BREAKPOINT OVERRIDES
Do not set fallback values or 'default theme' values for utility style overrides within media queries
This allows these overrides to be ignored unless required in a theme
*/

@media (min-width: 66em) {
  .lede {
    font-size: var(--text-size-lede-lg);
  }
}

.region-group {
  position: relative;
}

.region-group__media {
  position: absolute;
  width: 100%;
  height: 100%;
}

.region-group__media .video-player {
  position: absolute;
  width: 100%;
  height: 100%;
}

.region-group__media :is(img, video) {
  width: 100%;
  height: 100%;
  display: block;
}

.region-group__media[data-fit=cover] :is(img, video) {
  object-fit: cover;
}

.region-group__media[data-fit=contain] :is(img, video) {
  object-fit: contain;
}

.region-group__media[data-position=top] :is(img, video) {
  object-position: center top;
}

.region-group__media[data-position=center] :is(img, video) {
  object-position: center center;
}

.region-group__media[data-position=bottom] :is(img, video) {
  object-position: center bottom;
}

/* Variants */

.region-group[data-background='dark'] {
  background-color: var(--color-dark);
}

.region-group[data-background='light'] {
  background-color: var(--color-light);
}

.region-group[data-background='primary'] {
  background-color: var(--color-primary);
}

.region-group[data-background='secondary'] {
  background-color: var(--color-secondary);
}

.region-group .region .wrapper {
  max-width: 100%;
}

/* 
REGION UTILITY
Consistent block padding for page sections
*/

.region {
  padding-block-start: var(--region-space);
  padding-block-end: var(--region-space);
}

/* Variants */

.region[data-flush='all'] {
  padding-block-start: 0;
  padding-block-end: 0;
}

.region[data-flush='top'] {
  padding-block-start: 0;
}

.region[data-flush='bottom'] {
  padding-block-end: 0;
}

.region[data-background='dark'] {
  background-color: var(--color-dark);
}

.region[data-background='light'] {
  background-color: var(--color-light);
}

.region[data-background='primary'] {
  background-color: var(--color-primary);
}

.region[data-background='secondary'] {
  background-color: var(--color-secondary);
}

.region[data-background='transparent'] {
  background-color: transparent;
}

.region[data-foreground='dark'] {
  color: var(--color-dark);
}

.region[data-foreground='light'] {
  color: var(--color-light);
}

.region[data-foreground='primary'] {
  color: var(--color-primary);
}

.region[data-foreground='secondary'] {
  color: var(--color-secondary);
}

.text-dark {
  color: var(--color-dark);
}

.text-dark-glare {
  color: var(--color-dark-glare);
}

.text-light {
  color: var(--color-light);
}

.text-mid {
  color: var(--color-mid);
}

.text-mid-shade {
  color: var(--color-mid-shade);
}

.text-mid-dark {
  color: var(--color-mid-dark);
}

.text-primary {
  color: var(--color-primary);
}

.text-primary-shade {
  color: var(--color-primary-glare);
}

.text-primary-deep {
  color: var(--color-primary-shade);
}

.text-secondary {
  color: var(--color-secondary);
}

.text-secondary-glare {
  color: var(--color-secondary-glare);
}

.text-step--4 {
  font-size: var(--size-step--4);
}

.text-step--3 {
  font-size: var(--size-step--3);
}

.text-step--2 {
  font-size: var(--size-step--2);
}

.text-step--1 {
  font-size: var(--size-step--1);
}

.text-step-0 {
  font-size: var(--size-step-0);
}

.text-step-1 {
  font-size: var(--size-step-1);
}

.text-step-2 {
  font-size: var(--size-step-2);
}

.text-step-3 {
  font-size: var(--size-step-3);
}

.text-step-4 {
  font-size: var(--size-step-4);
}

.text-step-5 {
  font-size: var(--size-step-5);
}

.text-step-6 {
  font-size: var(--size-step-6);
}

.text-step-7 {
  font-size: var(--size-step-7);
}

.text-step-8 {
  font-size: var(--size-step-8);
}

.text-step-9 {
  font-size: var(--size-step-9);
}

.text-step-10 {
  font-size: var(--size-step-10);
}

.text-step-11 {
  font-size: var(--size-step-11);
}

.text-step-12 {
  font-size: var(--size-step-12);
}

/* 
VISUALLY HIDDEN UTILITY
Info: https://piccalil.li/quick-tip/visually-hidden/ 
*/

.visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 0;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}