html,
body {
  min-height: 100%;
  margin: 0;
  padding: 0;
  position: relative;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
}

html,
body {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

li {
  margin-bottom: 0;
  font-size: 18px;
}

p {
  margin-bottom: 0;
  font-size: 18px;
  line-height: 120%;
  font-weight: 300;
}

h1 {
  font-size: 68px;
  font-style: normal;
}

h2 {
  font-size: 28px;
  font-style: normal;
  font-weight: 400;
  line-height: 110%;
  letter-spacing: -0.02em;
}

h3 {
  font-size: 24px;
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -0.01em;
}

h4 {
  font-size: 28px;
}

h5 {
  font-size: 20px;
}

h6 {
  font-size: 16px;
}


.pr-80 {
  padding-right: 80px;
}

.home_main_header_image_area {
  display: block;
  position: relative;
}

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

.more_icon_iteams {
  display: flex;
  position: relative;
  align-items: center;
  gap: 0;
}

/* ===== Header Side Icons ===== */
.header_side_icon {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0 15px;
  height: 90px;
  transition: opacity 0.3s ease;
}

.header_side_icon:hover {
  opacity: 0.7;
}

.header_side_icon img {
  width: 20px;
  height: 20px;
}

/* ===== Icon Separator ===== */
.icon_separator {
  display: block;
  width: 1px;
  height: 20px;
  flex-shrink: 0;
}

.header-transparent .icon_separator {
  background-color: rgba(255, 255, 255, 0.3);
}

.header-white .icon_separator {
  background-color: rgba(0, 0, 0, 0.3);
}

/* ===== Language Switcher ===== */

/* ===== Language Dropdown ===== */

/* ===== Search Overlay ===== */
.search_overlay {
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 90px;
  background: rgba(0, 0, 0, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  align-items: center;
  overflow: hidden;
  transition: width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  z-index: 100;
}

.search_overlay.active {
  width: 100%;
}

.search_overlay_form {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0 20px;
  gap: 15px;
}

.search_overlay_input {
  flex: 1;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid #666666 !important;
  color: #ffffff !important;
  font-size: 18px !important;
  font-weight: 300;
  padding: 10px 0 !important;
  margin-bottom: 0 !important;
  outline: none;
  font-family: "New Grotesk", sans-serif;
  letter-spacing: 0.5px;
}

.search_overlay_input::placeholder {
  color: rgba(255, 255, 255, 0.5);
  font-weight: 300;
  font-size: 18px;
}

.search_overlay_input:focus {
  border-bottom-color: rgba(255, 255, 255, 0.7) !important;
}

.search_overlay_submit {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

.search_overlay_submit:hover {
  opacity: 1;
}

.search_overlay_submit img {
  width: 20px;
  height: 20px;
}

.search_overlay_close {
  background: none;
  border: none;
  color: #ffffff;
  font-size: 28px;
  cursor: pointer;
  padding: 5px 10px;
  line-height: 1;
  opacity: 0.7;
  transition: opacity 0.3s ease;
  font-weight: 300;
}

.search_overlay_close:hover {
  opacity: 1;
}

/* ===== Nav Scroll (Sticky Header) States ===== */
.nav-scroll .icon_separator {
  background-color: rgba(0, 0, 0, 0.2);
}

.nav-scroll .header_side_icon img {
  filter: brightness(0);
}

.nav-scroll .search_overlay {
  background: rgba(255, 255, 255, 0.98);
}

.nav-scroll .search_overlay_input {
  color: #222 !important;
  border-bottom-color: rgba(0, 0, 0, 0.2) !important;
}

.nav-scroll .search_overlay_input::placeholder {
  color: rgba(0, 0, 0, 0.4);
}

.nav-scroll .search_overlay_input:focus {
  border-bottom-color: rgba(0, 0, 0, 0.5) !important;
}

.nav-scroll .search_overlay_submit img {
  filter: brightness(0);
}

.nav-scroll .search_overlay_close {
  color: #222;
}

.home_main_header_content_area {
  position: absolute;
  bottom: 80px;
  left: 0;
  width: 100%;
  z-index: 10;
}

.main_home_header_content {
  width: 100%;
}

.header_left_content {
  text-align: left;
}

.home_home_main_subtitle_area {
  display: flex;
  align-items: center;
  position: relative;
  margin-bottom: 40px;
  min-height: 48px;
  /* To give the absolute icon room */
}

.home_home_main_subtitle_area img {
  height: 34px;
  width: auto;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.home_home_main_subtitle_area h6 {
  color: #ffffff;
  letter-spacing: 0.4em;
  margin: 0;
  font-weight: 400;
  padding-left: 20px;
  position: relative;
  z-index: 2;
  font-size: 12px;
}

.header_left_content h1 {
  color: #ffffff;
  font-weight: 300;
  line-height: 1;
  margin: 0;
}

.play_pause_btn {
  width: 60px;
  height: 60px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.play_pause_btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: #ffffff;
}

.pause_lines {
  color: #ffffff;
  font-size: 13px;
  letter-spacing: 4px;
  margin-left: 4px;
  font-weight: 300;
}

.about_hero_image_area {
  display: block;
  position: relative;
  border-radius: 16px;
  overflow: hidden;
}

.about_hero_image_area img {
  max-width: 100%;
}





.pl-120 {
  padding-left: 120px;
}

/* Transparent Header  */

.header-transparent {
  background: transparent;
}

.header-transparent .nav-link {
  color: #fff;
}

.header-transparent .logo-img {
  content: url("../upload/logo.svg");
}

.header-transparent .header_side_icon img {
  filter: brightness(0) invert(1);
}

/* White Header  */

.header-white {
  background: #fff;
}

.header-white .nav-link {
  color: #000;
}

.header-white .logo-img {
  content: url("../upload/logo.svg");
  /* the Letoza wordmark is white; show it black on the white header */
  filter: brightness(0);
}

.header-white .header_side_icon.search_bar_icon img,
.header-white .header_side_icon.bookmark_icon img {
  filter: invert(1);
}

.smart_new_navbar {
  padding: 0 50px;
  border-radius: 8px;
}

/* ===== Mega Dropdown — Collection ===== */
.mega-dropdown-wrapper {
  position: static !important;
}

.mega-dropdown-wrapper>.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.mega-dropdown-arrow {
  display: inline-block;
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  margin-top: 1px;
}

.mega-dropdown-wrapper:hover .mega-dropdown-arrow,
.mega-dropdown-wrapper.mega-open .mega-dropdown-arrow {
  transform: rotate(180deg);
}

.mega-dropdown-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  width: 100%;
  background: #f5f3f1;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.mega-dropdown-wrapper:hover .mega-dropdown-panel,
.mega-dropdown-wrapper.mega-open .mega-dropdown-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mega-dropdown-inner {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1.8fr;
  gap: 0;
  max-width: 1400px;
  margin: 0 auto;
  padding: 50px 60px 55px;
}

.mega-col {
  padding-right: 40px;
}

.mega-col-right {
  padding-right: 0;
  padding-left: 40px;
  border-left: 1px solid rgba(0, 0, 0, 0.08);
}

.mega-col-title {
  font-size: 15px;
  font-weight: 500;
  color: #1c1c1c;
  margin-bottom: 22px;
  letter-spacing: 0.02em;
  line-height: 1;
}

.mega-col-title-app {
  margin-top: 32px;
}

/* Link Lists */
.mega-link-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mega-link-list li {
  margin-bottom: 0;
}

.mega-link-list li a {
  display: block;
  padding: 7px 0;
  font-size: 14px;
  font-weight: 300;
  color: #555555;
  text-decoration: none;
  transition:
    color 0.25s ease,
    padding-left 0.25s ease;
  line-height: 1.4;
  letter-spacing: 0.01em;
}

.mega-link-list li a:hover {
  color: #d24c0a;
  padding-left: 4px;
}

/* Size Tags */
.mega-size-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mega-size-tag {
  display: inline-block;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 400;
  color: #555555;
  background: transparent;
  border: 1px solid #cccccc;
  border-radius: 4px;
  text-decoration: none;
  transition: all 0.25s ease;
  line-height: 1.3;
  letter-spacing: 0.01em;
}

.mega-size-tag:hover {
  color: #d24c0a;
  border-color: #d24c0a;
  background-color: rgba(210, 76, 10, 0.04);
}

/* Application Icons */
.mega-app-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.mega-app-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  gap: 10px;
  transition: transform 0.25s ease;
}

.mega-app-item:hover {
  transform: translateY(-2px);
}

.mega-app-icon-wrap {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  transition: all 0.25s ease;
  padding: 12px;
}

.mega-app-item:hover .mega-app-icon-wrap {
  border-color: #d24c0a;
  box-shadow: 0 4px 12px rgba(210, 76, 10, 0.1);
}

.mega-app-icon-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.mega-app-label {
  font-size: 12px;
  font-weight: 400;
  color: #666666;
  text-align: center;
  line-height: 1.2;
  transition: color 0.25s ease;
}

.mega-app-item:hover .mega-app-label {
  color: #d24c0a;
}

/* ===== Collection Filter Dropdowns ===== */

/* Dropdown Menu */

/* ===== Product Index Card ===== */

.full-card-link {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* ===== Product Thumbnail ===== */

/* ===== Bookmark Button ===== */

/* Show bookmark on card hover */

/* Always show if bookmarked */

/* Bookmark button text */

/* Bookmark button icon wrapper */

/* Heart icon — outline (default) */

/* Heart icon — filled (bookmarked) */

/* ===== Bookmarked Active State ===== */

/* Pop animation keyframe for heart */
@keyframes bookmarkPop {
  0% {
    transform: scale(1);
  }

  30% {
    transform: scale(1.35);
  }

  60% {
    transform: scale(0.9);
  }

  100% {
    transform: scale(1);
  }
}


.pl-120 {
  padding-left: 120px;
}


.accordion-box {
  position: relative;
  padding: 0;
}

.accordion-box .block {
  position: relative;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.accordion-box .block.active-block {
  background: rgba(0, 0, 0, 0.3);
}

.accordion-box .block:last-child {
  margin-bottom: 0;
}

.accordion-box .block .acc-btn {
  position: relative;
  cursor: pointer;
  padding: 20px;
  padding-right: 60px;
  transition: all 500ms ease;
  font-style: normal;
  background-color: #fff;
  border-bottom: 1px solid #ddd;
  color: #1c1c1c;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
}

.accordion-box .block .acc-btn .count {
  color: #aa8453;
  padding-right: 3px;
}

.accordion-box .block .acc-btn:before {
  position: absolute;
  right: 35px;
  top: 20px;
  height: 30px;
  font-size: 14px;
  font-weight: normal;
  color: rgba(210, 76, 10, 1);
  line-height: 30px;
  content: "\e61a";
  font-family: "Themify";
  transition: all 500ms ease;
}

.accordion-box .block .acc-btn.active {
  background: #fff;
  color: #1c1c1c;
}

.accordion-box .block .acc-btn.active:before {
  color: "Themify";
  content: "\e622";
}

.accordion-box .block .acc-content {
  position: relative;
  display: none;
}

.accordion-box .block .content {
  position: relative;
  padding: 15px 20px 25px;
  background: #fff;
  color: #1c1c1c;
}

.accordion-box .block .acc-content.current {
  display: block;
}

.accordion-box .block .content .text {
  display: block;
  position: relative;
  top: 0px;
  display: block;
  color: #000;
  font-size: 17px;
  font-style: normal;
  font-weight: 400;
  line-height: 130%;
  letter-spacing: -0.03em;
}

.accordion-box .block {
  border-radius: 0;
}

/* bookmark page css */

/* Letoza Share Modal Styling */

/* letoza calculator area */

/* packing details */

/* Border setups for a clean grid card inside the beige wrapper */

/* Rounded corners for tbody container */


/* UL: flex row, no wrap */

/* Brand hover colors */
.x:hover {
  background: #ffffff;
  color: #000000;
  border-color: #ffffff;
}

.facebook:hover {
  background: #1877F2;
  color: #ffffff;
  border-color: #1877F2;
}

.linkedin:hover {
  background: #0A66C2;
  color: #ffffff;
  border-color: #0A66C2;
}

.link:hover {
  background: #6c757d;
  color: #ffffff;
  border-color: #6c757d;
}

.smart_new_navbar {
  background: rgba(0, 0, 0, 0.40);
  backdrop-filter: blur(37.415000915527344px);
}

/* ===== Letoza header — dark bar ===== */
/* fixed for the whole page; slides up out of view while scrolling down and
   comes back on the first scroll up (is_hidden is toggled in components/header.php) */
.letoza-header.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 99;
  height: auto;
  padding: 14px 0 0;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.letoza-header.is_hidden {
  transform: translateY(-100%);
}

@media (prefers-reduced-motion: reduce) {
  .letoza-header.navbar {
    transition: none;
  }
}

.letoza-header .smart_new_navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 66px;
  padding: 0 10px 0 40px;
  border-radius: 2px;
  background: rgba(40, 40, 40, 0.62);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: none;
}


.letoza-header .logo-img {
  width: 185px;
  content: url("../upload/logo.svg");
  filter: none;
}

.letoza_contact_btn {
  display: inline-flex;
  align-items: center;
  gap: 48px;
  height: 46px;
  padding: 0 20px;
  flex-shrink: 0;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.20);
  color: #fff;
  font-family: "New Grotesk Mono", monospace;
  font-size: 14px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.3s ease;
  font-weight: 500;
}

.letoza_contact_btn:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

@media (min-width: 992px) {
  .letoza-header .navbar-collapse {
    flex: 1 1 auto;
    justify-content: center;
  }

  .letoza-header .navbar-nav {
    gap: clamp(24px, 4.5vw, 80px);
  }



  .letoza-header.navbar .navbar-nav .nav-link:hover {
    color: #d24c0a !important;
  }

  .letoza-header .nav-item-mobile-only {
    display: none;
  }

}

/* ===== Home hero slider ===== */
.letoza_hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  background: #1c1c1c;
  color: #fff;
}

/* the image layer is a little larger than the hero so the cursor parallax never shows an edge */
.letoza_hero_slides {
  position: absolute;
  inset: -24px;
  opacity: 0;
  animation: letozaHeroShow 0.6s ease 3s forwards;
}

.letoza_hero.is-ready .letoza_hero_slides {
  opacity: 1;
  animation: none;
}

.letoza_hero_slide {
  position: absolute;
  inset: 0;
}

/* frosted band that runs just ahead of the wipe edge */
.letoza_hero_sweep {
  position: absolute;
  inset: 0;
  z-index: 10;
  visibility: hidden;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.22) 100%);
  backdrop-filter: blur(10px) brightness(1.15);
  -webkit-backdrop-filter: blur(10px) brightness(1.15);
}

.letoza_hero_slide {
  overflow: hidden;
  visibility: hidden;
}

.letoza_hero_slide.is-active {
  visibility: visible;
}

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

/* light shade at the bottom only, so the photo shows through and the text stays readable */
.letoza_hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.12) 35%, rgba(0, 0, 0, 0) 60%);
}

.letoza_hero_content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 50px;
  z-index: 5;
}

/* line the panel up with the header bar's edges */
.letoza_hero_content .container {
  padding-left: 0;
  padding-right: 0;
}

.letoza_hero_panel {
  max-width: 942px;
  /* hidden until the slider script has split the text; shows anyway after 3s */
  opacity: 0;
  animation: letozaHeroShow 0.6s ease 3s forwards;
}

.letoza_hero.is-ready .letoza_hero_panel {
  opacity: 1;
  animation: none;
}

@keyframes letozaHeroShow {
  to {
    opacity: 1;
  }
}

.letoza_hero_progress {
  display: flex;
  gap: 16px;
  margin-bottom: 56px;
}

.letoza_hero_bar {
  position: relative;
  flex: 1 1 0;
  height: 3px;
  padding: 0;
  border: 0;
  background: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  transform-origin: left center;
  transition:
    flex-grow 0.8s cubic-bezier(0.65, 0, 0.35, 1),
    background-color 0.3s ease;
}

/* bigger click/tap area than the 3px line */
.letoza_hero_bar::before {
  content: "";
  position: absolute;
  inset: -12px 0;
}

.letoza_hero_bar.is-active {
  flex-grow: 2.95;
}

.letoza_hero_bar:hover {
  background-color: rgba(255, 255, 255, 0.6);
}

.letoza_hero_bar_fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0;
  background: #fff;
}

/* soft glow at the leading edge of the active bar */
.letoza_hero_bar_fill::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 28px;
  height: 9px;
  transform: translate(50%, -50%);
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0));
  opacity: 0;
  transition: opacity 0.4s ease;
}

.letoza_hero_bar.is-active .letoza_hero_bar_fill::after {
  opacity: 1;
}

.letoza_hero_bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
}

/* all texts share one grid cell, so the block keeps the tallest text's height */
.letoza_hero_texts {
  display: grid;
  flex: 0 1 490px;
}

.letoza_hero_text {
  grid-area: 1 / 1;
  visibility: hidden;
}

.letoza_hero_text h2 {
  margin: 0;
  color: #fff;
}

.letoza_hero_text.is-active {
  visibility: visible;
}

.letoza_hero_line_mask {
  display: block;
  overflow: hidden;
  /* room for descenders (g, p, y) inside the mask */
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
}

.letoza_hero_text .word {
  transform-origin: 0% 100%;
}

.letoza_hero_btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 56px;
  height: 50px;
  padding: 0 20px;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #fff;
  font-family: "New Grotesk Mono", monospace;
  font-size: 14px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}

/* white fill wipes in from the left on hover, out to the right on leave */
.letoza_hero_btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #fff;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}

.letoza_hero_btn:hover {
  color: #1a1a1a;
}

.letoza_hero_btn:hover::before {
  transform: scaleX(1);
  transform-origin: left center;
}

/* two arrows: one slides out to the right as the other slides in */
.letoza_hero_btn_arrow {
  position: relative;
  display: inline-flex;
  width: 20px;
  height: 12px;
  overflow: hidden;
}

.letoza_hero_btn_arrow svg {
  flex-shrink: 0;
  transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}

.letoza_hero_btn_arrow svg+svg {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateX(-130%);
}

.letoza_hero_btn:hover .letoza_hero_btn_arrow svg:first-child {
  transform: translateX(130%);
}

.letoza_hero_btn:hover .letoza_hero_btn_arrow svg+svg {
  transform: translateX(0);
}

/* ==========================================================================
   Shared utilities
   ========================================================================== */

/* shared button: a white box whose dark fill wipes in from the left on hover.
   Markup: <a class="default_button"><span>Label</span></a> */
.default_button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 20px;
  overflow: hidden;
  background-color: #FFFFFF;
  color: #000000;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
}

.default_button::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #000000;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.default_button span {
  position: relative;
  transition: color 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.default_button:hover {
  color: #000000;
}

.default_button:hover::before {
  transform: scaleX(1);
  transform-origin: left center;
}

.default_button:hover span {
  color: #FFFFFF;
}

.default_button:focus-visible {
  outline: 1px solid #FFFFFF;
  outline-offset: 3px;
}

/* gold variant: sentence-case label, optional icon before it */
.default_button.is_gold {
  gap: 10px;
  height: 42px;
  padding: 0 22px;
  border: 1px solid #FFFFFF;
  background-color: #AD7300;
  color: #FFFFFF;
  font-size: 16px;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
}

.default_button.is_gold:hover {
  color: #FFFFFF;
  border: 0;
}

.default_button svg {
  position: relative;
  flex-shrink: 0;
}

.section-padding {
  padding: 80px 0;
  /* clips only sideways overflow: the note card and the paperclip start rotated for
     their entrance and would otherwise widen the page (sideways scroll on phones) */
  overflow-x: clip;
}

/* small mono eyebrow label above a heading or block */
.default_label {
  display: inline-block;
  color: #000000;
  font-family: "New Grotesk Mono", monospace;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ==========================================================================
   Home — note section
   ========================================================================== */

/* the paperclip sits above the paper inside the image: pull the card up by
   the clip's height (71px of the 630px-wide file = 11.27% of its width) so
   the paper's top edge lines up with the photo beside it */
.note_card_area {
  margin-top: -11.27%;
}

.note_card_area img,
.note_image_area img {
  display: block;
  width: 100%;
  height: auto;
}

.note_header_area {
  margin-top: 80px;
}

.note_header_area h2 {
  margin: 0;
  color: #000000;
}

.note_content_area {
  margin-top: 80px;
}

.note_content_area p {
  margin: 0;
  color: #18181A;
}

/* the photo is uncovered from below and drifts inside this frame on scroll */
.note_image_area {
  overflow: hidden;
}

/* the card is a small object on the page. Its shadow is drawn on the paper
   only (the clip above it gets none) and is driven by variables the script
   animates: --lift 1 while the note is raised, 0 once it has landed;
   --shadow-x / --shadow-y lean it away from the cursor; --sheen moves a soft
   band of light across the paper (100% = off to the left, 0% = off to the right) */
.note_card_area {
  --lift: 0;
  --shadow-x: 0px;
  --shadow-y: 0px;
  --sheen: 100%;
  position: relative;
  isolation: isolate;
}

.note_card_area::before,
.note_card_area::after {
  content: "";
  position: absolute;
  top: 9.33%;
  /* the paper starts 71px down the 761px-tall file */
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
}

/* a faint contact shadow plus a soft, wide one tucked under the paper that
   spreads and drops while lifted */
.note_card_area::before {
  z-index: -1;
  box-shadow:
    var(--shadow-x) calc(1px + var(--shadow-y)) calc(3px + var(--lift) * 6px) rgba(0, 0, 0, calc(0.035 - var(--lift) * 0.025)),
    calc(var(--shadow-x) * 1.5) calc(16px + var(--lift) * 30px + var(--shadow-y) * 1.5) calc(40px + var(--lift) * 36px) calc(-18px - var(--lift) * 4px) rgba(0, 0, 0, calc(0.07 + var(--lift) * 0.08));
}

.note_card_area::after {
  z-index: 1;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0.32) 50%, rgba(255, 255, 255, 0) 62%);
  background-size: 250% 100%;
  background-position: var(--sheen) 0;
}

/* hides each heading/paragraph line while its words rise; the script
   removes these once the entrance has played */
.note_line_mask {
  display: block;
  overflow: hidden;
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
}

.note_header_area .word {
  transform-origin: 0% 100%;
}

/* ==========================================================================
   Home — philosophy section
   ========================================================================== */

/* the gold bar is drawn by ::before over a transparent 10px border (same
   layout as a solid border), so the script can draw it in from the left (--bar) */
.philosophy_box_area {
  --bar: 1;
  position: relative;
  padding: 60px 50px;
  border-top: 10px solid transparent;
  background-color: #F1F1EE;
}

.philosophy_box_area::before {
  content: "";
  position: absolute;
  top: -10px;
  right: 0;
  left: 0;
  height: 10px;
  background-color: #AD7300;
  transform: scaleX(var(--bar));
  transform-origin: left center;
}

/* the paperclip hangs over the top-right corner, partly above the card */
.philosophy_clip_area {
  position: absolute;
  top: -52px;
  right: 10px;
  width: 96px;
  pointer-events: none;
}

.philosophy_clip_area img {
  display: block;
  width: 100%;
  height: auto;
}

/* each column starts with a thin rule on its left; its top and bottom blocks
   are pushed apart so both columns end on the same line */
.philosophy_content_area {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 60px;
  height: 100%;
  min-height: 600px;
  padding-left: 60px;
  padding-top: 20px;
  padding-bottom: 20px;
  position: relative;
  --rule: 1;
}

/* the column rule, drawn by ::before so it can grow in from the top (--rule) */
.philosophy_content_area::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1px;
  background-color: #86868B;
  transform: scaleY(var(--rule));
  transform-origin: center top;
}

.philosophy_content_area>.row {
  width: 100%;
}

/* 17.6em (measured: 17.38–17.80em) breaks the heading on the design's lines at any size */
.philosophy_header_area h2 {
  max-width: 17.6em;
  margin: 0;
  color: #000000;
}

.philosophy_header_area h2 span {
  color: #787878;
}

.philosophy_feature_area img {
  display: block;
  width: 36px;
  height: 36px;
}

/* "Detail" / "Process" are labels, not headings, so they are spans set large */
.philosophy_feature_area span {
  display: block;
  margin: 30px 0 0;
  color: #000000;
  font-size: 48px;
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -0.01em;
}

.philosophy_feature_area p {
  max-width: 14.1em;
  /* rebalances the lines so a single word is never left alone on the last one */
  text-wrap: pretty;
  margin: 20px 0 0;
  color: #3A3A3A;
}

/* 30 mono characters per line gives the five-line break from the design
   (29 leaves no slack for rounding, and the highlight's padding keeps
   "the" off the second line) */
.philosophy_text_area p {
  max-width: 30ch;
  margin: 0;
  color: #000000;
  font-family: "New Grotesk Mono", monospace;
  line-height: 1.45;
}

.philosophy_text_area p span {
  padding: 2px 6px;
  /* --mark is how much of the phrase is marked; the script sweeps it in */
  background: linear-gradient(#E8DCB9, #E8DCB9) no-repeat left center / var(--mark, 100%) 100%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* hides each heading / label / paragraph line while its words rise; the
   script removes these once the entrance has played */
.philosophy_line_mask {
  display: block;
  overflow: hidden;
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
}

.philosophy_header_area .word {
  transform-origin: 0% 100%;
}

/* ==========================================================================
   Home — formats and surfaces section
   ========================================================================== */

/* the panel beside the photo is taller than the screen on laptops, and stretching
   the photo to its full height cropped it to a thin, blown-up strip. So the photo
   is one screen high and holds still (sticky) while the panel scrolls past it;
   max-height keeps it inside the column on screens taller than the section.
   The panel grey behind it means no white shows before the photo has opened */
.formats_image_area {
  position: sticky;
  top: 0;
  height: 100vh;
  max-height: 100%;
  overflow: hidden;
  background-color: #F1F1EE;
}

.formats_image_area img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* the grey right half. --ruler scales the ruler with the screen, and the right
   padding always leaves room for it so the text never runs underneath */
.formats_content_area {
  --ruler: clamp(90px, 9.1vw, 175px);
  position: relative;
  height: 100%;
  padding: 95px calc(var(--ruler) + 40px) 95px clamp(40px, 7.8vw, 150px);
  background-color: #F1F1EE;
  /* the ruler slides in from the right edge; keep it from widening the page */
  overflow: hidden;
}

.formats_ruler_area {
  position: absolute;
  top: 40px;
  right: 0;
  width: var(--ruler);
  pointer-events: none;
}

.formats_ruler_area img {
  display: block;
  width: 100%;
  height: auto;
}

.formats_inner_area {
  max-width: 530px;
}

/* the divider is drawn by ::after so the script can draw it in from the left
   (--rule); the transparent border keeps the 1px in the layout */
.formats_header_area {
  --rule: 1;
  position: relative;
  padding-bottom: 34px;
  border-bottom: 1px solid transparent;
}

.formats_header_area::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 1px;
  background-color: #86868B;
  transform: scaleX(var(--rule));
  transform-origin: left center;
}

/* hides each heading line while it rises; the script removes these once the
   entrance has played */
.formats_line_mask {
  display: block;
  overflow: hidden;
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
}

/* 17em (measured: 16.06–17.91em works for both headings) breaks them on the design's lines */
.formats_header_area h2 {
  max-width: 17em;
  margin: 0;
  color: #000000;
}

.formats_size_item_area {
  --rule: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 0;
}

/* same drawn divider as the headers, between the rows */
.formats_size_item_area+.formats_size_item_area {
  border-top: 1px solid transparent;
}

.formats_size_item_area+.formats_size_item_area::before {
  content: "";
  position: absolute;
  top: -1px;
  right: 0;
  left: 0;
  height: 1px;
  background-color: #86868B;
  transform: scaleX(var(--rule));
  transform-origin: left center;
}

.formats_size_item_area img {
  display: block;
  flex-shrink: 0;
  height: auto;
}

.formats_size_item_area span,
.formats_surface_item_area span {
  color: #000000;
  font-family: "New Grotesk Mono", monospace;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.formats_size_item_area span {
  font-size: 18px;
}

.formats_surface_area {
  margin-top: 80px;
}

/* the swatch grid is a Bootstrap row (row-cols-*); its gaps come from the gutter
   variables, and the row's -34px top margin is why the header gets 74px (= 40px) */
.formats_surface_area .formats_header_area {
  margin-bottom: 74px;
}

.formats_surface_list_area {
  --bs-gutter-x: 20px;
  --bs-gutter-y: 34px;
}

/* this Bootstrap build pads every column a flat 15px (.row > *), so the gutter
   classes never reach the columns. Make g-0 rows really gutterless (the photo
   runs to the screen edge) and let the swatch grid use its own 20px gutter */
.row.g-0>* {
  padding-right: 0;
  padding-left: 0;
}

.formats_surface_list_area>* {
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
}

/* --sheen moves a band of light across the swatch (100% = off to the left,
   0% = off to the right); the script plays it on entrance and on hover */
.formats_surface_item_area {
  --sheen: 100%;
  position: relative;
}

.formats_surface_item_area img {
  display: block;
  width: 100%;
  max-width: 90px;
  height: auto;
}

/* sits exactly over the swatch image (same width cap, square like the files) */
.formats_surface_item_area::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  max-width: 90px;
  aspect-ratio: 1 / 1;
  pointer-events: none;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0.45) 50%, rgba(255, 255, 255, 0) 62%);
  background-size: 250% 100%;
  background-position: var(--sheen) 0;
}

@media (hover: hover) {

  .formats_surface_item_area img,
  .formats_surface_item_area::after {
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .formats_surface_item_area:hover img,
  .formats_surface_item_area:hover::after {
    transform: translateY(-6px);
  }
}

.formats_surface_item_area span {
  display: block;
  margin-top: 16px;
  font-size: 12px;
  line-height: 1.1;
}

/* ==========================================================================
   Home — why Letoza section (accordion)
   ========================================================================== */

.why_header_area {
  padding-bottom: 16px;
}

.why_header_area span,
.why_panel_inner>span {
  display: block;
  color: #000000;
  font-size: 18px;
  line-height: 1.2;
  text-transform: uppercase;
}

/* each row's top rule is drawn by ::before so the entrance can draw it in
   (--rule); the last row also closes the list with a rule under its panel */
.why_item_area {
  --rule: 1;
  position: relative;
}

.why_item_area::before,
.why_item_area:last-child::after {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  height: 1px;
  background-color: #86868B;
  transform: scaleX(var(--rule));
  transform-origin: left center;
}

.why_item_area::before {
  top: 0;
}

.why_item_area:last-child::after {
  bottom: 0;
}

.why_item_area h2 {
  margin: 0;
}

/* the whole row is the button */
.why_item_area h2 button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  padding: 38px 20px 38px 0;
  border: 0;
  background: none;
  color: #000000;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.why_item_area h2 button:focus-visible {
  outline: 1px solid #000000;
  outline-offset: 4px;
}

/* overflow hidden: the letters rise into place from below on entrance */
.why_item_area h2 button>span:first-child {
  display: block;
  overflow: hidden;
  font-size: 110px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.why_icon_area {
  position: relative;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.why_icon_area::before,
.why_icon_area::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #000000;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* the upright bar lies down as the row opens, turning the + into a − */
.why_icon_area::after {
  transform: rotate(90deg);
}

.why_item_area.is_open .why_icon_area::after {
  transform: rotate(180deg);
}

@media (hover: hover) {
  .why_item_area h2 button:hover>span:first-child {
    transform: translateX(16px);
  }

  .why_item_area:not(.is_open) h2 button:hover .why_icon_area {
    transform: rotate(90deg);
  }
}

/* the script animates the height; overflow keeps the cards inside while it does.
   (this Bootstrap build has no [hidden] rule, so closed panels need their own) */
.why_panel_area {
  overflow: hidden;
}

.why_panel_area[hidden] {
  display: none;
}

.why_panel_inner {
  padding: 60px 0 100px;
}

.why_panel_inner>span {
  margin-bottom: 48px;
}

/* this Bootstrap build pads columns a flat 15px, so match the row's pull-back to
   it; with the default gutter the cards sat 3px inside the rules */
.why_panel_inner>.row {
  --bs-gutter-x: 30px;
}

/* the grey frame holds the card's shape until its photo is added */
.why_card_image_area {
  aspect-ratio: 47 / 40;
  overflow: hidden;
  background-color: #F1F1EE;
}

.why_card_image_area img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.why_card_content_area {
  padding-top: 36px;
}

.why_card_content_area h3 {
  margin: 0 0 20px;
  color: #000000;
  font-weight: 500;
}

.why_card_content_area span {
  display: block;
  color: #000000;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.2;
}

.why_card_content_area p {
  max-width: 25em;
  color: #3A3A3A;
  font-weight: 300;
}

/* ==========================================================================
   Home — collections carousel
   ========================================================================== */

.collections_header_area {
  margin-bottom: 76px;
}

/* 19em (measured: 18.60–19.65em) breaks the heading before "of", as in the design */
.collections_header_area h2 {
  max-width: 19em;
  margin: 0;
  color: #000000;
}

.collections_line_mask {
  display: block;
  overflow: hidden;
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
}

.collections_nav_area {
  display: flex;
  justify-content: flex-end;
  gap: 40px;
  margin-bottom: 76px;
}

.collections_nav_area button {
  display: flex;
  align-items: center;
  padding: 8px 0;
  border: 0;
  background: none;
  color: #000000;
  cursor: pointer;
}

.collections_nav_area button svg {
  display: block;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.collections_nav_area button:focus-visible {
  outline: 1px solid #000000;
  outline-offset: 4px;
}

@media (hover: hover) {
  .collections_nav_area button.is_prev:hover svg {
    transform: translateX(-6px);
  }

  .collections_nav_area button.is_next:hover svg {
    transform: translateX(6px);
  }
}

/* every slide sits in the same grid cell, so the carousel is as tall as a slide
   and the next one can be wiped in over the current one */
.collections_slider_area {
  display: grid;
  touch-action: pan-y;
}

.collections_slide_area {
  grid-area: 1 / 1;
  visibility: hidden;
}

.collections_slide_area.is_active {
  visibility: visible;
}

/* 20px between the close-up and the room shot (this Bootstrap build pads
   columns a flat 15px, so set both sides of the gutter here) */
.collections_slide_area>.row {
  --bs-gutter-x: 20px;
  height: 100%;
}

.collections_slide_area>.row>* {
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
}

/* the grey frames hold each slide's shape until its photos are added */
.collections_thumb_area,
.collections_image_area {
  position: relative;
  overflow: hidden;
  background-color: #E9E7E2;
}

.collections_thumb_area {
  aspect-ratio: 478 / 554;
}

.collections_image_area {
  height: 100%;
}

.collections_thumb_area img,
.collections_image_area img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* a soft shade at the foot of the close-up keeps the white name readable */
.collections_thumb_area::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.28) 0%, rgba(0, 0, 0, 0) 45%);
  pointer-events: none;
}

.collections_thumb_content_area {
  position: absolute;
  right: 20px;
  bottom: 40px;
  left: 20px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  text-align: center;
}

.collections_thumb_content_area>span {
  color: #FFFFFF;
  font-family: "New Grotesk Mono", monospace;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

/* ==========================================================================
   Footer
   ========================================================================== */

footer {
  border-bottom: 10px solid #AD7300;
  background-color: #FFFFFF;
}

footer .default_label {
  display: block;
  color: #6E6E73;
}

.footer_top_area {
  padding: 80px 0;
  border-bottom: 1px solid #E4E4E1;
}

.footer_newsletter_area .default_label {
  margin-bottom: 20px;
}

.footer_newsletter_row {
  display: flex;
  max-width: 380px;
}

.footer_newsletter_form_area input {
  flex: 1 1 auto;
  min-width: 0;
  height: 42px;
  padding: 0 20px;
  border: 1px solid #D9D9D6;
  border-right: 0;
  border-radius: 0;
  background-color: #FFFFFF;
  color: #000000;
  font-size: 16px;
  outline: none;
  transition: border-color 0.3s ease;
}

.footer_newsletter_form_area input::placeholder {
  color: #86868B;
}

.footer_newsletter_form_area input:focus {
  border-color: #AD7300;
}

.footer_quote_area {
  display: flex;
  justify-content: flex-end;
}

.footer_main_area {
  padding: 80px 0 170px;
}

/* 19em breaks the heading before "and", as in the design */
.footer_header_area h2 {
  max-width: 19em;
  margin: 0 0 96px;
  color: #000000;
}

.footer_social_area .default_label,
.footer_hours_area .default_label {
  margin-bottom: 36px;
}

.footer_social_list_area {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer_social_list_area a {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  height: 36px;
  padding: 0 3px 0 20px;
  border-radius: 18px;
  background-color: #F4F3F0;
  color: #000000;
  font-size: 18px;
  text-decoration: none;
  transition: background-color 0.45s ease, color 0.45s ease;
}

.footer_social_list_area a svg {
  color: #AD7300;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.footer_hours_area p {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 50px;
  color: #000000;
  font-weight: 400;
}

.footer_links_area .default_label {
  margin-bottom: 36px;
}

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

.footer_links_area li+li {
  margin-top: 16px;
}

.footer_links_area a {
  display: inline-block;
  color: #000000;
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-decoration: none;
  transition: color 0.45s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.footer_contact_item_area+.footer_contact_item_area {
  margin-top: 50px;
}

.footer_contact_item_area .default_label {
  margin-bottom: 30px;
}

.footer_contact_item_area a {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  color: #000000;
  font-size: 18px;
  line-height: 1.22;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer_contact_item_area svg {
  flex-shrink: 0;
  color: #AD7300;
}

.footer_bottom_area {
  padding-bottom: 80px;
}

/* the logo is drawn inline in currentColor, so its colour is set here */
.footer_logo_area {
  display: inline-block;
  color: #AD7300;
}

.footer_logo_area svg {
  display: block;
  width: 205px;
  height: auto;
}

.footer_copyright_area p,
.footer_credit_area p,
.footer_credit_area a {
  margin: 0;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.22;
}

.footer_copyright_area p {
  color: #000000;
}

.footer_copyright_area p+p,
.footer_credit_area p {
  color: #86868B;
}

.footer_credit_area {
  text-align: right;
}

.footer_credit_area a {
  display: inline-block;
  color: #000000;
  text-decoration: none;
  transition: color 0.3s ease;
}

@media (hover: hover) {
  .footer_social_list_area a:hover {
    background-color: #ECE8DF;
    color: #AD7300;
  }

  .footer_social_list_area a:hover svg {
    transform: rotate(-12deg);
  }

  .footer_links_area a:hover {
    color: #AD7300;
    transform: translateX(8px);
  }

  .footer_contact_item_area a:hover,
  .footer_credit_area a:hover {
    color: #AD7300;
  }
}

/* ==========================================================================
   Inner page hero (about; reusable on the other inner pages)
   ========================================================================== */

/* on desktop the content lines up with the header bar's edges, as in the design
   (the bar is the container's box; page content normally sits 15px inside it) */
/* flow-root keeps the photo's -44px inside this area, so the area (and the clip
   on the giant word) ends exactly at the bottom of the grey */
.page_hero_area {
  position: relative;
  display: flow-root;
  margin: 0 -15px;
  padding-top: 170px;
}

/* the breadcrumb is first in the markup: flipped to the right here, on top on phones */
.page_hero_header_area {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
}

/* 18.6em (measured: 18.23–18.95em) breaks the heading on the design's lines */
.page_hero_header_area h2 {
  max-width: 18.6em;
  margin: 0;
  color: #000000;
}

.page_hero_line_mask {
  display: block;
  overflow: hidden;
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
}

.page_breadcrumb_area {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 12px;
  padding-top: 6px;
  font-family: "New Grotesk Mono", monospace;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.page_breadcrumb_area a {
  color: #555555;
  text-decoration: none;
  transition: color 0.3s ease;
}

.page_breadcrumb_area a:hover {
  color: #AD7300;
}

.page_breadcrumb_area span {
  color: #9A9A9E;
}

.page_breadcrumb_area [aria-current] {
  color: #AD7300;
}

/* the photo file carries its white frame and soft shadow in a transparent margin
   (25px at the sides and bottom, 17px on top, around a 450x260 frame). The
   percentage margins line the frame itself up with the heading at any size,
   and the area hangs 44px below the grey, over the next section */
.page_hero_image_area {
  position: relative;
  z-index: 2;
  /* flow-root: stops the photo's negative margins merging into this area's own */
  display: flow-root;
  max-width: 450px;
  margin-top: 74px;
  margin-bottom: -44px;
}

.page_hero_image_area img {
  display: block;
  width: 109.333%;
  max-width: none;
  height: auto;
  margin: -3.778% 0 -5.556% -5.556%;
}

/* the giant word is cut off by the bottom edge of the grey */
.page_hero_title_area {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

/* bottom in em so the same share of the letters shows at every size
   (about 73 of the 79px capitals at 120px, as in the design) */
.page_hero_title_area h1 {
  position: absolute;
  right: 0;
  bottom: -0.16em;
  margin: 0;
  color: #DADAD5;
  font-size: 120px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ==========================================================================
   About — our motto
   ========================================================================== */

/* lines up with the header bar's edges on desktop, like the page hero; the extra
   top space clears the hero photo hanging into this section */
.motto_area {
  margin: 0 -15px;
  padding-top: 50px;
}

/* this Bootstrap build pads columns a flat 15px, so match the rows' pull-back to it */
.motto_area>.row {
  --bs-gutter-x: 30px;
}

.motto_label_area {
  padding-top: 8px;
}

/* 18em breaks the heading before "perform", as in the design */
.motto_header_area h2 {
  max-width: 18em;
  margin: 0;
  color: #000000;
}

.motto_line_mask {
  display: block;
  overflow: hidden;
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
}

/* the two photos share a height: their widths keep the design's 320:520 */
.motto_media_area {
  display: grid;
  grid-template-columns: 320fr 520fr;
  column-gap: 30px;
  margin-top: 72px;
}

/* the grey frame holds each photo's shape until the file is added */
.motto_image_area {
  overflow: hidden;
  background-color: #E9E7E2;
}

.motto_media_item_area:first-child .motto_image_area {
  aspect-ratio: 320 / 340;
}

.motto_media_item_area:last-child .motto_image_area {
  aspect-ratio: 520 / 340;
}

.motto_image_area img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.motto_link_area {
  margin-top: 40px;
}

.motto_link_area a {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  color: #000000;
  font-family: "New Grotesk Mono", monospace;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 0.3s ease;
}

/* the underline sits under the words only, not the arrow */
.motto_link_area span {
  padding-bottom: 4px;
  border-bottom: 1px solid currentColor;
}

.motto_link_area svg {
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.motto_text_area {
  margin-top: 40px;
}

.motto_text_area h3 {
  margin: 0 0 14px;
  color: #000000;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
}

.motto_text_area p {
  max-width: 28em;
  color: #3A3A3A;
}

.motto_text_area p+p {
  margin-top: 22px;
}

.motto_list_area {
  max-width: 520px;
  margin-left: auto;
}

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

/* each row's rule is drawn by ::before so the entrance can draw it in (--rule);
   the last row closes the list with one under it too */
.motto_list_area li {
  --rule: 1;
  position: relative;
  display: grid;
  grid-template-columns: 97px 1fr auto;
  align-items: center;
  margin: 0;
  padding: 20px 14px 20px 10px;
  font-size: 22px;
  line-height: 1.2;
}

.motto_list_area li::before,
.motto_list_area li:last-child::after {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  height: 1px;
  background-color: #C9C9C9;
  transform: scaleX(var(--rule));
  transform-origin: left center;
}

.motto_list_area li::before {
  top: 0;
}

.motto_list_area li:last-child::after {
  bottom: 0;
}

.motto_list_area li span {
  transition: color 0.45s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.45s ease;
}

.motto_list_area li span:first-child {
  color: #86868B;
  font-family: "New Grotesk Mono", monospace;
  letter-spacing: 0.02em;
}

.motto_list_area li span:nth-child(2) {
  color: #000000;
}

.motto_list_area li span:last-child {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: #D4D4D4;
}

@media (hover: hover) {
  .motto_link_area a:hover {
    color: #AD7300;
  }

  .motto_link_area a:hover svg {
    transform: translate(3px, -3px);
  }

  .motto_list_area li:hover span:first-child {
    color: #AD7300;
  }

  .motto_list_area li:hover span:nth-child(2) {
    transform: translateX(8px);
  }

  .motto_list_area li:hover span:last-child {
    background-color: #AD7300;
    transform: scale(1.4);
  }
}

/* ==========================================================================
   About — the view (full-screen photo opened by scrolling)
   ========================================================================== */

.view_area {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
}

.view_image_area {
  position: absolute;
  inset: 0;
}

.view_image_area img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.view_card_area {
  position: absolute;
  bottom: 30px;
  left: 30px;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto;
  width: 585px;
  height: 240px;
  border-radius: 4px;
  background-color: #FFFFFF;
  color: #000000;
  text-decoration: none;
}

.view_card_area:hover {
  color: #000000;
}

.view_card_text_area {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 26px 30px 30px;
}

/* hides the heading while it rises into place */
.view_card_mask_area {
  overflow: hidden;
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
}

/* 8.6em breaks the heading on the design's three lines */
.view_card_text_area h2 {
  max-width: 8.6em;
  margin: 0;
  color: #000000;
}

.view_card_arrow_area {
  --rule: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  width: 210px;
  padding: 30px;
}

/* the thin divider, drawn by ::before so it can grow down into place (--rule) */
.view_card_arrow_area::before {
  content: "";
  position: absolute;
  top: 30px;
  bottom: 30px;
  left: 0;
  width: 1px;
  background-color: #E1E1E1;
  transform: scaleY(var(--rule));
  transform-origin: center top;
}

.view_card_arrow_icon_area {
  display: block;
}

.view_card_arrow_icon_area img {
  display: block;
  width: 130px;
  height: auto;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.view_card_area:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 4px;
}

@media (hover: hover) {
  .view_card_area:hover .view_card_arrow_icon_area img {
    transform: translate(6px, -6px);
  }
}

/* ==========================================================================
   About — a growing range
   ========================================================================== */

/* lines up with the header bar's edges on desktop, like the sections above */
.range_area {
  margin: 0 -15px;
}

/* this Bootstrap build pads columns a flat 15px, so match the row's pull-back to it */
.range_area>.row {
  --bs-gutter-x: 30px;
}

/* the square and its heading hold still while the tall photo beside them scrolls */
.range_intro_area {
  position: sticky;
  top: 120px;
}

/* the grey frames hold the photos' shapes while they load */
.range_image_area,
.range_photo_area {
  overflow: hidden;
  background-color: #E9E7E2;
}

.range_image_area {
  max-width: 420px;
  aspect-ratio: 1 / 1;
}

.range_photo_area {
  aspect-ratio: 1020 / 840;
}

.range_image_area img,
.range_photo_area img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.range_header_area {
  margin-top: 50px;
}

.range_header_area h2 {
  margin: 0;
  color: #000000;
}

.range_line_mask {
  display: block;
  overflow: hidden;
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
}

.range_text_area {
  margin-top: 50px;
}

.range_text_area p {
  max-width: 48em;
  color: #3A3A3A;
}

.range_text_area strong {
  color: #000000;
  font-weight: 500;
}

/* ==========================================================================
   About — values (autoplaying)
   ========================================================================== */

/* lines up with the header bar's edges on desktop, like the sections above */
.values_area {
  margin: 0 -15px;
}

/* this Bootstrap build pads columns a flat 15px, so match the rows' pull-back to it */
.values_area>.row {
  --bs-gutter-x: 30px;
}

/* 14em breaks the heading on the design's two lines */
.values_header_area h2 {
  max-width: 14em;
  margin: 0 0 70px;
  color: #000000;
  font-size: 48px;
  line-height: 1.1;
}

.values_line_mask {
  display: block;
  overflow: hidden;
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
}

.values_nav_area {
  max-width: 640px;
}

/* a 1px track with the 2px fill running along it; the script scales the fill
   over each value's time (--rule draws the track in on entrance) */
.values_progress_area {
  --rule: 1;
  position: relative;
  height: 2px;
}

.values_progress_area::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background-color: #C8C8C8;
  transform: scaleX(var(--rule));
  transform-origin: left center;
}

.values_progress_area span {
  position: absolute;
  inset: 0;
  background-color: #000000;
  transform: scaleX(0);
  transform-origin: left center;
}

.values_count_area {
  display: block;
  margin-top: 18px;
  color: #000000;
  font-family: "New Grotesk Mono", monospace;
  font-size: 16px;
  letter-spacing: 0.04em;
  text-align: right;
}

.values_list_area {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 28px;
}

/* the active value grows and steps right to make room for its marker */
.values_list_area button {
  position: relative;
  display: flex;
  align-items: center;
  padding: 12px 0;
  border: 0;
  background: none;
  color: #9A9A9E;
  font: inherit;
  font-size: 18px;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
  transition: color 0.45s ease, font-size 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.values_list_area button svg {
  position: absolute;
  top: 50%;
  left: 10px;
  margin-top: -8px;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.45s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.values_list_area button span {
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.values_list_area button.is_active {
  color: #000000;
  font-size: 30px;
}

.values_list_area button.is_active svg {
  opacity: 1;
  transform: none;
}

.values_list_area button.is_active span {
  transform: translateX(30px);
}

.values_list_area button:focus-visible {
  outline: 1px solid #000000;
  outline-offset: 4px;
}

@media (hover: hover) {
  .values_list_area button:hover {
    color: #000000;
  }
}

/* every panel sits in the same grid cell; only the active one shows */
.values_card_area {
  display: grid;
}

.values_panel_area {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  visibility: hidden;
  opacity: 0;
}

.values_panel_area.is_active {
  visibility: visible;
  opacity: 1;
}

/* two squares side by side: the text and the photo */
.values_panel_text_area {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  aspect-ratio: 1 / 1;
  padding: 40px;
  background-color: #FFFFFF;
}

.values_panel_text_area h3 {
  margin: 0;
  color: #000000;
  font-size: 28px;
  font-weight: 400;
  line-height: 1.2;
}

.values_panel_text_area p {
  max-width: 24em;
  color: #3A3A3A;
}

/* the grey frame holds the photo's shape until it is added */
.values_panel_image_area {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background-color: #E3E1DB;
}

.values_panel_image_area img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==========================================================================
   About — our values (three cards)
   ========================================================================== */

/* lines up with the header bar's edges on desktop, and uses the same label and
   heading columns as Our Motto */
.principles_area {
  margin: 0 -15px;
}

/* this Bootstrap build pads columns a flat 15px, so match the rows' pull-back to it */
.principles_area>.row {
  --bs-gutter-x: 30px;
}

.principles_label_area {
  padding-top: 8px;
}

/* 18.3em (measured: 17.48–19.11em) breaks the heading before "every", as in the design */
.principles_header_area h2 {
  max-width: 18.3em;
  margin: 0;
  color: #000000;
}

.principles_line_mask {
  display: block;
  overflow: hidden;
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
}

.principles_list_area {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px 25px;
  margin-top: 72px;
}

/* the grey frame holds each photo's shape until it is added */
.principles_image_area {
  aspect-ratio: 450 / 520;
  overflow: hidden;
  background-color: #E9E7E2;
}

.principles_image_area img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.principles_text_area {
  margin-top: 34px;
}

.principles_text_area h3 {
  margin: 0 0 2px;
  color: #000000;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
}

.principles_text_area p {
  max-width: 22em;
  color: #3A3A3A;
}

/* ==========================================================================
   Export — stats and globe
   ========================================================================== */

/* lines up with the header bar's edges on desktop, with the same label and heading
   columns as the About page sections */
.export_area {
  margin: 0 -15px;
}

/* this Bootstrap build pads columns a flat 15px, so match the rows' pull-back to it */
.export_area>.row {
  --bs-gutter-x: 30px;
}

.export_label_area {
  padding-top: 8px;
}

/* 18em breaks the heading before "perform", as in the design */
.export_header_area h2 {
  max-width: 18em;
  margin: 0;
  color: #000000;
}

.export_line_mask {
  display: block;
  overflow: hidden;
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
}

/* minmax(0, 1fr): equal columns even though the big numbers can't wrap */
.export_stats_area {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 110px;
}

/* each stat's left rule is drawn by ::before so the entrance can draw it down (--rule) */
.export_stat_item_area {
  --rule: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 330px;
  padding: 25px 40px 0;
}

.export_stat_item_area::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1px;
  background-color: #E3E3E0;
  transform: scaleY(var(--rule));
  transform-origin: center top;
}

.export_stat_item_area img {
  display: block;
  width: 24px;
  height: 24px;
}

.export_stat_item_area p {
  margin-top: 36px;
  color: #000000;
  font-size: 24px;
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.export_stat_item_area p strong {
  font-weight: 500;
}

/* the number sits at the foot of the stat; even-width digits so it doesn't
   shuffle sideways while it counts up */
.export_stat_number_area {
  margin-top: auto;
  color: #000000;
  font-size: clamp(52px, 3.75vw, 72px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.export_stat_number_area strong {
  font-weight: 500;
}

.export_intro_area {
  margin-top: 120px;
}

.export_intro_area .default_label {
  display: block;
  margin-bottom: 40px;
}

/* 14.8em breaks the paragraph on the design's four lines */
.export_intro_area p {
  max-width: 14.8em;
  color: #000000;
  font-size: 28px;
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.export_intro_area p strong {
  font-weight: 500;
}

.export_region_list_area {
  display: grid;
  grid-template-columns: repeat(3, 140px);
  gap: 10px;
  margin-top: 55px;
}

.export_region_list_area button {
  height: 40px;
  padding: 0 10px;
  border: 1px solid #D9D9D6;
  border-radius: 20px;
  background-color: transparent;
  color: #000000;
  font-family: "New Grotesk Mono", monospace;
  font-size: 14px;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background-color 0.35s ease, border-color 0.35s ease, color 0.35s ease;
}

.export_region_list_area button[aria-pressed="true"] {
  border-color: #AD7300;
  background-color: #AD7300;
  color: #FFFFFF;
}

.export_region_list_area button:focus-visible {
  outline: 1px solid #000000;
  outline-offset: 3px;
}

@media (hover: hover) {
  .export_region_list_area button[aria-pressed="false"]:hover {
    border-color: #000000;
  }
}

.export_globe_area {
  position: relative;
  width: 100%;
  max-width: 650px;
  aspect-ratio: 1 / 1;
  margin: 120px auto 0;
}

/* sideways drags turn the globe; up and down still scroll the page on touch screens */
.export_globe_area canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
  touch-action: pan-y;
}

.export_globe_area canvas:active {
  cursor: grabbing;
}

/* read out to screen readers only */
.export_globe_status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ==========================================================================
   Export — markets (countries by region)
   ========================================================================== */

/* lines up with the header bar's edges on desktop, like the sections above */
.markets_area {
  margin: 0 -15px;
}

/* this Bootstrap build pads columns a flat 15px, so match the rows' pull-back to it */
.markets_area>.row {
  --bs-gutter-x: 30px;
}

/* 17em breaks the heading on the design's two lines */
.markets_header_area h2 {
  max-width: 17em;
  margin: 0 0 75px;
  color: #000000;
}

.markets_line_mask {
  display: block;
  overflow: hidden;
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
}

.markets_card_area {
  position: relative;
  height: 100%;
  padding: 35px;
  overflow: hidden;
  border: 1px solid #E3E3DF;
  background-color: #F6F6F3;
}

/* the region's small map, drawn by the script in the card's --map tint */
.markets_map_area {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 120px;
  height: 80px;
  pointer-events: none;
}

.markets_map_area svg {
  display: block;
  width: 100%;
  height: 100%;
}

.markets_map_area path {
  fill: var(--map);
}

.markets_card_area h3 {
  position: relative;
  margin: 0;
  color: #000000;
  font-family: "New Grotesk Mono", monospace;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.markets_card_area>span {
  position: relative;
  display: block;
  margin-top: 12px;
  color: #86868B;
  font-family: "New Grotesk Mono", monospace;
  font-size: 14px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.markets_card_area ul {
  margin: 58px 0 0;
  padding: 0;
  list-style: none;
}

.markets_card_area li {
  display: flex;
  align-items: center;
  gap: 30px;
  margin: 0;
}

.markets_card_area li+li {
  margin-top: 25px;
}

/* a faint edge so light flags (Poland, Japan…) don't melt into the card */
.markets_card_area li img {
  display: block;
  flex-shrink: 0;
  width: 40px;
  height: 24px;
  object-fit: cover;
  outline: 1px solid rgba(0, 0, 0, 0.06);
  outline-offset: -1px;
}

.markets_card_area li span {
  color: #222222;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ==========================================================================
   Export — enquiry form and banner
   ========================================================================== */

/* lines up with the header bar's edges on desktop, like the sections above */
.enquiry_area {
  margin: 0 -15px;
}

/* this Bootstrap build pads columns a flat 15px, so match the rows' pull-back to it */
.enquiry_area>.row {
  --bs-gutter-x: 30px;
}

.enquiry_label_area {
  padding-top: 8px;
}

/* 18.3em breaks the heading before "every", as in the design */
.enquiry_header_area h2 {
  max-width: 18.3em;
  margin: 0;
  color: #000000;
}

/* the Contact page heading is shorter: 12.5em breaks it after "with a", as in the design */
.enquiry_header_area.is_short h2 {
  max-width: 12.5em;
}

.enquiry_line_mask {
  display: block;
  overflow: hidden;
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
}

.enquiry_form_area {
  margin-top: 96px;
}

/* a grid rather than a nested Bootstrap row, so the fields line up exactly with the heading */
.enquiry_fields_area {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px 50px;
}

.enquiry_field_area.is_message {
  grid-column: 1 / -1;
}

/* the grey underline is ::before (drawn in on entrance with --rule); the gold one,
   ::after, draws across the field that has focus */
.enquiry_field_area {
  --rule: 1;
  position: relative;
  padding-top: 22px;
}

.enquiry_field_area::before,
.enquiry_field_area::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  transform-origin: left center;
}

.enquiry_field_area::before {
  background-color: #C8C8C6;
  transform: scaleX(var(--rule));
}

.enquiry_field_area::after {
  background-color: #AD7300;
  transform: scaleX(0);
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.enquiry_field_area:focus-within::after {
  transform: scaleX(1);
}

/* height and margin reset: a global text-input rule was making text fields taller than
   the email and number ones */
.enquiry_field_area input,
.enquiry_field_area textarea {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0 0 18px;
  box-shadow: none;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #000000;
  font: inherit;
  font-size: 18px;
  line-height: 1.3;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.enquiry_field_area textarea {
  height: 90px;
  resize: vertical;
}

/* no spinner arrows on the quantity */
.enquiry_field_area input[type="number"] {
  -moz-appearance: textfield;
}

.enquiry_field_area input[type="number"]::-webkit-inner-spin-button,
.enquiry_field_area input[type="number"]::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.enquiry_field_area input::placeholder,
.enquiry_field_area textarea::placeholder {
  color: transparent;
}

/* the label sits in the field like a placeholder, then floats up once it's in use */
.enquiry_field_area label {
  position: absolute;
  top: 22px;
  left: 0;
  margin: 0;
  color: #86868B;
  font-size: 18px;
  line-height: 1.3;
  pointer-events: none;
  transform-origin: left top;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), color 0.3s ease;
}

.enquiry_field_area input:focus+label,
.enquiry_field_area input:not(:placeholder-shown)+label,
.enquiry_field_area textarea:focus+label,
.enquiry_field_area textarea:not(:placeholder-shown)+label {
  color: #000000;
  transform: translateY(-24px) scale(0.72);
}

/* only once someone has interacted with a field and left it wrong */
.enquiry_field_area input:user-invalid+label,
.enquiry_field_area textarea:user-invalid+label {
  color: #B3261E;
}

.enquiry_form_area .default_button {
  margin-top: 80px;
}

/* the banner: the full 1480 of the narrow container, the heading over the photo */
.enquiry_banner_area {
  position: relative;
  aspect-ratio: 1480 / 524;
  margin: 0 -15px;
  overflow: hidden;
  background-color: #4A4441;
}

.enquiry_banner_area img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 13.9em breaks the heading on the design's three lines */
.enquiry_banner_area h2 {
  position: absolute;
  top: 56px;
  left: 60px;
  z-index: 1;
  max-width: 13.9em;
  margin: 0;
  color: #FFFFFF;
}

.top_padding {
  padding-top: 120px;
}

/* ==========================================================================
   Blog — list with topic filter
   ========================================================================== */

/* lines up with the header bar's edges on desktop, like the other inner pages */
.blog_area {
  margin: 0 -15px;
}

/* this Bootstrap build pads columns a flat 15px, so match the rows' pull-back to it */
.blog_area>.row {
  --bs-gutter-x: 30px;
}

.blog_header_area h2 {
  margin: 0 0 70px;
  color: #000000;
}

.blog_line_mask {
  display: block;
  overflow: hidden;
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
}

/* holds still beside the articles while they scroll */
.blog_filter_area {
  position: sticky;
  top: 120px;
  max-width: 376px;
  border-top: 4px solid #AD7300;
  background-color: #F1F1EE;
}

.blog_filter_area fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

.blog_filter_area legend {
  float: none;
  width: 100%;
  margin: 0;
  padding: 24px 30px;
  border-bottom: 1px solid #E2E2DE;
  color: #000000;
  font-family: "New Grotesk Mono", monospace;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.blog_filter_list_area {
  display: flex;
  flex-direction: column;
  padding: 16px 30px 40px;
}

.blog_filter_item_area {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 10px 0;
  color: #222222;
  font-size: 15px;
  line-height: 1.2;
  cursor: pointer;
}

/* a small square box; ticked it fills gold with a white tick */
.blog_filter_item_area input {
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  margin: 0;
  border: 1.5px solid #222222;
  border-radius: 4px;
  background: transparent center / 11px no-repeat;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

.blog_filter_item_area input:checked {
  border-color: #AD7300;
  background-color: #AD7300;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2 6.2l2.6 2.6L10 3.4' stroke='%23FFFFFF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.blog_filter_item_area input:focus-visible {
  outline: 1px solid #000000;
  outline-offset: 3px;
}

.blog_grid_area {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 72px 40px;
}

/* this Bootstrap build has no [hidden] rule, so filtered-out articles need their own */
.blog_post_area[hidden],
.blog_empty_area[hidden] {
  display: none;
}

.blog_post_area a {
  display: block;
  color: #000000;
  text-decoration: none;
}

/* the grey frame holds the photo's shape until it is added */
.blog_post_image_area {
  aspect-ratio: 625 / 397;
  overflow: hidden;
  background-color: #E9E7E2;
}

.blog_post_image_area img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog_post_text_area {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  margin-top: 40px;
}

.blog_post_text_area h3 {
  margin: 0;
  color: #000000;
  /* font-size: 24px; */
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
  transition: color 0.35s ease;
}

.blog_post_text_area svg {
  flex-shrink: 0;
  margin-top: 6px;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.blog_post_area a:focus-visible {
  outline: 1px solid #000000;
  outline-offset: 6px;
}

@media (hover: hover) {
  .blog_post_area a:hover h3 {
    color: #AD7300;
  }

  .blog_post_area a:hover svg {
    transform: translateX(6px);
  }
}

.blog_empty_area {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  grid-column: 1 / -1;
  gap: 16px;
  padding: 60px 0 20px;
}

.blog_empty_area h3 {
  margin: 0;
  color: #000000;
  font-size: 32px;
}

.blog_empty_area p {
  color: #6D6D6D;
  font-size: 16px;
}

.blog_empty_area .default_button {
  margin-top: 10px;
}

/* read out to screen readers only */
.blog_status_area,
.blog_hidden_label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* the search box above the topic filter: an underlined field, same family as collection's */
.blog_search_area {
  position: relative;
  max-width: 376px;
  margin-bottom: 30px;
}

.blog_search_area input {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0 36px 18px 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  color: #000000;
  font: inherit;
  font-size: 18px;
  line-height: 1.3;
  outline: none;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}

.blog_search_area::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background-color: #C8C8C6;
  transition: background-color 0.3s ease;
}

.blog_search_area:focus-within::after {
  background-color: #000000;
}

.blog_search_area input::placeholder {
  color: #86868B;
}

.blog_search_area input::-webkit-search-cancel-button {
  display: none;
}

.blog_search_area svg {
  position: absolute;
  top: 1px;
  right: 2px;
  color: #6E6E73;
  pointer-events: none;
}

.blog_filter_item_area span {
  flex: 1;
}

.blog_filter_item_area em {
  color: #9A9A9E;
  font-family: "New Grotesk Mono", monospace;
  font-size: 12px;
  font-style: normal;
}

/* a topic with nothing to show under the current search stays readable but steps back */
.blog_filter_item_area.is_empty {
  opacity: 0.4;
}

/* date (and, if there's room, the first topic) above the title */
.blog_post_meta_area {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-top: 24px;
  color: #9A9A9E;
  font-family: "New Grotesk Mono", monospace;
  font-size: 13px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.blog_post_meta_area span {
  white-space: nowrap;
}

.blog_post_text_area {
  margin-top: 14px;
}

/* no date and no topic (shouldn't happen from the admin, but just in case): straight to the title */
.blog_post_image_area+.blog_post_text_area {
  margin-top: 40px;
}

/* the "showing N articles" line and the active-filter chips above the grid */
.blog_meta_bar_area {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 30px;
  margin-bottom: 44px;
}

.blog_meta_bar_area p {
  color: #6D6D6D;
  font-size: 16px;
}

.blog_meta_bar_area strong {
  color: #000000;
  font-weight: 400;
}

.blog_chips_area {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.blog_chips_area a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 34px;
  padding: 0 14px;
  border: 1px solid #D9D8D3;
  color: #000000;
  font-size: 14px;
  text-decoration: none;
  transition: border-color 0.3s ease, color 0.3s ease;
}

.blog_chips_area a:hover {
  border-color: #AD7300;
  color: #AD7300;
}

.blog_chips_area a.is_clear {
  border-color: transparent;
  padding: 0 4px;
  color: #6D6D6D;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* while new results load the grid steps back */
.blog_results_area.is_loading {
  opacity: 0.45;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.blog_pager_area {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 90px;
  padding-top: 30px;
  border-top: 1px solid #E2E2DE;
}

.blog_pager_list_area {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 auto;
}

.blog_pager_area a,
.blog_pager_list_area span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 40px;
  height: 40px;
  color: #000000;
  font-family: "New Grotesk Mono", monospace;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-decoration: none;
  text-transform: uppercase;
}

.blog_pager_list_area span {
  color: #9A9A9E;
}

.blog_pager_list_area a {
  position: relative;
}

/* the current page is underlined in gold */
.blog_pager_list_area a::after {
  content: "";
  position: absolute;
  right: 10px;
  bottom: 6px;
  left: 10px;
  height: 1px;
  background-color: #AD7300;
  transform: scaleX(0);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.blog_pager_list_area a[aria-current],
.blog_pager_area a:hover {
  color: #AD7300;
}

.blog_pager_list_area a[aria-current]::after,
.blog_pager_list_area a:hover::after {
  transform: scaleX(1);
}

.blog_pager_area a.is_arrow svg {
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.blog_pager_area a.is_arrow[rel="prev"]:hover svg {
  transform: translateX(-6px);
}

.blog_pager_area a.is_arrow[rel="next"]:hover svg {
  transform: translateX(6px);
}

/* ==========================================================================
   Blog — article (blog-detail.php)
   ========================================================================== */

.blog_detail_area {
  margin: 0 -15px;
  padding: 150px 0 60px;
  justify-items: center;
}

.blog_detail_area .page_breadcrumb_area {
  flex-wrap: wrap;
  margin-bottom: 48px;
}

.blog_detail_topics_area {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 24px;
}

.blog_detail_topic_pill {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 16px;
  border: 1px solid #D9D8D3;
  color: #6D6D6D;
  font-family: "New Grotesk Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-decoration: none;
  text-transform: uppercase;
  transition: border-color 0.3s ease, color 0.3s ease;
}

.blog_detail_topic_pill:hover {
  border-color: #AD7300;
  color: #AD7300;
}

.blog_detail_header_area {
  display: block;
  position: relative;
  margin-bottom: 40px;
}

.blog_detail_header_area h1 {
  margin: 0 0 24px;
  color: #000000;
  font-size: clamp(28px, 3.2vw, 48px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.blog_detail_title_mask {
  display: block;
  overflow: hidden;
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
}

.blog_detail_meta_area {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-bottom: 20px;
  color: #AD7300;
  font-family: "New Grotesk Mono", monospace;
  font-size: 13px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* sits right in the meta line here, unlike the plain text either side of it — gold like the
   date and reading time next to it, not the neutral grey the same pill uses elsewhere (e.g.
   "Filed under") */
.blog_detail_meta_area .blog_detail_topic_pill {
  height: 28px;
  padding: 0 14px;
  border-color: #AD7300;
  color: #AD7300;
  font-size: 11px;
}

/* two columns from tablet up: a sticky sidebar (contents, share, enquiry) beside the article.
   Below that, both become one column and the sidebar drops after the article — see
   the max-width: 991px rule in responsive.css */
.blog_detail_layout_area {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  align-items: start;
  gap: 30px 60px;
}

.blog_detail_sidebar_area {
  position: sticky;
  top: 15px;
}


/* the same card as the blog list's "Filter by topic" (.blog_filter_area): a gold top edge on a
   light box, with the heading set off by its own underline. padding-bottom (not the list's own
   margin) closes the card, because a last child's bottom margin collapses straight through a
   plain block and escapes below the grey background instead of sitting inside it — with a long
   list of headings that showed up as no breathing room at all above the card's bottom edge */
.blog_detail_toc_area {
  margin-bottom: 30px;
  padding-bottom: 40px;
  border-top: 4px solid #AD7300;
  background-color: #F1F1EE;
}

.blog_detail_toc_heading {
  display: block;
  padding: 24px 30px;
  border-bottom: 1px solid #E2E2DE;
  color: #000000;
  font-family: "New Grotesk Mono", monospace;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* the rail down the left is the ul's own border; each item's dot sits on it */
.blog_detail_toc_area ul {
  margin: 16px 30px 0;
  padding-left: 20px;
  list-style: none;
  border-left: 1px solid #E2E2DE;
}

.blog_detail_toc_area li {
  position: relative;
}

.blog_detail_toc_area li+li {
  margin-top: 16px;
}

.blog_detail_toc_area li::before {
  content: "";
  position: absolute;
  top: 0.55em;
  left: -24px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: #D9D8D3;
  transform: translateY(-50%);
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.blog_detail_toc_area a {
  display: block;
  color: #6D6D6D;
  font-size: 14px;
  line-height: 1.4;
  text-decoration: none;
  transition: color 0.3s ease;
}

.blog_detail_toc_area a:hover {
  color: #000000;
}

.blog_detail_toc_area a.is_active {
  color: #AD7300;
}

.blog_detail_toc_area li.is_active::before {
  background-color: #AD7300;
  transform: translateY(-50%) scale(1.3);
}

/* the same card family as the table of contents above it: a gold top edge on a light box,
   centred since a left-aligned label and icon row here read as unstyled next to the ToC card
   and the solid-gold CTA card either side of it */
.blog_detail_social_area {
  margin-bottom: 30px;
  padding: 26px 30px 30px;
  border-top: 4px solid #AD7300;
  background-color: #F1F1EE;
  text-align: center;
}

.blog_detail_social_area>.default_label {
  display: block;
  margin-bottom: 16px;
}

.blog_detail_social_list_area {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.blog_detail_social_list_area a,
.blog_detail_social_list_area button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid #D9D8D3;
  border-radius: 50%;
  background-color: transparent;
  color: #000000;
  cursor: pointer;
  transition: border-color 0.3s ease, color 0.3s ease;
}

.blog_detail_social_list_area a:hover,
.blog_detail_social_list_area button:hover {
  border-color: #AD7300;
  color: #AD7300;
}

.blog_detail_social_note {
  display: block;
  margin-top: 10px;
  color: #AD7300;
  font-size: 13px;
}

/* the grey frame holds the photo's shape until it is added */
.blog_detail_cover_area {
  overflow: hidden;
  max-width: 100%;
  margin-bottom: 40px;
}

.blog_detail_cover_area img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* the article body: only the tags the admin's editor can save (see clean_blog_html()) need
   styling here */
.blog_detail_content_area {
  color: #3A3A3A;
  font-size: 18px;
  line-height: 1.75;
}

.blog_detail_content_area>*:first-child {
  margin-top: 0;
}

.blog_detail_content_area h2 {
  margin: 46px 0 20px;
  color: #000000;
  font-size: clamp(26px, 3vw, 32px);
  font-weight: 400;
  line-height: 1.15;
}

.blog_detail_content_area h3 {
  margin: 40px 0 16px;
  color: #000000;
  font-size: clamp(20px, 2.4vw, 24px);
  font-weight: 400;
}

.blog_detail_content_area h4,
.blog_detail_content_area h5,
.blog_detail_content_area h6 {
  margin: 30px 0 14px;
  color: #000000;
  font-weight: 400;
}

.blog_detail_content_area p {
  margin: 0 0 24px;
  font-size: inherit;
  line-height: inherit;
  font-weight: 300;
}

.blog_detail_content_area ul,
.blog_detail_content_area ol {
  margin: 0 0 24px;
  padding-left: 22px;
}

.blog_detail_content_area li {
  margin-bottom: 10px;
  font-size: inherit;
  line-height: 1.65;
}

.blog_detail_content_area li::marker {
  color: #AD7300;
}

.blog_detail_content_area a {
  color: #AD7300;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.blog_detail_content_area strong,
.blog_detail_content_area b {
  color: #000000;
  font-weight: 500;
}

.blog_detail_content_area blockquote {
  margin: 36px 0;
  padding: 2px 0 2px 28px;
  border-left: 3px solid #AD7300;
  color: #000000;
  font-size: 1.1em;
  font-style: italic;
  line-height: 1.5;
}

.blog_detail_content_area img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 36px 0;
  border-radius: 4px;
}

.blog_detail_content_area figure {
  margin: 36px 0;
}

.blog_detail_content_area figure img {
  margin: 0 0 12px;
}

.blog_detail_content_area figcaption {
  color: #86868B;
  font-size: 14px;
  text-align: center;
}

.blog_detail_content_area hr {
  margin: 48px 0;
  border: 0;
  border-top: 1px solid #E2E2DE;
}

.blog_detail_content_area table {
  width: 100%;
  margin: 32px 0;
  border-collapse: collapse;
  font-size: 16px;
}

.blog_detail_content_area th,
.blog_detail_content_area td {
  padding: 12px 14px;
  border: 1px solid #E2E2DE;
  text-align: left;
}

.blog_detail_content_area th {
  background-color: #F7F6F3;
  color: #000000;
  font-weight: 500;
}

.blog_detail_content_area code {
  padding: 2px 6px;
  border-radius: 3px;
  background-color: #F1F1EE;
  font-family: monospace;
  font-size: 0.9em;
}

.blog_detail_content_area pre {
  margin: 28px 0;
  padding: 20px;
  border-radius: 4px;
  background-color: #1B1B1B;
  color: #EDEDED;
  overflow-x: auto;
}

.blog_detail_content_area pre code {
  padding: 0;
  background-color: transparent;
  color: inherit;
}

.blog_detail_tags_area {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid #E2E2DE;
}

/* the sidebar's enquiry prompt: gold like the site's other calls to action, sized to the column */
.blog_detail_cta_area {
  padding: 30px 26px;
  background-color: #AD7300;
}

.blog_detail_cta_area h3 {
  margin: 0 0 10px;
  color: #FFFFFF;
  font-size: 20px;
}

.blog_detail_cta_area p {
  margin: 0 0 22px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.5;
}

.blog_detail_cta_area .default_button {
  width: 100%;
}

/* a plain previous/next strip under the article, in the same family as the blog list's pager */
.blog_detail_adjacent_area {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 30px;
  margin-top: 70px;
  padding-top: 30px;
  border-top: 1px solid #E2E2DE;
}

.blog_detail_adjacent_area a {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 46%;
  color: #000000;
  text-decoration: none;
}

.blog_detail_adjacent_area a.is_next {
  margin-left: auto;
  text-align: right;
}

.blog_detail_adjacent_area small {
  display: block;
  margin-bottom: 4px;
  color: #9A9A9E;
  font-family: "New Grotesk Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.blog_detail_adjacent_area span {
  display: block;
  font-size: 16px;
  line-height: 1.3;
  transition: color 0.3s ease;
}

.blog_detail_adjacent_area svg {
  flex-shrink: 0;
  transition: transform 0.35s ease;
}

@media (hover: hover) {
  .blog_detail_adjacent_area a:hover span {
    color: #AD7300;
  }

  .blog_detail_adjacent_area a.is_prev:hover svg {
    transform: translateX(-5px);
  }

  .blog_detail_adjacent_area a.is_next:hover svg {
    transform: translateX(5px);
  }
}

/* appears once the reader has scrolled a little way into the article (usap/blog-detail.js) */
.blog_scroll_top_area {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: #AD7300;
  color: #FFFFFF;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.3s ease;
}

.blog_scroll_top_area.is_visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.blog_scroll_top_area:hover {
  background-color: #000000;
}

.blog_detail_missing_area {
  max-width: 32em;
  margin-top: 50px;
}

.blog_detail_missing_area h1 {
  margin: 0 0 16px;
  color: #000000;
  font-size: 40px;
}

.blog_detail_missing_area p {
  margin: 0 0 28px;
  color: #6D6D6D;
  font-size: 16px;
  font-weight: 300;
}

/* ==========================================================================
   Download — catalogue grid (layout only; filter and search wired up later)
   ========================================================================== */

/* lines up with the header bar's edges on desktop, like the other inner pages */
.downloads_area {
  margin: 0 -15px;
}

/* this Bootstrap build pads columns a flat 15px, so match the rows' pull-back to it */
.downloads_area>.row {
  --bs-gutter-x: 30px;
}

.downloads_header_area h2 {
  margin: 0;
  color: #000000;
}

.downloads_line_mask {
  display: block;
  overflow: hidden;
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
}

.downloads_controls_area {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 450px));
  gap: 50px;
  margin-top: 70px;
}

/* the underline is ::before so the entrance can draw it across (--rule) */
.downloads_field_area {
  --rule: 1;
  position: relative;
  color: #86868B;
}

.downloads_field_area::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background-color: #C8C8C6;
  transform: scaleX(var(--rule));
  transform-origin: left center;
  transition: background-color 0.3s ease;
}

.downloads_field_area:focus-within::before {
  background-color: #000000;
}

.downloads_field_area select,
.downloads_field_area input {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0 36px 18px 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  color: #000000;
  font: inherit;
  font-size: 18px;
  line-height: 1.3;
  outline: none;
  box-shadow: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

/* the dropdown's chevron */
.downloads_field_area select {
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10' fill='none'%3E%3Cpath d='M1.5 1.5L8 8l6.5-6.5' stroke='%23000000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 4px top 6px / 15px 10px no-repeat;
}

/* grey like a placeholder until a choice is made (wired up with the admin panel);
   the options themselves stay black */
.downloads_field_area select {
  color: #86868B;
}

.downloads_field_area select.is_chosen {
  color: #000000;
}

.downloads_field_area select option {
  color: #000000;
}

/* matched on type too, so the search box keeps the same size as the dropdown */
.downloads_field_area input[type="search"] {
  font-size: 18px;
  line-height: 1.3;
}

.downloads_field_area input {
  cursor: text;
}

.downloads_field_area input::placeholder {
  color: #86868B;
}

.downloads_field_area input::-webkit-search-cancel-button {
  display: none;
}

.downloads_field_area svg {
  position: absolute;
  top: 1px;
  right: 2px;
  color: #6E6E73;
  pointer-events: none;
}

/* visible to screen readers only; the placeholder and the first option carry the visible label */
.downloads_hidden_label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.downloads_grid_area {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 90px 50px;
  margin-top: 80px;
}

/* shown instead of the grid when a search or category has no match */
.downloads_empty_area {
  margin: 80px 0 0;
  color: #86868B;
  font-size: 18px;
  line-height: 1.5;
}

.downloads_empty_area a {
  margin-left: 12px;
  color: #000000;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.downloads_link_area {
  display: block;
  color: #000000;
  text-decoration: none;
}

/* the grey frame holds the cover's shape until it is added */
.downloads_cover_area {
  aspect-ratio: 400 / 565;
  overflow: hidden;
  background-color: #E9E7E2;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.downloads_cover_area img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.downloads_item_area h3 {
  margin: 30px 0 0;
  color: #000000;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
  transition: color 0.35s ease;
}

a.downloads_link_area:focus-visible {
  outline: 1px solid #000000;
  outline-offset: 6px;
}

@media (hover: hover) {
  .downloads_link_area:hover .downloads_cover_area {
    transform: translateY(-6px);
  }

  .downloads_link_area:hover h3 {
    color: #AD7300;
  }
}

/* ==========================================================================
   Contact — map (full width)
   ========================================================================== */

.map_frame_area {
  position: relative;
  height: 700px;
  overflow: hidden;
  background-color: #E9E7E2;
}

/* muted until someone clicks in to use it */
.map_frame_area iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(1) contrast(0.95);
  transition: filter 0.6s ease;
}

.map_frame_area.is_active iframe {
  filter: none;
}

/* covers the map until it's clicked, so scrolling over it scrolls the page. The label sits
   top-right, clear of the Letoza pin in the middle and of Google's own card and controls;
   clicking anywhere on the map wakes it */
.map_shield_area {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 20px;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.map_shield_area span {
  padding: 13px 22px;
  background-color: #FFFFFF;
  color: #000000;
  font-family: "New Grotesk Mono", monospace;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.3s ease, color 0.3s ease;
}

.map_shield_area:focus-visible span {
  outline: 1px solid #000000;
  outline-offset: 4px;
}

@media (hover: hover) {
  .map_shield_area:hover span {
    background-color: #AD7300;
    color: #FFFFFF;
    transform: translateY(-3px);
  }
}

/* puts the cover back (the way out on touch screens, where the pointer never leaves) */
.map_close_area {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  background-color: #FFFFFF;
  color: #000000;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
  cursor: pointer;
}

/* this Bootstrap build has no [hidden] rule, so the map controls need their own */
.map_shield_area[hidden],
.map_close_area[hidden] {
  display: none;
}

/* a container laid over the map's foot, so the card lines up with the page; it lets clicks
   through to the map everywhere except on the card itself */
.map_card_holder_area {
  position: absolute;
  right: 0;
  bottom: 30px;
  left: 0;
  z-index: 2;
  pointer-events: none;
}

/* on desktop the card's edge meets the header bar's edge (the container's box) */
.map_card_area {
  width: 420px;
  margin-left: -12px;
  padding: 34px 34px 36px;
  background-color: #FFFFFF;
  pointer-events: auto;
}

.map_card_area address,
.map_card_area p {
  margin: 18px 0 0;
  color: #000000;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.3;
}

.map_card_area p:last-of-type {
  color: #6E6E73;
}

.map_card_area p a {
  color: #000000;
  text-decoration: none;
  transition: color 0.3s ease;
}

.map_card_area .default_button {
  margin-top: 28px;
}

@media (hover: hover) {
  .map_card_area p a:hover {
    color: #AD7300;
  }
}

/* ==========================================================================
   Collection — filter panel, search and sort, design cards, pager
   ========================================================================== */

/* lines up with the header bar's edges on desktop, like the other inner pages */
.collection_area {
  margin: 0 -15px;
}

/* this Bootstrap build pads columns a flat 15px, so match the rows' pull-back to it */
.collection_area>.row {
  --bs-gutter-x: 30px;
}

.collection_header_area h2 {
  max-width: 15em;
  margin: 0 0 70px;
  color: #000000;
}

.collection_line_mask {
  display: block;
  overflow: hidden;
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
}

.collection_intro_area {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 376px;
}

.collection_intro_area .default_label {
  color: #AD7300;
}

.collection_intro_area p {
  color: #6D6D6D;
  font-size: 16px;
  line-height: 1.4;
}

/* the mobile-only button that opens the filter panel */
.collection_filter_toggle {
  display: none;
}

/* holds still beside the grid while it scrolls, in the blog filter's style */
.collection_filter_area {
  position: sticky;
  top: 120px;
  max-width: 376px;
  max-height: calc(100vh - 140px);
  overflow-y: auto;
  border-top: 4px solid #AD7300;
  background-color: #F1F1EE;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.collection_filter_group_area {
  margin: 0;
  padding: 0;
  border: 0;
}

.collection_filter_group_area+.collection_filter_group_area {
  border-top: 1px solid #E2E2DE;
}

.collection_filter_group_area legend {
  float: none;
  width: 100%;
  margin: 0;
  padding: 22px 30px 6px;
  color: #000000;
  font-family: "New Grotesk Mono", monospace;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.collection_filter_list_area {
  display: flex;
  flex-direction: column;
  padding: 6px 30px 20px;
}

.collection_filter_item_area {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 8px 0;
  color: #222222;
  font-size: 15px;
  line-height: 1.2;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

/* a small square box, as in the blog filter; ticked it fills gold with a white tick */
.collection_filter_item_area input {
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  margin: 0;
  border: 1.5px solid #222222;
  border-radius: 4px;
  background: transparent center / 11px no-repeat;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

.collection_filter_item_area input:checked {
  border-color: #AD7300;
  background-color: #AD7300;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2 6.2l2.6 2.6L10 3.4' stroke='%23FFFFFF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.collection_filter_item_area input:focus-visible {
  outline: 1px solid #000000;
  outline-offset: 3px;
}

.collection_filter_item_area span {
  flex: 1;
}

.collection_filter_item_area em {
  color: #9A9A9E;
  font-family: "New Grotesk Mono", monospace;
  font-size: 12px;
  font-style: normal;
}

/* an option with nothing to show under the other filters stays readable but steps back */
.collection_filter_item_area.is_empty {
  opacity: 0.4;
}

.collection_filter_item_area i {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 50%;
  background: var(--swatch);
}

.collection_filter_area noscript .default_button {
  margin: 0 30px 30px;
}

.collection_controls_area {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 240px);
  gap: 50px;
}

/* the downloads page's underline field: search and sort */
.collection_field_area {
  position: relative;
}

.collection_field_area::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background-color: #C8C8C6;
  transition: background-color 0.3s ease;
}

.collection_field_area:focus-within::after {
  background-color: #000000;
}

.collection_field_area input,
.collection_field_area select {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0 36px 18px 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  color: #000000;
  font: inherit;
  font-size: 18px;
  line-height: 1.3;
  outline: none;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}

.collection_field_area input[type="search"] {
  font-size: 18px;
}

.collection_field_area input::placeholder {
  color: #86868B;
}

.collection_field_area input::-webkit-search-cancel-button {
  display: none;
}

.collection_field_area select {
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10' fill='none'%3E%3Cpath d='M1.5 1.5L8 8l6.5-6.5' stroke='%23000000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 4px top 6px / 15px 10px no-repeat;
  cursor: pointer;
}

.collection_field_area svg {
  position: absolute;
  top: 1px;
  right: 2px;
  color: #6E6E73;
  pointer-events: none;
}

.collection_hidden_label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.collection_status_area {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 30px;
  margin: 36px 0 44px;
}

.collection_status_area p {
  color: #6D6D6D;
  font-size: 16px;
}

.collection_status_area strong {
  color: #000000;
  font-weight: 400;
}

.collection_chips_area {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.collection_chips_area a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 34px;
  padding: 0 14px;
  border: 1px solid #D9D8D3;
  color: #000000;
  font-size: 14px;
  text-decoration: none;
  transition: border-color 0.3s ease, color 0.3s ease;
}

.collection_chips_area a:hover {
  border-color: #AD7300;
  color: #AD7300;
}

.collection_chips_area a.is_clear {
  border-color: transparent;
  padding: 0 4px;
  color: #6D6D6D;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.collection_grid_area {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 70px 30px;
}

.collection_grid_area.is_four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.collection_card_area a {
  display: block;
  color: #000000;
  text-decoration: none;
}

/* the grey frame holds the image's shape until it loads; the tile's own face fades in
   over the room render on hover */
.collection_card_image_area {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: #E9E7E2;
}

.collection_card_image_area img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.55s ease;
}

.collection_card_image_area img+img {
  opacity: 0;
}

.collection_card_text_area {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 24px;
}

.collection_card_text_area .default_label {
  color: #AD7300;
  font-size: 12px;
}

.collection_card_title_area {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.collection_card_title_area h3 {
  margin: 0;
  color: #000000;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
  transition: color 0.35s ease;
}

.collection_card_title_area svg {
  flex-shrink: 0;
  margin-top: 5px;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.collection_card_text_area p {
  color: #6D6D6D;
  font-size: 15px;
  line-height: 1.3;
}

.collection_card_area a:focus-visible {
  outline: 1px solid #000000;
  outline-offset: 6px;
}

@media (hover: hover) {
  .collection_card_area a:hover .collection_card_image_area img {
    transform: scale(1.04);
  }

  .collection_card_area a:hover .collection_card_image_area img+img {
    opacity: 1;
  }

  .collection_card_area a:hover h3 {
    color: #AD7300;
  }

  .collection_card_area a:hover svg {
    transform: translateX(6px);
  }
}

.collection_empty_area {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 60px 0 20px;
}

.collection_empty_area h3 {
  margin: 0;
  color: #000000;
  font-size: 32px;
}

.collection_empty_area p {
  color: #6D6D6D;
  font-size: 16px;
}

.collection_empty_area .default_button {
  margin-top: 10px;
}

.collection_pager_area {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 90px;
  padding-top: 30px;
  border-top: 1px solid #E2E2DE;
}

.collection_pager_list_area {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 auto;
}

.collection_pager_area a,
.collection_pager_list_area span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 40px;
  height: 40px;
  color: #000000;
  font-family: "New Grotesk Mono", monospace;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-decoration: none;
  text-transform: uppercase;
}

.collection_pager_list_area span {
  color: #9A9A9E;
}

.collection_pager_list_area a {
  position: relative;
}

/* the current page is underlined in gold */
.collection_pager_list_area a::after {
  content: "";
  position: absolute;
  right: 10px;
  bottom: 6px;
  left: 10px;
  height: 1px;
  background-color: #AD7300;
  transform: scaleX(0);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.collection_pager_list_area a[aria-current],
.collection_pager_area a:hover {
  color: #AD7300;
}

.collection_pager_list_area a[aria-current]::after,
.collection_pager_list_area a:hover::after {
  transform: scaleX(1);
}

.collection_pager_area a.is_arrow svg {
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.collection_pager_area a.is_arrow[rel="prev"]:hover svg {
  transform: translateX(-5px);
}

.collection_pager_area a.is_arrow[rel="next"]:hover svg {
  transform: translateX(5px);
}

/* while new results load the grid steps back */
.collection_results_area.is_loading {
  opacity: 0.45;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

/* ==========================================================================
   Product detail — gallery, overview, faces, room, calculator, related
   ========================================================================== */

/* an outlined version of the shared button, for secondary actions on light backgrounds */
.default_button.is_outline {
  gap: 10px;
  height: 42px;
  padding: 0 22px;
  border: 1px solid #000000;
  background-color: transparent;
  color: #000000;
  font-size: 16px;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
}

.default_button.is_outline:hover {
  color: #000000;
}

.product_area {
  margin: 0 -15px;
  padding: 150px 0 90px;
}

.product_area>.row {
  --bs-gutter-x: 30px;
}

.product_area>.page_breadcrumb_area {
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.product_stage_area {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  padding: 0;
  overflow: hidden;
  border: 0;
  background-color: #E4E2DC;
  cursor: zoom-in;
}

.product_stage_area img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.35s ease, transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.product_stage_label_area {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  padding: 16px 20px;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0));
  color: #FFFFFF;
  font-family: "New Grotesk Mono", monospace;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-align: left;
  text-transform: uppercase;
}

.product_stage_zoom_area {
  position: absolute;
  top: 16px;
  right: 16px;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  background-color: #FFFFFF;
  color: #000000;
  transition: background-color 0.35s ease, color 0.35s ease;
}

.product_stage_area:hover .product_stage_zoom_area {
  background-color: #AD7300;
  color: #FFFFFF;
}

.product_stage_area:focus-visible {
  outline: 1px solid #000000;
  outline-offset: 4px;
}

.product_thumbs_area {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.product_thumbs_area button {
  position: relative;
  aspect-ratio: 1 / 1;
  padding: 0;
  overflow: hidden;
  border: 0;
  background-color: #E4E2DC;
  cursor: pointer;
}

.product_thumbs_area button::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid #AD7300;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.product_thumbs_area button[aria-current]::after {
  opacity: 1;
}

.product_thumbs_area img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.product_thumbs_area button:hover img {
  transform: scale(1.06);
}

/* holds still beside the gallery on desktop */
.product_info_area {
  position: sticky;
  top: 120px;
  display: flex;
  flex-direction: column;
  padding-left: 30px;
}

.product_info_area>.default_label {
  color: #AD7300;
}

.product_info_area h1 {
  margin: 18px 0 12px;
  color: #000000;
  font-size: 56px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.03em;
}

.product_info_area>p {
  color: #6D6D6D;
  font-size: 18px;
}

.product_variant_area {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 32px;
}

.product_variant_area .default_label {
  color: #6D6D6D;
  font-size: 13px;
}

.product_variant_list_area {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.product_variant_list_area a {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 16px;
  border: 1px solid #CFCDC7;
  color: #000000;
  font-size: 15px;
  text-decoration: none;
  transition: border-color 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}

.product_variant_list_area a:hover {
  border-color: #000000;
}

.product_variant_list_area a[aria-current] {
  border-color: #AD7300;
  background-color: #AD7300;
  color: #FFFFFF;
}

.product_spec_area {
  margin: 36px 0 0;
  border-top: 1px solid #DEDCD6;
}

.product_spec_row_area {
  display: grid;
  grid-template-columns: minmax(0, 140px) minmax(0, 1fr);
  gap: 20px;
  padding: 13px 0;
  border-bottom: 1px solid #DEDCD6;
}

.product_spec_row_area dt {
  color: #6D6D6D;
  font-family: "New Grotesk Mono", monospace;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.product_spec_row_area dd {
  margin: 0;
  color: #000000;
  font-size: 16px;
  word-break: break-word;
}

.product_actions_area {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 36px;
}

.product_missing_area {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  max-width: 720px;
  padding: 40px 0 20px;
}

.product_missing_area h1 {
  margin: 0;
  color: #000000;
  font-size: 56px;
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.product_missing_area p {
  color: #6D6D6D;
}

.product_faces_area,
.product_floor_area,
.product_calc_area,
.product_related_area {
  margin: 0 -15px;
}

.product_faces_area>.row,
.product_floor_area>.row,
.product_calc_area>.row {
  --bs-gutter-x: 30px;
}

.product_section_header_area h2 {
  max-width: 22em;
  margin: 0;
  color: #000000;
}

.product_section_header_area .default_label {
  display: block;
  margin-bottom: 24px;
}

.product_section_header_area p {
  max-width: 30em;
  margin-top: 24px;
  color: #6D6D6D;
  font-size: 17px;
  line-height: 1.45;
}

/* two or four faces sit in pairs; three, five or six in threes, so none is left alone on a row */
.product_faces_grid_area {
  display: grid;
  grid-template-columns: repeat(var(--face-columns, 2), minmax(0, 1fr));
  gap: 30px;
  margin-top: 70px;
}

.product_face_area {
  margin: 0;
}

.product_face_area img {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  background-color: #E9E7E2;
}

.product_face_area figcaption {
  margin-top: 14px;
  color: #6D6D6D;
  font-family: "New Grotesk Mono", monospace;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* the room render, edge to edge */
.product_space_area {
  position: relative;
  height: 88vh;
  min-height: 520px;
  overflow: hidden;
  background-color: #E4E2DC;
}

.product_space_area img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product_space_area .container {
  position: relative;
  height: 100%;
}

.product_space_caption_area {
  position: absolute;
  bottom: 40px;
  left: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 22px;
  background-color: #FFFFFF;
}

.product_space_caption_area .default_label {
  color: #AD7300;
  font-size: 12px;
}

.product_space_caption_area p {
  color: #000000;
  font-size: 18px;
}

.product_calc_form_area {
  padding: 40px 44px 44px;
  border-top: 4px solid #AD7300;
  background-color: #F1F1EE;
}

.product_calc_unit_area {
  display: inline-flex;
  border: 1px solid #CFCDC7;
}

.product_calc_unit_area button {
  height: 36px;
  padding: 0 18px;
  border: 0;
  background-color: transparent;
  color: #000000;
  font-family: "New Grotesk Mono", monospace;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.product_calc_unit_area button[aria-pressed="true"] {
  background-color: #000000;
  color: #FFFFFF;
}

.product_calc_fields_area {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px;
  margin-top: 20px;
}

.product_calc_result_area {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px;
  margin-top: 44px;
}

.product_calc_result_area div {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.product_calc_result_area strong {
  color: #000000;
  font-size: 64px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.product_calc_result_area span {
  color: #6D6D6D;
  font-family: "New Grotesk Mono", monospace;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.product_related_header_area {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 60px;
}

.product_related_header_area h2 {
  margin: 0;
  color: #000000;
}

/* full-screen view of a gallery image */
.product_lightbox_area {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 70px 90px 40px;
  background-color: rgba(17, 17, 15, 0.94);
}

.product_lightbox_area[hidden] {
  display: none;
}

.product_lightbox_area img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 150px);
  object-fit: contain;
}

.product_lightbox_area p {
  color: rgba(255, 255, 255, 0.75);
  font-family: "New Grotesk Mono", monospace;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.product_lightbox_area button {
  position: absolute;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background-color: transparent;
  color: #FFFFFF;
  cursor: pointer;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.product_lightbox_area button:hover {
  border-color: #AD7300;
  background-color: #AD7300;
}

.product_lightbox_area .is_close {
  top: 20px;
  right: 20px;
}

.product_lightbox_area .is_prev {
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
}

.product_lightbox_area .is_next {
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
}

.product_line_mask {
  display: block;
  overflow: hidden;
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
}

/* the homepage's size and finish items link into the filtered collection */
a.formats_size_item_area,
a.formats_surface_item_area {
  color: inherit;
  text-decoration: none;
}

a.formats_size_item_area span,
a.formats_surface_item_area span {
  transition: color 0.35s ease;
}

a.formats_size_item_area:hover span,
a.formats_surface_item_area:hover span {
  color: #AD7300;
}

/* ==========================================================================
   Collection cards — badges and the shortlist heart
   ========================================================================== */

.collection_card_area {
  position: relative;
}

.collection_card_badges_area {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  pointer-events: none;
}

.collection_card_badges_area span {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  background-color: #FFFFFF;
  color: #000000;
  font-family: "New Grotesk Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.collection_card_badges_area span.is_360 {
  background-color: #AD7300;
  color: #FFFFFF;
}

/* the heart sits over the image's top-right corner, outside the card's link */
.collection_card_save {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.92);
  color: #000000;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.collection_card_save:hover {
  transform: scale(1.08);
}

.collection_card_save[aria-pressed="true"] {
  background-color: #AD7300;
  color: #FFFFFF;
}

.collection_card_save[aria-pressed="true"] path,
.default_button[data-shortlist-toggle][aria-pressed="true"] path {
  fill: currentColor;
}

.collection_card_save:focus-visible {
  outline: 1px solid #000000;
  outline-offset: 3px;
}

/* ==========================================================================
   Shortlist — floating button and drawer
   ========================================================================== */

.shortlist_button_area {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 900;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 50px;
  padding: 0 18px 0 20px;
  border: 0;
  background-color: #000000;
  color: #FFFFFF;
  font-size: 15px;
  box-shadow: 0 16px 40px -16px rgba(0, 0, 0, 0.45);
  cursor: pointer;
  transition: background-color 0.35s ease;
}

.shortlist_button_area[hidden] {
  display: none;
}

.shortlist_button_area svg {
  color: #AD7300;
}

.shortlist_button_area strong {
  display: grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border-radius: 12px;
  background-color: #AD7300;
  font-family: "New Grotesk Mono", monospace;
  font-size: 12px;
  font-weight: 400;
}

.shortlist_button_area:hover {
  background-color: #222222;
}

.shortlist_overlay_area {
  position: fixed;
  inset: 0;
  z-index: 9990;
  background-color: rgba(17, 17, 15, 0.45);
}

.shortlist_overlay_area[hidden],
.shortlist_drawer_area[hidden] {
  display: none;
}

.shortlist_drawer_area {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 9991;
  display: flex;
  flex-direction: column;
  width: min(440px, 100%);
  background-color: #FFFFFF;
  box-shadow: -20px 0 60px -30px rgba(0, 0, 0, 0.4);
  animation: shortlist_in 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes shortlist_in {
  from {
    transform: translateX(40px);
    opacity: 0;
  }
}

.shortlist_head_area {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 30px 30px 22px;
  border-top: 4px solid #AD7300;
  border-bottom: 1px solid #E2E2DE;
}

.shortlist_head_area h2 {
  margin: 10px 0 0;
  color: #000000;
  font-size: 26px;
}

.shortlist_head_area button {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid #DEDCD6;
  background: transparent;
  color: #000000;
  cursor: pointer;
}

.shortlist_list_area {
  flex: 1;
  margin: 0;
  padding: 10px 30px;
  overflow-y: auto;
  list-style: none;
}

.shortlist_item_area {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid #EFEDE8;
}

.shortlist_item_area a {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 14px;
  min-width: 0;
  color: #000000;
  text-decoration: none;
}

.shortlist_item_image_area {
  flex-shrink: 0;
  width: 72px;
  height: 54px;
  overflow: hidden;
  background-color: #E9E7E2;
}

.shortlist_item_image_area img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.shortlist_item_text_area {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.shortlist_item_text_area strong {
  overflow: hidden;
  font-size: 16px;
  font-weight: 400;
  white-space: nowrap;
  text-overflow: ellipsis;
  transition: color 0.3s ease;
}

.shortlist_item_text_area span {
  color: #6D6D6D;
  font-size: 13px;
}

.shortlist_item_area a:hover strong {
  color: #AD7300;
}

.shortlist_item_area button {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  background: #F1F1EE;
  color: #000000;
  cursor: pointer;
}

.shortlist_empty_area {
  padding: 30px;
  color: #6D6D6D;
  font-size: 16px;
  line-height: 1.45;
}

.shortlist_empty_area[hidden],
.shortlist_actions_area[hidden],
.shortlist_actions_area [hidden] {
  display: none;
}

.shortlist_actions_area {
  display: grid;
  gap: 10px;
  padding: 22px 30px 30px;
  border-top: 1px solid #E2E2DE;
}

.shortlist_actions_area .default_button {
  width: 100%;
}

.shortlist_clear_area {
  margin-top: 4px;
  padding: 6px;
  border: 0;
  background: transparent;
  color: #6D6D6D;
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}

/* ==========================================================================
   Compare
   ========================================================================== */

.compare_area {
  margin: 0 -15px;
  padding: 150px 0 100px;
}

.compare_header_area {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin: 36px 0 50px;
}

.compare_header_area h1 {
  margin: 0;
  color: #000000;
  font-size: 56px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.03em;
}

.compare_header_actions_area {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.compare_table_area {
  overflow-x: auto;
  background-color: #FFFFFF;
}

.compare_table_area table {
  width: 100%;
  min-width: calc(180px + var(--compare-columns) * 230px);
  border-collapse: collapse;
  table-layout: fixed;
}

.compare_table_area th,
.compare_table_area td {
  padding: 16px 20px;
  border-bottom: 1px solid #EFEDE8;
  color: #000000;
  font-size: 16px;
  font-weight: 400;
  text-align: left;
  vertical-align: top;
}

/* labels hold still while the tiles scroll sideways on small screens */
.compare_table_area tbody th,
.compare_table_area thead th:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  width: 180px;
  background-color: #FFFFFF;
  color: #6D6D6D;
  font-family: "New Grotesk Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.compare_table_area thead th {
  padding-top: 24px;
  padding-bottom: 24px;
}

.compare_table_area tr.is_different td,
.compare_table_area tr.is_different th {
  background-color: #FBF6EC;
}

.compare_tile_area {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.compare_tile_image_area {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: #E9E7E2;
}

.compare_tile_image_area img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.5s ease;
}

.compare_tile_image_area img+img {
  opacity: 0;
}

.compare_tile_image_area:hover img+img {
  opacity: 1;
}

.compare_tile_name_area {
  color: #000000;
  font-size: 22px;
  line-height: 1.2;
  text-decoration: none;
  text-transform: none;
  letter-spacing: -0.01em;
}

.compare_tile_name_area:hover {
  color: #AD7300;
}

.compare_remove_area {
  align-self: flex-start;
  color: #6D6D6D;
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.compare_palette_area {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.compare_palette_area i,
.product_palette_list_area i {
  display: block;
  width: 26px;
  height: 26px;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.compare_table_area td .default_button {
  width: 100%;
}

.compare_note_area {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  color: #6D6D6D;
  font-size: 14px;
}

.compare_note_area span {
  width: 18px;
  height: 12px;
  background-color: #FBF6EC;
  border: 1px solid #EAD9B8;
}

.compare_hidden_label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ==========================================================================
   Product detail — palette, QR, 360° view, phone bar
   ========================================================================== */

.default_button[data-shortlist-toggle][aria-pressed="true"] {
  border-color: #AD7300;
  color: #AD7300;
}

.product_palette_area {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 30px;
}

.product_palette_area .default_label {
  color: #6D6D6D;
  font-size: 13px;
}

.product_palette_list_area {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.product_qr_area {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid #DEDCD6;
}

.product_qr_area[hidden] {
  display: none;
}

/* the small code is a button that opens the larger one */
.product_qr_area button {
  position: relative;
  flex-shrink: 0;
  padding: 8px;
  border: 0;
  background-color: #FFFFFF;
  cursor: zoom-in;
  transition: box-shadow 0.35s ease, transform 0.35s ease;
}

.product_qr_area button:hover {
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.35);
  transform: translateY(-2px);
}

.product_qr_area button:focus-visible {
  outline: 1px solid #000000;
  outline-offset: 3px;
}

.product_qr_area canvas {
  display: block;
  width: 84px;
  height: 84px;
}

.product_qr_zoom_area {
  position: absolute;
  right: -8px;
  bottom: -8px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #AD7300;
  color: #FFFFFF;
}

.product_qr_area p .is_phone {
  display: none;
}

.product_qr_area p {
  max-width: 16em;
  color: #6D6D6D;
  font-size: 15px;
  line-height: 1.4;
}

.product_pano_area {
  margin: 0 -15px;
}

.product_pano_area>.row {
  --bs-gutter-x: 30px;
}

.product_pano_frame_area {
  position: relative;
  height: 640px;
  margin-top: 60px;
  overflow: hidden;
  background-color: #E4E2DC;
}

.product_pano_frame_area>img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  filter: brightness(0.9);
}

.product_pano_frame_area [data-pano-start] {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.product_pano_frame_area.is_live>img {
  display: none;
}

/* two classes so Pannellum's own .pnlm-container (position: relative, loaded later) can't move it */
.product_pano_frame_area>.product_pano_viewer_area {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.product_pano_hint_area {
  position: absolute;
  bottom: 18px;
  left: 50%;
  z-index: 3;
  padding: 8px 14px;
  background-color: rgba(0, 0, 0, 0.55);
  color: #FFFFFF;
  font-family: "New Grotesk Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  transform: translateX(-50%);
  pointer-events: none;
}

.product_pano_hint_area[hidden] {
  display: none;
}

/* phones only: slides up once the overview's own buttons are out of view */
.product_bar_area {
  display: none;
}

/* ==========================================================================
   Product detail — QR code dialog
   ========================================================================== */

.product_qr_dialog_area {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 20px;
  overflow-y: auto;
  background-color: rgba(17, 17, 15, 0.6);
}

.product_qr_dialog_area[hidden] {
  display: none;
}

.product_qr_panel_area {
  position: relative;
  width: min(440px, 100%);
  padding: 36px 36px 32px;
  border-top: 4px solid #AD7300;
  background-color: #FFFFFF;
  text-align: center;
  animation: shortlist_in 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.product_qr_panel_area .is_close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid #DEDCD6;
  background: transparent;
  color: #000000;
  cursor: pointer;
}

.product_qr_panel_area .default_label {
  color: #AD7300;
  font-size: 12px;
}

.product_qr_panel_area h2 {
  margin: 12px 0 6px;
  color: #000000;
}

.product_qr_panel_area>p {
  color: #6D6D6D;
  font-size: 15px;
}

.product_qr_large_area {
  display: inline-block;
  margin: 24px 0 20px;
  padding: 10px;
  border: 1px solid #EFEDE8;
}

.product_qr_large_area canvas {
  display: block;
  width: 240px;
  height: 240px;
}

.product_qr_link_area {
  display: flex;
  gap: 8px;
}

.product_qr_link_area input {
  flex: 1;
  min-width: 0;
  height: 42px;
  margin: 0;
  padding: 0 12px;
  border: 1px solid #DEDCD6;
  border-radius: 0;
  background-color: #F1F1EE;
  color: #000000;
  font-size: 14px;
}

.product_qr_link_area .default_button {
  flex-shrink: 0;
}

.product_qr_share_area {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.product_qr_share_area [data-qr-download] {
  grid-column: 1 / -1;
}

/* ==========================================================================
   Colour match — the colour panel (photo, picker, presets), chosen colour, match scores
   ========================================================================== */

/* lines up with the header bar's edges on desktop, like the collection */
.colour_area {
  margin: 0 -15px;
}

.colour_area .row {
  --bs-gutter-x: 30px;
}

/* this Bootstrap build has no [hidden] rule */
.colour_area [hidden] {
  display: none !important;
}

/* holds still beside the results while they scroll, like the collection's filter panel */
.colour_panel_area {
  position: sticky;
  top: 120px;
  max-height: calc(100vh - 140px);
  overflow-y: auto;
  border-top: 4px solid #AD7300;
  background-color: #F1F1EE;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.colour_step_area {
  margin: 0;
  padding: 0 30px 26px;
  border: 0;
}

.colour_step_area+.colour_step_area {
  border-top: 1px solid #E2E2DE;
}

/* floated, so the fieldset doesn't sit its legend across the top border */
.colour_step_area legend+* {
  clear: both;
}

.colour_step_area legend {
  float: left;
  display: flex;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 24px 0 16px;
  color: #000000;
  font-family: "New Grotesk Mono", monospace;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.colour_step_area legend span {
  color: #AD7300;
}

/* the whole box opens the file picker (and the camera on phones) */
.colour_drop_area {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 28px 20px;
  border: 1px dashed #B9B7B0;
  background-color: #FFFFFF;
  color: #000000;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}

.colour_drop_area input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.colour_drop_area svg {
  color: #AD7300;
}

.colour_drop_area strong {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2;
}

.colour_drop_area span {
  max-width: 250px;
  color: #6D6D6D;
  font-size: 13px;
  line-height: 1.35;
}

.colour_drop_area:focus-within,
.colour_drop_area.is_over {
  border-color: #AD7300;
  background-color: #FBF8F2;
}

@media (hover: hover) {
  .colour_drop_area:hover {
    border-color: #AD7300;
  }
}

/* the photo, tapped or clicked to pick the colour under the pointer */
.colour_photo_area {
  position: relative;
  line-height: 0;
  background-color: #E9E7E2;
}

/* sized by its own shape (no letterboxing), so a tap maps straight onto the photo's pixels */
.colour_photo_area canvas {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 360px;
  margin: 0 auto;
  cursor: crosshair;
}

.colour_loupe_area {
  position: absolute;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border: 3px solid #FFFFFF;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35), 0 4px 14px rgba(0, 0, 0, 0.25);
  pointer-events: none;
}

.colour_photo_reset {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: #FFFFFF;
  color: #000000;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}

@media (hover: hover) {
  .colour_photo_reset:hover {
    background-color: #000000;
    color: #FFFFFF;
  }
}

.colour_hint_area {
  margin-top: 14px;
  color: #6D6D6D;
  font-size: 13px;
  line-height: 1.35;
}

.colour_swatches_area {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 8px;
}

.colour_hint_area+.colour_swatches_area {
  margin-top: 10px;
}

.colour_swatches_area button {
  aspect-ratio: 1;
  padding: 0;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 0;
  background-color: var(--swatch);
  cursor: pointer;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.colour_swatches_area button.is_active {
  box-shadow: 0 0 0 2px #F1F1EE, 0 0 0 3px #000000;
}

.colour_swatches_area button:focus-visible {
  outline: 1px solid #000000;
  outline-offset: 3px;
}

@media (hover: hover) {
  .colour_swatches_area button:hover {
    transform: scale(1.08);
  }
}

.colour_picker_area {
  display: flex;
  align-items: stretch;
  gap: 10px;
  margin-top: 14px;
}

.colour_picker_area input[type="color"] {
  flex-shrink: 0;
  width: 52px;
  height: 46px;
  margin: 0;
  padding: 3px;
  border: 1px solid #DEDCD6;
  border-radius: 0;
  background-color: #FFFFFF;
  cursor: pointer;
}

.colour_picker_area input[type="text"] {
  flex: 1;
  min-width: 0;
  height: 46px;
  margin: 0;
  padding: 0 14px;
  border: 1px solid #DEDCD6;
  border-radius: 0;
  background-color: #FFFFFF;
  color: #000000;
  font-family: "New Grotesk Mono", monospace;
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  outline: none;
  box-shadow: none;
}

.colour_picker_area input[type="text"]:focus {
  border-color: #000000;
}

/* two halves of one switch */
.colour_mode_area {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid #000000;
}

.colour_mode_area label {
  position: relative;
  margin: 0;
  cursor: pointer;
}

.colour_mode_area input {
  position: absolute;
  opacity: 0;
}

.colour_mode_area span {
  display: block;
  padding: 13px 10px;
  color: #000000;
  font-size: 14px;
  line-height: 1.2;
  text-align: center;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.colour_mode_area input:checked+span {
  background-color: #000000;
  color: #FFFFFF;
}

.colour_mode_area input:focus-visible+span {
  outline: 1px solid #AD7300;
  outline-offset: -4px;
}

.colour_selects_area {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 26px;
}

.colour_selects_area .collection_field_area select {
  padding-bottom: 12px;
  font-size: 15px;
}

.colour_selects_area .collection_field_area select {
  background-position: right 2px top 5px;
}

.colour_step_area noscript .default_button {
  margin-top: 24px;
}

/* the colour being matched, above the results */
.colour_chosen_area {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 40px;
  padding-bottom: 26px;
  border-bottom: 1px solid #E2E2DE;
}

.colour_chosen_area i {
  flex-shrink: 0;
  width: 58px;
  height: 58px;
  border: 1px solid rgba(0, 0, 0, 0.12);
}

.colour_chosen_area div {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.colour_chosen_area .default_label {
  color: #AD7300;
}

.colour_chosen_area strong {
  color: #000000;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.colour_start_area {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 520px;
  padding: 10px 0 40px;
}

.colour_start_area .default_label {
  color: #AD7300;
}

.colour_start_area h3 {
  margin: 0;
  color: #000000;
  font-size: 34px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.colour_start_area p {
  color: #6D6D6D;
  font-size: 16px;
  line-height: 1.45;
}

/* a narrower column than the collection's, so three cards only on wide screens */
.collection_grid_area.is_colour {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* the tile's measured tones and its match score */
.collection_card_match_area {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid #E2E2DE;
}

.collection_card_tones_area {
  display: flex;
}

.collection_card_tones_area i {
  width: 16px;
  height: 16px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.collection_card_match_area strong {
  color: #000000;
  font-family: "New Grotesk Mono", monospace;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* the collection's way in to the colour match */
.collection_colour_link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 10px;
  margin-bottom: 30px;
  color: #000000;
  font-size: 15px;
  line-height: 1.3;
  text-decoration: underline;
  text-decoration-color: #AD7300;
  text-underline-offset: 5px;
}

.collection_colour_link svg {
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) {
  .collection_colour_link:hover {
    color: #AD7300;
  }

  .collection_colour_link:hover svg {
    transform: translateX(5px);
  }
}

/* ==========================================================================
   Product detail — floor preview
   ========================================================================== */

/* the floor keeps the room's shape: as wide as the column, or as tall as the screen allows */
.product_floor_stage_area {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 320px;
  margin-top: 70px;
  padding: 30px;
  background-color: #E9E7E2;
}

.product_floor_stage_area canvas {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: min(640px, 72vh);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.14);
}

.product_floor_loading_area {
  position: absolute;
  color: #6D6D6D;
  font-family: "New Grotesk Mono", monospace;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.product_floor_area [hidden] {
  display: none !important;
}

.product_floor_caption_area {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 14px;
  color: #6D6D6D;
  font-family: "New Grotesk Mono", monospace;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* a bar as long as one metre on the drawn floor */
.product_floor_scale_area {
  display: flex;
  align-items: center;
  gap: 10px;
}

.product_floor_scale_area i {
  display: block;
  height: 8px;
  border: 1px solid #6D6D6D;
  border-top: 0;
}

.product_floor_panel_area {
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin-top: 70px;
  padding: 34px 36px 38px;
  border-top: 4px solid #AD7300;
  background-color: #F1F1EE;
}

.product_floor_group_area {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.product_floor_group_area .product_calc_fields_area {
  width: 100%;
  gap: 24px;
  margin-top: 0;
}

.product_floor_legend {
  color: #000000;
  font-family: "New Grotesk Mono", monospace;
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.product_floor_grout_area {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.product_floor_grout_area button {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px 0 8px;
  border: 1px solid #CFCDC7;
  background-color: transparent;
  color: #000000;
  font-size: 14px;
  cursor: pointer;
  transition: border-color 0.3s ease;
}

.product_floor_grout_area i {
  width: 20px;
  height: 20px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}

.product_floor_grout_area button[aria-pressed="true"] {
  border-color: #000000;
  box-shadow: inset 0 0 0 1px #000000;
}

.product_floor_panel_area>.default_button {
  align-self: flex-start;
}

.product_floor_result_area {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  padding-top: 26px;
  border-top: 1px solid #DEDCD6;
}

.product_floor_result_area div {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.product_floor_result_area strong {
  color: #000000;
  font-size: 44px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.product_floor_result_area span {
  color: #6D6D6D;
  font-family: "New Grotesk Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* the pattern names stay on one line */
.product_floor_group_area .product_calc_unit_area button {
  white-space: nowrap;
}

/* ==========================================================================
   Showroom mode — the visit in the shortlist drawer, the "saved" note
   ========================================================================== */

.shortlist_visit_area {
  display: grid;
  gap: 10px;
  padding: 20px 30px 18px;
  border-bottom: 1px solid #E2E2DE;
  background-color: #F1F1EE;
}

.shortlist_visit_area[hidden],
.shortlist_visit_area [hidden] {
  display: none;
}

.shortlist_visit_area p {
  margin-bottom: 4px;
  color: #6D6D6D;
  font-size: 15px;
  line-height: 1.4;
}

.shortlist_visit_area p strong {
  color: #000000;
  font-weight: 400;
}

.shortlist_visit_area .default_button {
  width: 100%;
}

.shortlist_visit_area .shortlist_clear_area {
  margin-top: 0;
}

/* slides up from the bottom for a few seconds after a scan */
.showroom_toast_area {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 9000;
  display: flex;
  align-items: center;
  gap: 14px;
  width: min(460px, calc(100% - 32px));
  padding: 14px 14px 14px 18px;
  border-left: 4px solid #AD7300;
  background-color: #000000;
  color: #FFFFFF;
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.6);
  opacity: 0;
  transform: translate(-50%, 20px);
  transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.showroom_toast_area[hidden] {
  display: none;
}

.showroom_toast_area.is_visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.showroom_toast_area svg {
  flex-shrink: 0;
  color: #AD7300;
}

.showroom_toast_area p {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  margin: 0;
}

.showroom_toast_area strong {
  font-size: 15px;
  font-weight: 400;
}

.showroom_toast_area span {
  overflow: hidden;
  color: #B9B7B0;
  font-size: 13px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.showroom_toast_area button {
  flex-shrink: 0;
  height: 38px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: transparent;
  color: #FFFFFF;
  font-family: "New Grotesk Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.showroom_toast_area button:hover {
  background-color: #FFFFFF;
  color: #000000;
}

/* ==========================================================================
   Showroom mode — finishing a visit, the customer's list
   ========================================================================== */

.visit_tiles_area {
  margin-top: 96px;
  border-top: 4px solid #AD7300;
  background-color: #F1F1EE;
}

.visit_tiles_area ol {
  margin: 0;
  padding: 10px 26px;
  list-style: none;
  counter-reset: visit;
}

.visit_tiles_area li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  counter-increment: visit;
}

.visit_tiles_area li+li {
  border-top: 1px solid #E2E2DE;
}

.visit_tiles_area li::before {
  content: counter(visit, decimal-leading-zero);
  flex-shrink: 0;
  width: 22px;
  color: #AD7300;
  font-family: "New Grotesk Mono", monospace;
  font-size: 12px;
}

.visit_tiles_area>p {
  padding: 26px;
  color: #6D6D6D;
  font-size: 16px;
  line-height: 1.45;
}

.visit_tile_image_area {
  flex-shrink: 0;
  width: 72px;
  height: 48px;
  overflow: hidden;
  background-color: #E9E7E2;
}

.visit_tile_image_area img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.visit_tile_text_area {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.visit_tile_text_area strong {
  overflow: hidden;
  color: #000000;
  font-size: 16px;
  font-weight: 400;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.visit_tile_text_area span {
  color: #6D6D6D;
  font-size: 13px;
}

/* beside the list rather than under the heading */
.enquiry_form_area.is_visit {
  padding-left: 20px;
}

/* the field only a bot fills in, off screen */
.visit_trap_area {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.visit_error_area {
  margin-bottom: 30px;
  padding: 14px 18px;
  border-left: 3px solid #B3261E;
  background-color: #FBEDEC;
  color: #7A1B15;
  font-size: 15px;
}

.visit_privacy_area {
  max-width: 34em;
  margin-top: 18px;
  color: #86868B;
  font-size: 13px;
  line-height: 1.45;
}

.enquiry_form_area.is_visit .default_button[disabled] {
  opacity: 0.4;
  pointer-events: none;
}

.visit_done_area {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 60px;
  padding: 22px 26px;
  border-top: 4px solid #AD7300;
  background-color: #F1F1EE;
}

.visit_done_area svg {
  flex-shrink: 0;
  color: #AD7300;
}

.visit_done_area p {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
}

.visit_done_area strong {
  color: #000000;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.2;
}

.visit_done_area span {
  color: #6D6D6D;
  font-size: 15px;
  line-height: 1.45;
}

/* lines up with the header bar's edges on desktop, like the collection */
.visit_list_area {
  margin: 0 -15px;
}

.visit_list_header_area {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 60px;
}

.visit_list_header_area .default_label {
  display: block;
  margin-bottom: 18px;
  color: #AD7300;
}

.visit_list_header_area h2 {
  margin: 0;
  color: #000000;
}

.visit_list_actions_area {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.visit_gone_area,
.visit_call_area {
  color: #6D6D6D;
  font-size: 16px;
  line-height: 1.45;
}

.visit_call_area {
  margin-top: 70px;
  padding-top: 26px;
  border-top: 1px solid #E2E2DE;
}

.visit_call_area a {
  color: #000000;
  text-decoration: underline;
  text-decoration-color: #AD7300;
  text-underline-offset: 4px;
}

/* ==========================================================================
   Enquiry popup — asked from any page, in the QR dialog's style
   ========================================================================== */

.enquiry_modal_area {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 20px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background-color: rgba(17, 17, 15, 0.6);
}

.enquiry_modal_area[hidden],
.enquiry_modal_area [hidden] {
  display: none;
}

.enquiry_modal_panel_area {
  position: relative;
  width: min(560px, 100%);
  padding: 40px 44px 36px;
  border-top: 4px solid #AD7300;
  background-color: #FFFFFF;
  animation: shortlist_in 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.enquiry_modal_panel_area .is_close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid #DEDCD6;
  background: transparent;
  color: #000000;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.enquiry_modal_panel_area .is_close:hover {
  background-color: #000000;
  color: #FFFFFF;
}

.enquiry_modal_panel_area .default_label {
  color: #AD7300;
  font-size: 12px;
}

.enquiry_modal_panel_area h2 {
  margin: 12px 50px 0 0;
  color: #000000;
  font-size: 30px;
  line-height: 1.15;
}

/* what it's about: one line per tile */
.enquiry_modal_tiles_area {
  max-height: 150px;
  margin: 22px 0 0;
  padding: 4px 18px;
  overflow-y: auto;
  border-left: 3px solid #AD7300;
  background-color: #F1F1EE;
  list-style: none;
}

.enquiry_modal_tiles_area li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  padding: 9px 0;
}

.enquiry_modal_tiles_area li+li {
  border-top: 1px solid #E2E2DE;
}

.enquiry_modal_tiles_area strong {
  color: #000000;
  font-size: 15px;
  font-weight: 400;
}

.enquiry_modal_tiles_area span {
  color: #6D6D6D;
  font-size: 13px;
}

.enquiry_modal_form_area {
  margin-top: 26px;
}

.enquiry_modal_form_area .visit_error_area {
  margin: 20px 0 0;
}

.enquiry_modal_fields_area {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 30px;
  margin-bottom: 30px;
}

.enquiry_modal_fields_area .enquiry_field_area.is_message {
  grid-column: 1 / -1;
}

.enquiry_modal_form_area .default_button {
  width: 100%;
}

.enquiry_modal_form_area .default_button[disabled] {
  opacity: 0.6;
  pointer-events: none;
}

.enquiry_modal_note_area {
  margin-top: 14px;
  color: #86868B;
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
}

.enquiry_modal_done_area {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 0 4px;
  text-align: center;
}

.enquiry_modal_tick_area {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin-bottom: 22px;
  border-radius: 50%;
  background-color: #F1F1EE;
  color: #AD7300;
}

.enquiry_modal_done_area h2 {
  margin-right: 0;
}

.enquiry_modal_done_area p {
  max-width: 24em;
  margin: 12px 0 28px;
  color: #6D6D6D;
  font-size: 16px;
  line-height: 1.45;
}

/* the Contact page's thank-you, where its form was */
.enquiry_sent_area {
  margin-bottom: 30px;
  padding: 16px 20px;
  border-left: 3px solid #AD7300;
  background-color: #F1F1EE;
  color: #000000;
  font-size: 15px;
  line-height: 1.45;
}

.enquiry_sent_area.is_large {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 96px 0 0;
  padding: 30px 32px;
}

.enquiry_sent_area.is_large strong {
  font-size: 24px;
  font-weight: 400;
}

.enquiry_sent_area.is_large span {
  color: #6D6D6D;
  font-size: 16px;
}