html {
  --white: white;
  --light-gray: #eee;
  --black: hsl(210 11% 10%);
  --color-primary-light: var(--white);
  --color-primary-2-light: var(--gray-3);
  --color-primary-3-light: var(--blue-3);
  --color-primary-dark: var(--sand-10);
  --color-primary-2-dark: var(--gray-10);
  --color-primary-3-dark: var(--blue-10);
  --color-secondary-light: var(--gray-11);
  --color-secondary-2-light: var(--blue-12);
  --color-secondary-3-light: var(--blue-11);
  --color-secondary-dark: var(--gray-1);
  --color-secondary-2-dark: var(--gray-2);
  --color-secondary-3-dark: var(--gray-3);
  --color-accent-1: var(--orange-5);
  --color-accent-2: var(--blue-1);
  --color-message-success: var(--green-1);
  --color-message-info: var(--yellow-0);
  --color-message-warning: var(--yellow-1);
  --color-message-error: var(--red-4);

  --text1-color: var(--color-secondary);
  --h1-color: var(--color-secondary-2);
  --h1-background-color: var(--teal-3);
  --h-color: var(--color-secondary-2);
  --h-color-dark: var(--color-secondary-2-dark);
  /* --nav-link-color: var(--color-secondary); */
  /* --nav-link-hover-color: var(--color-primary-light); */
  --link-color-light: var(--blue-10);
  --link-color-dark: var(--blue-5);
  --input-border-color: var(--gray-5);
  --input-focus-border-color: var(--teal-5);
  --input-invalid-border-color: var(--choco-6);
  --fieldset-border-color: var(--gray-5);
  --button-border-color: var(--color-accent-1);
  --h1-background-color: var(--teal-3);
  --md-width: 40rem;

  --testimonial-border-color: var(--teal-9);

  --ff-base: var(--font-neo-grotesque);
  --ff-accent: var(--font-neo-grotesque);
  --ff-logo: var(--font-rounded-sans);
  --font-size-base: var(--font-size-2);

  --title-font-size: var(--font-size-fluid-2);
  --subtitle-font-size: var(--font-size-1);
  --hero-title-font-size: var(--title-font-size);
  --hero-subtitle-font-size: var(--subtitle-font-size);

  --grid-gap: var(--size-4);
  --grid-item-min-width: 15ch;
  --flex-gap: var(--size-2);
  --hero-grid-gap: var(--size-3);
  --hero-image-radius: var(--radius-3);
  --section-padding: var(--size-10) 0;
  --card-box-shadow: none;
  --card-text-padding: var(--size-3);
  --card-icon-box-image-width: var(--size-10);
  --card-image-width: var(--size-14);
  --wrapper-width: 1200px;
  --content-grid-width: 1200px;
  --scroll-snap-align: center;
  --row-highlight-color: var(--color-primary-2);
}

:root {
  color-scheme: light;
  --color-primary: var(--color-primary-light);
  --color-primary-2: var(--color-primary-2-light);
  --color-primary-3: var(--color-primary-3-light);
  --color-secondary: var(--color-secondary-light);
  --color-secondary-2: var(--color-secondary-2-light);
  --color-secondary-3: var(--color-secondary-3-light);
  --link-color: var(--link-color-light);
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --color-primary: var(--color-primary-dark);
    --color-primary-2: var(--color-primary-2-dark);
    --color-primary-3: var(--color-primary-3-dark);
    --color-secondary: var(--color-secondary-dark);
    --color-secondary-2: var(--color-secondary-2-dark);
    --color-secondary-3: var(--color-secondary-3-dark);
    --link-color: var(--link-color-dark);
  }
}

[color-scheme="light"] {
  color-scheme: light;
  --color-primary: var(--color-primary-light);
  --color-primary-2: var(--color-primary-2-light);
  --color-primary-3: var(--color-primary-3-light);
  --color-secondary: var(--color-secondary-light);
  --color-secondary-2: var(--color-secondary-2-light);
  --color-secondary-3: var(--color-secondary-3-light);
  --link-color: var(--link-color-light);
}

[color-scheme="dark"] {
  color-scheme: dark;
  --color-primary: var(--color-primary-dark);
  --color-primary-2: var(--color-primary-2-dark);
  --color-primary-3: var(--color-primary-3-dark);
  --color-secondary: var(--color-secondary-dark);
  --color-secondary-2: var(--color-secondary-2-dark);
  --color-secondary-3: var(--color-secondary-3-dark);
  --link-color: var(--link-color-dark);
}

body {
  line-height: 1.7;
  font-family: var(--ff-base);
  font-size: var(--font-size-base);
  background-color: var(--color-primary);
  color: var(--text1-color);
}

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

body {
  min-height: 100vh;
}

header {
  padding-block: var(--size-3);
  /* color: var(--nav-link-color); */
  /*box-shadow: var(--shadow-1);*/
}

header .header-logo {
  flex-grow: 1;
  font-family: var(--ff-logo);
  font-size: var(--size-fluid-2);
  display: block;
  min-width: 10rem;
  text-transform: uppercase;
}

header .header-logo a {
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

header .header-logo img {
  max-height: var(--header-logo-max-height, 36px);
  width: auto;
}

nav {
  display: flex;
  gap: var(--nav-flex-gap, var(--size-1));
  justify-content: space-between;
  align-items: center;
}

nav button {
  color: currentColor;
}

nav svg {
  width: var(--nav-svg-width, 22px);
  height: auto;
}

nav a {
  /* color: var(--nav-link-color); */
  color: currentColor;
  font-weight: 500;
  position: relative;
}

.hamburger {
  display: inline;
  border: none;
  background-color: inherit;
  color: inherit;
}

.hamburger:hover {
  background-color: inherit;
}

.hamburger svg {
  width: var(--hamburger-svg-width, var(--nav-svg-width, 22px));
}

.nav-items-wrapper {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 250ms ease-out;

  position: absolute;
  top: 4rem;
  left: 0;
  width: 100%;
}

.nav-items-wrapper[data-open="true"] {
  grid-template-rows: 1fr;
  background-color: var(--color-primary);
  color: var(--color-secondary);
  z-index: 10;
}

.nav-items {
  overflow: hidden;
}

.nav-item {
  padding: var(--size-1);
}

@media screen and (min-width: 1024px) {
  header .header-logo {
    flex-grow: unset;
  }

  .hamburger {
    display: none;
  }

  .nav-items-wrapper {
    flex-grow: 1;
    display: block;
    position: static;
    width: auto;
  }

  .nav-items {
    height: auto;
    position: static;
    display: flex;
    gap: var(--nav-items-gap, var(--size-5));
    justify-content: right;
    padding: 0;
  }
}

footer {
  padding: 1rem;
}

.container-grid {
  display: grid;
  grid-template-columns: 1fr min(100% - 1rem, 100ch) 1fr;
}

.full-bleed-grid {
  grid-column: 1 / -1;
}

footer>div {
  font-size: small;
}

section {
  padding: var(--section-padding);
}

section.small {
  padding-block: var(--size-6);
}

section:has(hero-simple),
section:has(hero-simple-text-only) {
  padding-block: var(--size-2);
}

h1+section,
section:has(hero-simple)+section,
section:has(hero-simple-text-only)+section {
  padding-top: 0;
}

section.h-screen {
  min-height: max(50rem, 70vh);
}

:where(textarea, select, input:not(button, button[type], input[type="button"], input[type="submit"], input[type="reset"], input[type="radio"], input[type="checkbox"])) {
  background-color: hsl(210 11% 10%);
  background-color: transparent;
  border: 1px solid var(--input-border-color, var(--gray-3));
  border-radius: var(--radius-2);
  padding: .2rem .5rem;
  width: 100%;
  height: 2rem;
}

:where(textarea:invalid, select:invalid, input:not(button, button[type], input[type="button"], input[type="submit"], input[type="reset"], input[type="radio"], input[type="checkbox"]):invalid) {
  border-color: var(--input-invalid-border-color);
}

:where(textarea:focus, select:focus, input:not(button, button[type], input[type="button"], input[type="submit"], input[type="reset"], input[type="radio"], input[type="checkbox"]):focus) {
  outline: 0;
  border-color: var(--input-focus-border-color, var(--color-accent-1));
}

:where(textarea) {
  resize: vertical;
  height: auto;
}

input[type="checkbox"] {
  width: auto;
  height: auto;
}

label {
  font-size: var(--label-font-size, 0.8rem)
}

.label {
  font-size: var(--label-font-size, 0.8rem);
  font-weight: bold;
}

fieldset {
  border-width: 0;
  padding: 0;
}

fieldset.has-border {
  border-width: 1px;
  padding: 0.5rem;
  border-color: var(--fieldset-border-color);
}

fieldset,
input,
select,
textarea {
  margin-bottom: .5rem;
}

.buttons {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--size-2);
  padding: var(--size-2) 0;
}

.button {
  border-style: none;
  border-color: var(--button-border-color);
  font-weight: 500;
  display: inline-block;
  text-transform: uppercase;
  text-align: center;
}

.icon {
  background-color: unset;
  border: none;
}

.user-button {
  cursor: pointer;
}

.button.primary {
  padding: var(--size-2) var(--size-5);
  color: var(--color-accent-1-text, var(--color-secondary-light));
  background-color: var(--color-accent-1);
  border-radius: var(--size-2);
}

.button.secondary {
  padding: var(--size-2) var(--size-5);
  color: var(--color-accent-2-text, var(--color-secondary-light));
  background-color: var(--color-accent-2);
  border-radius: var(--size-2);
}

.button.hero-button {
  padding: var(--size-3) var(--size-7);
  color: var(--color-accent-1-text, var(--color-secondary-light));
  background-color: var(--color-accent-1);
  border-radius: var(--radius-round);
}

.button.hero-button-2 {
  padding: var(--size-3) var(--size-7);
  color: var(--color-accent-2-text, var(--color-secondary-light));
  background-color: var(--color-accent-2);
  border-radius: var(--radius-round);
}

.button:hover,
input[type='button']:hover,
input[type='submit']:hover {
  filter: brightness(120%);
}

h1,
h2,
h3 {
  font-family: var(--ff-accent);
  padding-block: var(--size-2);
  color: var(--h-color);
  line-height: 1.3;
  text-wrap: balance;
}

[data-background-dark] h1,
[data-background-dark] h2,
[data-background-dark] h3,
[data-background-dark-2] h1,
[data-background-dark-2] h2,
[data-background-dark-2] h3,
[data-background-dark-3] h1,
[data-background-dark-3] h2,
[data-background-dark-3] h3 {
  color: var(--h-color-dark);
}

[data-background-dark],
[data-background-dark-2],
[data-background-dark-3] {
  --h-color: var(--h-color-dark);
}

h1 {
  padding-block: var(---h1-padding-block, var(--size-5));
  font-size: 2.5rem;
  color: var(--h1-color);
}

h2 {
  padding-block: var(--h2-padding-block, var(--size-4));
  font-size: var(--size-6);
}

h3 {
  padding-block: var(---h3-padding-block, var(--size-3));
  font-size: var(--size-5);
}

a {
  text-decoration: none;
  color: var(--link-color);
}

p {
  padding-bottom: 0;
}

p:not(:last-of-type) {
  margin-bottom: var(--size-3);
}

.short-content .p {
  padding-bottom: 0
}

p.long {
  padding-bottom: 1.5rem;
  line-height: 1.8;
}

.error {
  background-color: var(--red-1);
  padding: var(--size-2);
  border-left: 2px solid var(--red-9)
}

.hero-title {
  font-size: var(--hero-title-font-size);
  font-weight: bold;
}

.hero-subtitle {
  font-size: var(--hero-subtitle-font-size);
  font-weight: bold;
}

.hero-description {
  /*max-width: 67ch;*/
  line-height: 1.7;
  padding-top: var(--size-4);
}

.hero-top .hero-description {
  margin-inline: auto;
}

[data-background-page] {
  background-color: var(--color-primary);
}

[data-background-light] {
  background-color: var(--color-primary);
}

[data-background-light-2] {
  background-color: var(--color-primary-2);
}

[data-background-light-3] {
  background-color: var(--color-primary-3);
}

[data-background-dark] {
  background-color: var(--color-primary-dark);
  color: var(--color-secondary-dark);
}

[data-background-dark-2] {
  background-color: var(--color-primary-2-dark);
  color: var(--color-secondary-2-dark);
}

[data-background-dark-3] {
  background-color: var(--color-primary-3-dark);
  color: var(--color-secondary-3-dark);
}

/*
header[data-background-light],
footer[data-background-light],
section[data-background-light],
.full-bleed-light {
  background-color: var(--color-primary-light);
  box-shadow: 0 0 0 100vmax var(--color-primary-light);
  clip-path: inset(0 -100vmax);
  grid-column: content;
}

header[data-background-light-2],
footer[data-background-light-2],
section[data-background-light-2],
.full-bleed-light-2 {
  background-color: var(--color-primary-light-2);
  box-shadow: 0 0 0 100vmax var(--color-primary-light-2);
  clip-path: inset(0 -100vmax);
}

header[data-background-dark],
footer[data-background-dark],
section[data-background-dark],
.full-bleed-dark {
  background-color: var(--color-primary-dark);
  box-shadow: 0 0 0 100vmax var(--color-primary-dark);
  clip-path: inset(0 -100vmax);
  color: var(--color-secondary-dark);
}

header[data-background-dark-2],
footer[data-background-dark-2],
section[data-background-dark-2],
.full-bleed-dark-2 {
  background-color: var(--color-primary-dark-2);
  box-shadow: 0 0 0 100vmax var(--color-primary-dark-2);
  clip-path: inset(0 -100vmax);
  color: var(--color-secondary-dark-2);
}
*/

.card {
  box-shadow: var(--card-box-shadow);
  /*background-color: var(--color-primary);*/
}

.card .text-content.padded {
  padding: var(--card-text-padding);
}

/*
section .card {
  background-color: var(--color-primary-light);
}

section[data-background-light] .card,
section[data-background-light-2] .card {
  background-color: var(--color-primary);
}
*/

@media screen and (max-width: 768px) {
  .sm-w-full {
    width: 100%;
  }
}

.youtube-wrapper {
  aspect-ratio: 16/9;
}

.image-gallery {
  align-items: center;
}

.image-gallery img {
  border-radius: var(--rounded-corner-radius, var(--radius-3));
}

.image-gallery-view {
  max-width: 100vmin;
  padding-top: var(--size-6);
  display: grid;
  gap: var(--grid-gap);
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.image-gallery-view>* {
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

.dialog-title {
  font-weight: bold;
  font-family: var(--ff-accent);
  color: var(--h-color);
}

.dialog-content {
  margin-top: var(--size-5);
}

.dialog-close-button {
  float: right;
  background-color: var(--red-8);
  color: var(--white);
  border-width: 0px;
  outline: 0;
  cursor: pointer;
  white-space: nowrap;
  padding: .3rem var(--size-3);
}

.dialog-close-button:hover {
  filter: brightness(120%);
}

.message {
  color: var(--color-secondary-light);
  padding: var(--size-5);
}

.message.is-success {
  background-color: var(--color-message-success);
}

.message.is-info {
  background-color: var(--color-message-info);
}

.message.is-warning {
  background-color: var(--color-message-warning);
}

.message.is-error {
  background-color: var(--color-message-error);
}

ul.popup-menu {
  list-style: none;
  padding-left: 0;
}

.popup-menu {
  z-index: 100;
  --popup-menu-width: var(--size-14);
  position: absolute;
  background-color: var(--color-primary);
  color: var(--color-secondary);
  border: var(--border-size-1) solid var(--gray-5);
  min-width: var(--popup-menu-width);
}

.popup-menu a {
  color: var(--color-secondary);
  display: block
}

.popup-menu li {
  padding-block: var(--size-2);
  padding-inline: var(--size-3);
}

.popup-menu li:hover {
  background-color: var(--row-highlight-color);
}

.popup-menu.popup-menu__user {
  --popup-menu-width: var(--size-12);
  right: 0;
}

.quantity-counter {
  display: flex;
  align-items: stretch;
}

.quantity-counter button {
  border-style: none;
  font-weight: bold;
  padding: var(--size-2) var(--size-5);
  border-radius: var(--size-2);
  background-color: var(--gray-4);
  color: var(--color-secondary-light);
}

.quantity-counter input[type="number"] {
  width: 4rem;
  height: auto;
  margin-bottom: 0;
}

.cart,
.order,
.order-preview {
  max-width: var(--size-15);
}

.cart-line.card,
.order-line.card {
  display: grid;
  grid-gap: var(--grid-gap);
  grid-template-columns: var(--size-10) 1fr;
  padding: var(--size-2);
  background-color: var(--color-primary-light);
}

.cart-line .cart-image,
.order-line .order-image {
  aspect-ratio: 1/1;
  object-fit: cover;
}

.cart-line .qty-amount-grid,
.order-line .qty-amount-grid {
  display: grid;
  grid-template-columns: 1fr var(--size-10);
}

.orders {
  padding-block: var(--size-4);
  max-width: 40rem;
}

.orders table {
  width: 100%;
}

.orders td,
.orders th {
  padding: var(--size-2);
}

.cart button.button.secondary.delete {
  font-size: small;
}

.cart-price {
  font-weight: bold;
  font-size: xx-large;
}

form.medium {
  max-width: 40rem;
  margin-inline: auto;
}

form.medium-left {
  max-width: 40rem;
}

.fields {
  display: grid;
  column-gap: var(--size-2);
  row-gap: var(--size-2);
}

.field {
  padding-block: var(--size-1);
}

.field.is-full-row {
  grid-column: 1 / -1;
}

.radio-bar input[type="radio"] {
  opacity: 0;
  position: fixed;
  width: 0;
}

.radio-bar label {
  display: inline-block;
  padding: var(--size-2) var(--size-5);
  border: 1px solid var(--color-secondary-2);
  border-radius: 4px;
}

.radio-bar input[type="radio"]:checked+label {
  background-color: var(--gray-9);
  color: var(--gray-1);
}

.long-para li {
  margin-bottom: var(--size-2);
}

@media screen and (min-width: 1024px) {
  body {
    grid-template-rows: 5rem auto 10rem;
  }

  .header-logo {
    display: inline;
    padding: 0;
    white-space: nowrap;
  }

  .hero-left {
    margin-top: auto;
    margin-bottom: auto;
  }

  .hero-left-content {
    padding: var(--size-2) 0;
  }

  .item-hero-grid,
  .project-hero-grid {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: var(--grid-gap);
  }

  .ratings {
    flex-direction: row;
    gap: var(--size-3);
    justify-content: center;
  }

  .owners-pitch {
    grid-template-columns: 4fr 8fr;
  }

  .contact-us {
    display: grid;
    grid-gap: var(--size-3);
    grid-auto-flow: column;
    grid-template-columns: 1fr 1fr;
  }

  .map {
    height: auto;
  }
}

#main-deck {
  height: var(--main-deck-height, calc(100vh - 10rem));
}

#main-deck.full-screen {
  height: 100vh;
}