@font-face {
   font-family: 'Geist';
   src: url('../fonts/geist/Geist-Variable.woff2') format('woff2-variations'),
      url('../fonts/geist/Geist-Variable.woff2') format('woff2');
   font-weight: 100 900;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: 'Canela Text';
   src: url('../fonts/canela/CanelaText-Thin-Trial.woff2') format('woff2'),
      url('../fonts/canela/CanelaText-Thin-Trial.otf') format('opentype');
   font-weight: 100;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: 'Canela Text';
   src: url('../fonts/canela/CanelaText-ThinItalic-Trial.woff2') format('woff2'),
      url('../fonts/canela/CanelaText-ThinItalic-Trial.otf') format('opentype');
   font-weight: 100;
   font-style: italic;
   font-display: swap;
}

@font-face {
   font-family: 'Canela Text';
   src: url('../fonts/canela/CanelaText-Light-Trial.woff2') format('woff2'),
      url('../fonts/canela/CanelaText-Light-Trial.otf') format('opentype');
   font-weight: 300;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: 'Canela Text';
   src: url('../fonts/canela/CanelaText-LightItalic-Trial.woff2') format('woff2'),
      url('../fonts/canela/CanelaText-LightItalic-Trial.otf') format('opentype');
   font-weight: 300;
   font-style: italic;
   font-display: swap;
}

@font-face {
   font-family: 'Canela Text';
   src: url('../fonts/canela/CanelaText-Regular-Trial.woff2') format('woff2'),
      url('../fonts/canela/CanelaText-Regular-Trial.otf') format('opentype');
   font-weight: 400;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: 'Canela Text';
   src: url('../fonts/canela/CanelaText-RegularItalic-Trial.woff2') format('woff2'),
      url('../fonts/canela/CanelaText-RegularItalic-Trial.otf') format('opentype');
   font-weight: 400;
   font-style: italic;
   font-display: swap;
}

@font-face {
   font-family: 'Canela Text No2';
   src: url('../fonts/canela/CanelaText-RegularNo2-Trial.woff2') format('woff2'),
      url('../fonts/canela/CanelaText-RegularNo2-Trial.otf') format('opentype');
   font-weight: 400;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: 'Canela Text No2';
   src: url('../fonts/canela/CanelaText-RegularNo2Italic-Trial.woff2') format('woff2'),
      url('../fonts/canela/CanelaText-RegularNo2Italic-Trial.otf') format('opentype');
   font-weight: 400;
   font-style: italic;
   font-display: swap;
}

@font-face {
   font-family: 'Canela Text';
   src: url('../fonts/canela/CanelaText-Medium-Trial.woff2') format('woff2'),
      url('../fonts/canela/CanelaText-Medium-Trial.otf') format('opentype');
   font-weight: 500;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: 'Canela Text';
   src: url('../fonts/canela/CanelaText-MediumItalic-Trial.woff2') format('woff2'),
      url('../fonts/canela/CanelaText-MediumItalic-Trial.otf') format('opentype');
   font-weight: 500;
   font-style: italic;
   font-display: swap;
}

@font-face {
   font-family: 'Canela Text';
   src: url('../fonts/canela/CanelaText-Bold-Trial.woff2') format('woff2'),
      url('../fonts/canela/CanelaText-Bold-Trial.otf') format('opentype');
   font-weight: 700;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: 'Canela Text';
   src: url('../fonts/canela/CanelaText-BoldItalic-Trial.woff2') format('woff2'),
      url('../fonts/canela/CanelaText-BoldItalic-Trial.otf') format('opentype');
   font-weight: 700;
   font-style: italic;
   font-display: swap;
}

@font-face {
   font-family: 'Canela Text';
   src: url('../fonts/canela/CanelaText-Black-Trial.woff2') format('woff2'),
      url('../fonts/canela/CanelaText-Black-Trial.otf') format('opentype');
   font-weight: 900;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: 'Canela Text';
   src: url('../fonts/canela/CanelaText-BlackItalic-Trial.woff2') format('woff2'),
      url('../fonts/canela/CanelaText-BlackItalic-Trial.otf') format('opentype');
   font-weight: 900;
   font-style: italic;
   font-display: swap;
}

@font-face {
   font-family: 'Aeonik Mono';
   src: url('../fonts/aeonik/AeonikMonoTRIAL-Thin.woff2') format('woff2'),
      url('../fonts/aeonik/AeonikMonoTRIAL-Thin.otf') format('opentype');
   font-weight: 100;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: 'Aeonik Mono';
   src: url('../fonts/aeonik/AeonikMonoTRIAL-Air.woff2') format('woff2'),
      url('../fonts/aeonik/AeonikMonoTRIAL-Air.otf') format('opentype');
   font-weight: 200;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: 'Aeonik Mono';
   src: url('../fonts/aeonik/AeonikMonoTRIAL-Light.woff2') format('woff2'),
      url('../fonts/aeonik/AeonikMonoTRIAL-Light.otf') format('opentype');
   font-weight: 300;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: 'Aeonik Mono';
   src: url('../fonts/aeonik/AeonikMonoTRIAL-Regular.woff2') format('woff2'),
      url('../fonts/aeonik/AeonikMonoTRIAL-Regular.otf') format('opentype');
   font-weight: 400;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: 'Aeonik Mono';
   src: url('../fonts/aeonik/AeonikMonoTRIAL-Medium.woff2') format('woff2'),
      url('../fonts/aeonik/AeonikMonoTRIAL-Medium.otf') format('opentype');
   font-weight: 500;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: 'Aeonik Mono';
   src: url('../fonts/aeonik/AeonikMonoTRIAL-SemiBold.woff2') format('woff2'),
      url('../fonts/aeonik/AeonikMonoTRIAL-SemiBold.otf') format('opentype');
   font-weight: 600;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: 'Aeonik Mono';
   src: url('../fonts/aeonik/AeonikMonoTRIAL-Bold.woff2') format('woff2'),
      url('../fonts/aeonik/AeonikMonoTRIAL-Bold.otf') format('opentype');
   font-weight: 700;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: 'Aeonik Mono';
   src: url('../fonts/aeonik/AeonikMonoTRIAL-Black.woff2') format('woff2'),
      url('../fonts/aeonik/AeonikMonoTRIAL-Black.otf') format('opentype');
   font-weight: 900;
   font-style: normal;
   font-display: swap;
}

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

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

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

/* Nothing constrains images by default, and the hero asset is 1920px wide,
   so it has to be told to fit its box or it overflows the viewport. */
img {
   max-width: 100%;
}

h2 {
   font-family: 'Canela Text', serif;
   font-size: 48px;
   font-style: normal;
   font-weight: 300;
   line-height: normal;
   letter-spacing: -0.04em;
}

h3 {
   font-family: 'Canela Text', serif;
   font-size: 36px;
   font-style: normal;
   font-weight: 300;
   line-height: normal;
   letter-spacing: -0.04em;
}

h4 {
   font-size: 28px;
   line-height: 1.2;
}

p {
   color: #6D6D6D;
   font-size: 16px;
   font-style: normal;
   font-weight: 300;
   line-height: normal;
   line-height: 150%;
}

/* overflow clips the extra height the hero image carries for its parallax
   travel, so nothing spills into the section below */
.main_top_header_image_area {
   position: relative;
   width: 100%;
   height: 100vh;
   height: 100svh;
   overflow: hidden;
}

/* direct child only, so nested art (.main_content_h1_image) keeps its own size */
/* Taller than its frame on purpose: the surplus is what the image has to move
   through while the hero scrolls away. Anchored at the top so that with no JS
   it still covers the frame completely and simply gets cropped. */
.main_top_header_image_area>img {
   position: absolute;
   top: 0;
   left: 0;
   display: block;
   width: 100%;
   height: 120%;
   -o-object-fit: cover;
   object-fit: cover;
   -o-object-position: center;
   object-position: center;
   will-change: transform;
}

/* headline artwork laid over the hero, clear of the bottom nav */
.main_content_h1_image {
   position: absolute;
   left: 50%;
   bottom: 225px;
   transform: translateX(-50%);
   width: 517px;
   max-width: calc(100% - 40px);
   pointer-events: none;
}

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

.site_header {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   display: flex;
   justify-content: center;
   padding: 20px 15px;
   z-index: 1000;
   pointer-events: none;
}

.site_header_logo {
   display: inline-flex;
   pointer-events: auto;
}

.site_header_logo img {
   height: 80px;
   width: auto;
}

.site_bottom_nav {
   position: fixed;
   left: 50%;
   bottom: 50px;
   transform: translateX(-50%);
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 20px;
   width: calc(100% - 32px);
   max-width: 320px;
   /* fixed height so collapsing to the square only animates width — the
      brand icon can't hold the height open, it scales down with its width */
   height: 60px;
   background-color: rgba(10, 10, 10, 0.7);
   border: 1px solid rgba(255, 255, 255, 0.1);
   -webkit-backdrop-filter: blur(20px);
   backdrop-filter: blur(20px);
   border-radius: 0;
   padding: 0 15px;
   z-index: 1000;
}

.site_bottom_nav_brand {
   display: flex;
   flex-shrink: 0;
   align-items: center;
}

.site_bottom_nav_brand img {
   /* clip on collapse instead of scaling down with the shrinking container */
   flex-shrink: 0;
   width: 32px;
   height: auto;
}

.site_bottom_nav_title {
   flex: 1;
   /* a flex item defaults to min-width:auto, which refuses to shrink below its
      content — the long titles would push the bar wider instead of scrolling */
   min-width: 0;
   color: #fff;
   font-size: 15px;
   font-weight: 400;
   letter-spacing: 0.15em;
   font-family: 'Aeonik Mono', monospace;
}

.site_bottom_nav_toggle {
   position: relative;
   display: flex;
   flex-shrink: 0;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 6px;
   background: none;
   border: 0;
   padding: 0;
   cursor: pointer;
}

.site_bottom_nav_toggle .site_bottom_nav_burger {
   display: flex;
   flex-direction: column;
   align-items: flex-end;
   gap: 6px;
   transition: opacity 0.25s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.site_bottom_nav_toggle .site_bottom_nav_burger span {
   display: block;
   width: 24px;
   height: 1px;
   border-radius: 2px;
   background-color: #fff;
   transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Two open-state icons share the slot: a close cross normally, and an up arrow
   at the footer where the button scrolls back to the top instead of closing. */
.site_bottom_nav_arrow,
.site_bottom_nav_close {
   position: absolute;
   top: 50%;
   left: 50%;
   color: #fff;
   opacity: 0;
   transform: translate(-50%, -50%) translateY(6px);
   transition: opacity 0.25s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
   pointer-events: none;
}

/* ==========================================================================
   Menu panel — expands upward from the bottom bar
   ========================================================================== */
.site_menu_panel {
   position: fixed;
   left: 50%;
   bottom: 150px;
   width: calc(100% - 32px);
   max-width: 560px;
   display: flex;
   flex-direction: column;
   padding: 60px 70px;
   background-color: rgba(10, 10, 10, 0.7);
   border: 1px solid rgba(255, 255, 255, 0.1);
   -webkit-backdrop-filter: blur(20px);
   backdrop-filter: blur(20px);
   z-index: 1000;
   opacity: 0;
   visibility: hidden;
   transform: translateX(-50%) translateY(24px) scale(0.96);
   transform-origin: bottom center;
   transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.65s cubic-bezier(0.22, 1, 0.36, 1),
      visibility 0s linear 0.65s;
   /* the backdrop blur makes this expensive to recomposite; promoting it up
      front keeps the open/close smooth when the page is still scrolling */
   will-change: transform, opacity;
}

body.menu-open .site_menu_panel {
   opacity: 1;
   visibility: visible;
   transform: translateX(-50%) translateY(0) scale(1);
   transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.65s cubic-bezier(0.22, 1, 0.36, 1),
      visibility 0s linear 0s;
}

.site_menu_label {
   font-family: 'Aeonik Mono', monospace;
   font-size: 16px;
   font-weight: 400;
   letter-spacing: 0.15em;
   color: #CACACA;
   margin-bottom: 30px;
}

.site_menu_primary,
.site_menu_secondary {
   list-style: none;
   margin: 0;
   padding: 0;
}

.site_menu_primary a {
   font-family: 'Geist', sans-serif;
   font-size: 42px;
   font-weight: 300;
   line-height: 1.2;
   color: #fff;
   text-decoration: none;
   transition: opacity 0.3s ease;
}

.site_menu_secondary {
   margin-top: 40px;
}

.site_menu_secondary a {
   font-family: 'Geist', sans-serif;
   font-size: 21px;
   font-weight: 400;
   line-height: 1.6;
   color: rgba(255, 255, 255, 0.6);
   text-decoration: none;
   transition: color 0.3s ease;
}

.site_menu_primary a:hover {
   opacity: 0.6;
}

.site_menu_secondary a:hover {
   color: #fff;
}

.site_menu_contact {
   position: relative;
   isolation: isolate;
   overflow: hidden;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 20px;
   margin-top: 56px;
   padding: 16px;
   background-color: rgba(0, 0, 0, 0.75);
   border: 1px solid rgba(255, 255, 255, 0.08);
   color: #fff;
   font-family: 'Aeonik Mono', monospace;
   font-size: 16px;
   letter-spacing: 0.15em;
   text-decoration: none;
   transition: border-color 0.4s ease;
}

/* a light wipes in from the left, under the label, while the arrow leads out */
.site_menu_contact::before {
   content: '';
   position: absolute;
   inset: 0;
   z-index: -1;
   background-color: rgba(255, 255, 255, 0.1);
   transform: scaleX(0);
   transform-origin: left center;
   transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

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

.site_menu_contact:hover {
   border-color: rgba(255, 255, 255, 0.2);
}

.site_menu_contact:hover::before {
   transform: scaleX(1);
}

.site_menu_contact:hover svg {
   transform: translateX(5px);
}

/* staggered reveal of the panel's contents */
.site_menu_primary li,
.site_menu_secondary li,
.site_menu_contact {
   opacity: 0;
   transform: translateY(12px);
   transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
   transition-delay: 0s;
}

body.menu-open .site_menu_primary li,
body.menu-open .site_menu_secondary li,
body.menu-open .site_menu_contact {
   opacity: 1;
   transform: translateY(0);
   transition-delay: calc(0.18s + var(--i) * 0.05s);
}

/* ==========================================================================
   Open state — the bar collapses into a single square button
   ========================================================================== */
.site_bottom_nav {
   transition: max-width 0.65s cubic-bezier(0.22, 1, 0.36, 1),
      gap 0.65s cubic-bezier(0.22, 1, 0.36, 1),
      background-color 0.4s ease,
      border-color 0.4s ease;
}

body.menu-open .site_bottom_nav {
   /* collapses to a 60x60 square — height is already locked above, so only
      the width animates */
   max-width: 60px;
   gap: 0;
   justify-content: center;
   /* the whole square closes the menu, so the whole square gets the cursor */
   cursor: pointer;
}

body.menu-open .site_bottom_nav:hover {
   background-color: rgba(28, 28, 28, 0.78);
   border-color: rgba(255, 255, 255, 0.22);
}

/* each icon gets hover feedback that suits what it does */
body.menu-open.footer-in-view .site_bottom_nav:hover .site_bottom_nav_arrow {
   transform: translate(-50%, -50%) translateY(-3px);
}

body.menu-open:not(.footer-in-view) .site_bottom_nav:hover .site_bottom_nav_close {
   transform: translate(-50%, -50%) rotate(90deg);
}

.site_bottom_nav_brand,
.site_bottom_nav_title {
   max-width: 220px;
   overflow: hidden;
   transition: opacity 0.3s ease, max-width 0.65s cubic-bezier(0.22, 1, 0.36, 1);


}

/* max-content, so the track is as wide as its copies; min-width 100% keeps a
   short title centred in the bar rather than hugging the left edge */
.site_bottom_nav_marquee {
   display: flex;
   justify-content: center;
   min-width: 100%;
   width: -webkit-max-content;
   width: max-content;
}

.site_bottom_nav_marquee>span {
   flex-shrink: 0;
   white-space: nowrap;
}

/* Added by nav-title.js only when the title genuinely overflows, alongside a
   second copy of the text. The track then holds exactly two identical copies,
   so travelling half its width lands the second copy precisely where the first
   began and the loop has no seam. */
.site_bottom_nav_marquee.is-scrolling {
   justify-content: flex-start;
   -webkit-animation: nav_title_scroll var(--marquee-duration, 14s) linear infinite;
   animation: nav_title_scroll var(--marquee-duration, 14s) linear infinite;
}

.site_bottom_nav_marquee.is-scrolling>span {
   padding-right: 56px;
}

@-webkit-keyframes nav_title_scroll {
   to {
      -webkit-transform: translateX(-50%);
      transform: translateX(-50%);
   }
}

@keyframes nav_title_scroll {
   to {
      -webkit-transform: translateX(-50%);
      transform: translateX(-50%);
   }
}

/* hold still while it is being read, and while the bar is collapsed */
.site_bottom_nav:hover .site_bottom_nav_marquee.is-scrolling,
body.menu-open .site_bottom_nav_marquee.is-scrolling {
   -webkit-animation-play-state: paused;
   animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {

   /* the mask still fades the overflow, so nothing is hard-clipped */
   .site_bottom_nav_marquee.is-scrolling {
      -webkit-animation: none;
      animation: none;
   }
}

body.menu-open .site_bottom_nav_brand,
body.menu-open .site_bottom_nav_title {
   opacity: 0;
   max-width: 0;
   flex: 0 0 auto;
   pointer-events: none;
}

body.menu-open .site_bottom_nav_toggle .site_bottom_nav_burger {
   opacity: 0;
   transform: translateY(-6px);
}

body.menu-open:not(.footer-in-view) .site_bottom_nav_close,
body.menu-open.footer-in-view .site_bottom_nav_arrow {
   opacity: 1;
   transform: translate(-50%, -50%);
}

.site_menu_primary li {
   margin-bottom: 10px;
}

.site_menu_primary li:last-child {
   margin-bottom: 0;
}

.site_menu_secondary a {
   font-size: 20px;
   font-weight: 300;
   color: #CACACA;
}

/* ==========================================================================
   Shared utilities
   ========================================================================== */
.section-padding {
   padding: 100px 0;
}

.custom_padding {
   padding: 0 120px;
}

.default_label {
   font-family: 'Aeonik Mono', monospace;
   font-size: 14px;
   letter-spacing: 0.15em;
   color: #6D6D6D;
}

/* One button for every section — spacing is set by the parent area, so this
   stays purely visual and can be dropped in anywhere. */
.default_button {
   position: relative;
   isolation: isolate;
   overflow: hidden;
   display: inline-flex;
   align-items: center;
   gap: 26px;
   padding: 13px 18px;
   background-color: #111;
   color: #fff;
   font-family: 'Aeonik Mono', monospace;
   font-size: 13px;
   letter-spacing: 0.18em;
   text-transform: uppercase;
   text-decoration: none;
}

/* same hover language as the menu's contact button */
.default_button::before {
   content: '';
   position: absolute;
   inset: 0;
   z-index: -1;
   background-color: rgba(255, 255, 255, 0.14);
   transform: scaleX(0);
   transform-origin: left center;
   transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

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

.default_button:hover::before {
   transform: scaleX(1);
}

.default_button:hover svg {
   transform: translateX(5px);
}


.about_section {
   position: relative;
   background-color: #fff;
   overflow: hidden;
}


.about_image_col {
   --bleed: calc(50vw - 50%);
   flex: 0 0 auto;
   max-width: none;
   margin-left: calc(-1 * var(--bleed));
   padding-left: 0;
}

.about_image_area {
   height: 100%;
}

.about_image_area img {
   display: block;
   width: 100%;
   height: 100%;
   -o-object-fit: cover;
   object-fit: cover;
   -o-object-position: center;
   object-position: center;
}

.about_header_area span {
   display: block;
   margin-top: 62px;
   text-transform: uppercase;
   color: #6D6D6D;
}

.about_header_area h2 {
   margin: 200px 0 0;
   font-weight: 300;
   line-height: 1.2;
   text-transform: uppercase;
   color: #2C2927;
}

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

.about_content_area p {
   margin: 60px 0 0;
}

.about_content_area a {
   margin-top: 40px;
}


.philosophy_section {
   position: relative;
   background-color: #fff;
   overflow: hidden;
}

.design_section_header_area h2 {
   margin: 30px 0 0;
   color: #2C2927;
}


.philosophy_image_col {
   --col: 83.333333%;
   /* keep in sync with the col-lg-* class */
   --bleed: calc(50vw - 50%);
   flex: 0 0 auto;
   width: calc(var(--col) + var(--bleed));
   max-width: none;
   margin-top: 60px;
   margin-right: calc(-1 * var(--bleed));
   padding-right: 0;
}

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

.design_section_footer_area p {
   max-width: 470px;
   margin: 50px 0 0;
}

.design_section_footer_area a {
   margin-top: 40px;
}

.design_section_header_area span {
   text-transform: uppercase;
}

/* ==========================================================================
   Sticky background scroll module
   ========================================================================== */
.nature_scroll_area {
   position: relative;
   width: 100%;
   /* 150vh of scroll per slide, matching the reference's 450vh for 3 slides */
   height: calc(var(--slides, 2) * 150vh);
}

.nature_sticky_area {
   position: sticky;
   top: 0;
   left: 0;
   width: 100%;
   height: 100vh;
   overflow: hidden;
}

.nature_image_area>div {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}

.nature_image_area img {
   display: block;
   width: 100%;
   height: 100%;
   -o-object-fit: cover;
   object-fit: cover;
   -o-object-position: center;
   object-position: center;
}

/* keeps the white copy legible over the lighter parts of the photography */
.nature_image_area>div::after {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(44, 41, 39, 0.2);
}

.nature_content_area>div {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   padding-top: 80px;
   z-index: 2;
}

.nature_content_area h3 {
   margin: 0;
   color: #fff;
}

.nature_content_area p {
   margin: 34px 0 0;
   color: rgba(255, 255, 255, 0.9);
}

/* progress readout — sits left so it clears the fixed bottom nav */
.nature_progress_area {
   position: absolute;
   left: 60px;
   bottom: 60px;
   display: flex;
   align-items: center;
   gap: 18px;
   z-index: 3;
}

.nature_progress_area .default_label {
   font-size: 13px;
   color: rgba(255, 255, 255, 0.85);
}

.nature_progress_track {
   position: relative;
   display: block;
   width: 120px;
   height: 1px;
   background-color: rgba(255, 255, 255, 0.3);
}

.nature_progress_track i {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: #fff;
}

/* ==========================================================================
   Sizes and surfaces section
   ========================================================================== */
.sizes_header_area h2 {
   margin: 0;
   color: #2C2927;
}

.sizes_header_area a {
   margin-top: 44px;
}

.sizes_list_area {
   position: relative;
   margin-top: 100px;
   border-bottom: 1px solid #E5E5E5;
}

/* the in-row slot is only the no-JS fallback; the floating frame replaces it */
.sizes_list_area.is-cursor .sizes_image_area {
   display: none;
}

/* Floating frame that trails the cursor. Perspective sits on the parent as a
   property rather than inside a transform, so GSAP writing rotation onto the
   inner element can't clobber it. */
.sizes_image_cursor {
   position: fixed;
   top: 0;
   left: 0;
   /* narrow enough to live in the gap before the surface links */
   width: clamp(190px, 15vw, 260px);
   transform: translate(-50%, -50%);
   perspective: 50vw;
   pointer-events: none;
   z-index: 901;
   will-change: transform;
}

.sizes_image_cursor_inner {
   position: relative;
   width: 100%;
   transform-style: preserve-3d;
}

/* The reveal: the aspect box opens from nothing to the image's own ratio, so
   the frame grows outward from its centre and keeps the photo undistorted.
   --frame-ratio is set per row from the decoded image. */
.sizes_image_cursor_inner::before {
   content: '';
   display: block;
   padding-top: 0%;
   transition: padding 0.6s cubic-bezier(0.7, 0, 0.3, 1);
   will-change: padding;
}

.sizes_image_cursor.active .sizes_image_cursor_inner::before {
   padding-top: var(--frame-ratio, 100%);
}

.sizes_image_cursor ul {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   margin: 0;
   padding: 0;
   list-style: none;
   overflow: hidden;
   background-color: #F0EFED;
}

/* Swap between two surfaces: the incoming image wipes over the outgoing one,
   which is held fully open underneath so no background ever shows through the
   seam. Order matters below — .transition-out and .active both need to beat
   .is-reverse, and they share its specificity. */
.sizes_image_cursor ul li {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 1;
   -webkit-clip-path: inset(0 0 100% 0);
   clip-path: inset(0 0 100% 0);
   transition: -webkit-clip-path 0.7s cubic-bezier(0.7, 0, 0.3, 1);
   transition: clip-path 0.7s cubic-bezier(0.7, 0, 0.3, 1);
   will-change: clip-path;
}

/* moving back up the list reveals from the opposite edge */
.sizes_image_cursor ul li.is-reverse {
   -webkit-clip-path: inset(100% 0 0 0);
   clip-path: inset(100% 0 0 0);
}

.sizes_image_cursor ul li.transition-out {
   z-index: 2;
   -webkit-clip-path: inset(0 0 0 0);
   clip-path: inset(0 0 0 0);
}

.sizes_image_cursor ul li.active {
   z-index: 3;
   -webkit-clip-path: inset(0 0 0 0);
   clip-path: inset(0 0 0 0);
}

/* the photo settles out of a slight push as it is revealed, so the wipe reads
   as the image arriving rather than a mask sliding over a static picture */
.sizes_image_cursor ul li img {
   display: block;
   width: 100%;
   height: 100%;
   -o-object-fit: cover;
   object-fit: cover;
   -o-object-position: center;
   object-position: center;
   transform: scale(1.12);
   transition: transform 0.9s cubic-bezier(0.7, 0, 0.3, 1);
}

.sizes_image_cursor ul li.active img,
.sizes_image_cursor ul li.transition-out img {
   transform: scale(1);
}

/* the rule sits on the row itself, so its negative gutters carry the line
   slightly wider than the text — as in the reference */
.sizes_list_row {
   position: relative;
   align-items: center;
   padding: 40px 0;
   border-top: 1px solid #E5E5E5;
}

/* lifts the hovered row so its image floats over the rows below it */
.sizes_list_row:hover {
   z-index: 2;
}

/* Sits in the gap between the size and the surface pills, and is taller than
   the row on purpose so it overlaps its neighbours while revealed. */
.sizes_image_area {
   position: absolute;
   top: 50%;
   left: 340px;
   width: 236px;
   height: 296px;
   overflow: hidden;
   opacity: 0;
   pointer-events: none;
   transform: translateY(-50%);
   transition: opacity 0.3s ease-out;
   z-index: 1;
}

.sizes_list_row:hover .sizes_image_area {
   opacity: 1;
}

.sizes_image_area img {
   display: block;
   width: 100%;
   height: 100%;
   -o-object-fit: cover;
   object-fit: cover;
   -o-object-position: center;
   object-position: center;
}

/* the slot holds one image per surface; without JS only the default shows */
.sizes_image_area img~img {
   display: none;
}

.sizes_title_area h4 {
   margin: 0;
   font-family: 'Geist', sans-serif;
   font-weight: 500;
   color: #999999;
}

.sizes_surface_area {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
}

.sizes_surface_area a {
   display: inline-block;
   margin: 0;
   padding: 9px 18px;
   border: 1px solid #DADADA;
   border-radius: 999px;
   font-family: 'Aeonik Mono', monospace;
   font-size: 12px;
   font-weight: 400;
   line-height: 1;
   letter-spacing: 0.15em;
   text-transform: uppercase;
   text-decoration: none;
   color: #7A7A7A;
   transition: border-color 0.3s ease, color 0.3s ease;
}

.sizes_surface_area a:hover {
   border-color: #2C2927;
   color: #2C2927;
}

.sizes_label_area span {
   text-transform: uppercase;
}

/* ==========================================================================
   Spaces section
   ========================================================================== */

/* Gap between the two columns. One number to change — it is split evenly
   between the two inner areas, so the outer edges stay flush with the
   container and both photos shrink by the same amount. */
.spaces_section {
   --spaces-gap: 50px;
}

.spaces_left_area {
   padding-right: calc(var(--spaces-gap) / 2);
}

.spaces_right_area {
   padding-left: calc(var(--spaces-gap) / 2);
}

/* the copy is narrower than the photo below it and centred against it */
.spaces_content_area {
   max-width: 630px;
   margin: 0 auto 60px;
}

.spaces_content_area h4 {
   margin: 30px 0 0;
   color: #2C2927;
   font-family: 'Canela Text';
   font-weight: 300;
   line-height: 130%;
   letter-spacing: -0.04em;
}

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

.spaces_right_area p {
   max-width: 400px;
   margin: 44px 0 0;
}

.spaces_right_area a {
   margin-top: 40px;
}

.spaces_content_area p {
   text-transform: uppercase;
}

.spaces_content_area span {
   text-transform: uppercase;
}

/* ==========================================================================
   CTA section
   ========================================================================== */

/* the icon is 486x560 at natural size, so the box is sized to its height and
   clips anything the artwork runs past */
.cta_box_area {
   position: relative;
   display: flex;
   align-items: center;
   min-height: 520px;
   padding: 0 150px;
   border: 1px solid #ccc;
   overflow: hidden;
}

.cta_content_area {
   position: relative;
   z-index: 1;
}

.cta_content_area h2 {
   margin: 40px 0 0;
   line-height: 1.25;
   color: #2C2927;
}

.cta_button_area {
   display: flex;
   flex-wrap: wrap;
   gap: 20px;
   margin-top: 60px;
}

.cta_icon_area {
   position: absolute;
   top: 0;
   right: 0;
   height: 100%;
   pointer-events: none;
}

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

/* secondary button: same shape, inverted weight */
.default_button.is_light {
   background-color: #F0EFED;
   color: #2C2927;
}

.default_button.is_light::before {
   background-color: rgba(44, 41, 39, 0.08);
}

/* Outline variant for secondary actions. Same type, padding and hover wipe as
   the solid button, so it reads as part of the same system without competing
   with the primary calls to action. */
.default_button.is_ghost {
   gap: 14px;
   border: 1px solid rgba(44, 41, 39, 0.25);
   background-color: transparent;
   color: #2C2927;
   cursor: pointer;
   transition: border-color 0.4s ease;
}

.default_button.is_ghost::before {
   background-color: rgba(44, 41, 39, 0.07);
}

.default_button.is_ghost:hover {
   border-color: #2C2927;
}

/* the solid button slides its arrow along; an X reads better turning in place */
.default_button.is_ghost:hover svg {
   -webkit-transform: rotate(90deg);
   transform: rotate(90deg);
}

.default_button.is_ghost:focus-visible {
   outline: 1px solid #2C2927;
   outline-offset: 4px;
}

/* inline-flex would otherwise win over the hidden attribute */
.default_button[hidden] {
   display: none;
}

.cta_content_area span {
   text-transform: uppercase;
}

/* ==========================================================================
   Footer — full-height panel that opens the site menu when it scrolls in
   ========================================================================== */
.site_footer {
   position: relative;
   width: 100%;
   /* Dynamic viewport height so the footer tracks the mobile address bar as it
      shows/hides. With the old 100svh (small viewport) the footer stayed locked
      at the address-bar-visible height, so once the bar retracted on scroll the
      viewport grew and the page background showed through below it — the white
      patch. 100dvh always matches the currently visible viewport, so no gap
      opens in either state. 100vh is the fallback for browsers without dvh. */
   height: 100vh;
   height: 100dvh;
   overflow: hidden;
}

.site_footer_image_area {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}

.site_footer_image_area img {
   display: block;
   width: 100%;
   height: 100%;
   -o-object-fit: cover;
   object-fit: cover;
   -o-object-position: center;
   object-position: center;
}

/* keeps the copyright and social links readable over the photograph */
.site_footer_image_area::after {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(20, 18, 17, 0.25);
}

.site_footer_bottom_area {
   position: absolute;
   left: 0;
   bottom: 40px;
   width: 100%;
   z-index: 2;
}

.site_footer_bottom_area p {
   margin: 0;
   color: rgba(255, 255, 255, 0.85);
}

.site_footer_social_area {
   display: flex;
   justify-content: flex-end;
   gap: 40px;
   margin: 0;
   padding: 0;
   list-style: none;
}

.site_footer_social_area a {
   font-family: 'Geist', sans-serif;
   font-size: 16px;
   font-weight: 300;
   color: rgba(255, 255, 255, 0.85);
   text-decoration: none;
   transition: color 0.3s ease;
}

.site_footer_social_area a:hover {
   color: #fff;
}

/* ==========================================================================
   About page — intro
   ========================================================================== */

/* the label sits at the top and the heading drops to the foot of the column,
   so it lines up with the base of the image beside it whatever height that is */
.about_intro_header_area {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   height: 100%;
   /* padding, not margin: with height:100% a vertical margin would push the
      box 80px past the bottom of its column */
   padding: 40px 0;
   /* lets the heading below size itself against this column's real width */
   container-type: inline-size;
}

.about_intro_header_area span {
   text-transform: uppercase;
}

/* The container steps down 1720 -> 1700 -> 1480 -> 1320 -> 1160 as the viewport
   narrows, so a col-lg-3 can fall to ~266px of content. A fixed 48px heading
   sets lines wider than that and spills out of the column.
   Sizing against the column (cqw) rather than the viewport is what actually
   tracks it, because the container drops in steps far larger than the viewport
   does. The vw line is the fallback for browsers without container queries. */
.about_intro_header_area h2 {
   margin: 0;
   font-size: clamp(26px, 2.2vw, 48px);
   font-size: clamp(26px, 12cqw, 48px);
   font-weight: 300;
   line-height: 1.2;
   text-transform: uppercase;
   overflow-wrap: break-word;
   color: #2C2927;
}

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

.about_intro_content_area p+p {
   margin-top: 26px;
}

/* ==========================================================================
   About page — full-bleed media
   ========================================================================== */
.about_media_section {
   position: relative;
   overflow: hidden;
}

/* Mirror of .philosophy_image_col on the home page. That one keeps its left
   edge on the grid and runs out to the right; this keeps its right edge on the
   grid and runs out to the left, so the row needs no justify-content and the
   pull is on margin-left instead. */
.about_media_image_col {
   --col: 83.333333%;
   /* keep in sync with the col-lg-* class */
   --bleed: calc(50vw - 50%);
   flex: 0 0 auto;
   width: calc(var(--col) + var(--bleed));
   max-width: none;
   margin-left: calc(-1 * var(--bleed));
   padding-left: 0;
}

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

/* ==========================================================================
   About page — our journey slider
   ========================================================================== */
.journey_section {
   overflow: hidden;
}

/* The row stretches this column to the slider's height, so making it a flex
   column lets the lower content drop to the foot — the arrows then sit level
   with the year beneath the slide instead of floating mid-column. */
.journey_header_area {
   display: flex;
   flex-direction: column;
   height: 100%;
}

.journey_header_area h2 {
   margin: 30px 0 0;
   color: #2C2927;
}

/* the auto top margin absorbs the spare height and pushes this pair down */
.journey_header_area p {
   margin: auto 0 0;
}

/* Runs off the right edge so the next milestone peeks past the viewport —
   same bleed as the philosophy image. The left padding is the gap back to the
   copy; because the column is border-box the track just starts further in and
   its right edge stays on the viewport. One number to change. */
.journey_slider_col {
   --bleed: calc(50vw - 50%);
   --journey-gap: 150px;
   /* A definite width is required: the content is a Swiper track wider than the
      viewport, so any content-based sizing (flex-basis/width auto) blows the
      column out. --col must match the col-lg-* class on this element. */
   --col: 75%;
   flex: 0 0 auto;
   width: calc(var(--col) + var(--bleed));
   min-width: 0;
   max-width: none;
   margin-right: calc(-1 * var(--bleed));
   padding-right: 0;
   padding-left: var(--journey-gap);
}

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

.journey_item_header_area {
   display: flex;
   align-items: baseline;
   justify-content: space-between;
   gap: 24px;
   margin-top: 34px;
}

.journey_item_header_area h3 {
   margin: 0;
   color: #2C2927;
}

.journey_item_header_area a,
.journey_item_header_area button {
   display: inline-flex;
   flex-shrink: 0;
   align-items: center;
   gap: 20px;
   padding: 0;
   border: 0;
   background: none;
   font-family: 'Aeonik Mono', monospace;
   font-size: 13px;
   letter-spacing: 0.18em;
   text-transform: uppercase;
   text-decoration: none;
   color: #2C2927;
   cursor: pointer;
}

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

.journey_item_header_area a:hover svg,
.journey_item_header_area button:hover svg {
   transform: translateX(5px);
}

.journey_item_header_area button:focus-visible {
   outline: 1px solid #2C2927;
   outline-offset: 6px;
}

.journey_item_area>span {
   display: block;
   margin-top: 18px;
}

/* ---- controls ---- */
.journey_nav_area {
   display: flex;
   align-items: center;
   gap: 26px;
   margin-top: 80px;
}

.journey_nav_button {
   display: flex;
   flex-shrink: 0;
   align-items: center;
   justify-content: center;
   width: 62px;
   height: 62px;
   padding: 0;
   border: 0;
   border-radius: 50%;
   background-color: #EDE9E3;
   cursor: pointer;
   transition: background-color 0.3s ease;
}

.journey_nav_button:hover {
   background-color: #E2DDD5;
}

/* Swiper disables rather than hides the arrows at the ends */
.journey_nav_button.swiper-button-disabled {
   opacity: 0.4;
   cursor: default;
}

/* the progress bar is absolutely positioned by default; here it has to sit
   inline between the two arrows */
.journey_progress_area.swiper-pagination-progressbar {
   position: relative;
   flex: 1;
   height: 1px;
   background-color: #D6D1CA;
}

.journey_progress_area .swiper-pagination-progressbar-fill {
   background-color: #2C2927;
}

.journey_header_area span {
   text-transform: uppercase;
}

/* ==========================================================================
   About page — certificates strip
   ========================================================================== */
.certificate_section {
   overflow: hidden;
}

.certificate_header_area {
   text-align: center;
}

.certificate_header_area h2 {
   margin: 22px 0 0;
   color: #2C2927;
}

.certificate_slider_area {
   margin-top: 90px;
}

/* fixed-size cards rather than a fraction of the container, which is what
   slidesPerView: 'auto' reads to lay the strip out */
.certificate_slider_area .swiper-slide {
   width: clamp(200px, 20vw, 310px);
   height: auto;
}

.certificate_image_area {
   padding: 20px;
}

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

.certificate_item_area span {
   display: block;
   margin-top: 20px;
   text-align: center;
   text-transform: uppercase;
}

.certificate_header_area span {
   text-transform: uppercase;
}

/* ==========================================================================
   Export page — scroll-driven world map
   ========================================================================== */

/* one viewport of scroll per market group */
.export_map_scroll_area {
   position: relative;
   width: 100%;
   height: calc(var(--groups, 4) * 100vh);
}

.export_map_sticky_area {
   position: sticky;
   top: 0;
   display: flex;
   flex-direction: column;
   justify-content: center;
   width: 100%;
   height: 100vh;
}

/* ---- corner readout ---- */
.export_map_header_area {
   position: relative;
   z-index: 2;
}

.export_map_header_area h2 {
   margin: 22px 0 0;
   color: #2C2927;
}

.export_map_header_area p {
   margin: 14px 0 0;
}

.export_map_step_area {
   display: flex;
   align-items: center;
   gap: 18px;
   margin-top: 40px;
   font-family: 'Aeonik Mono', monospace;
   font-size: 13px;
   letter-spacing: 0.18em;
   color: #6D6D6D;
}

.export_map_track_area {
   position: relative;
   flex: 1;
   height: 1px;
   background-color: #D6D1CA;
}

.export_map_track_area i {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: #2C2927;
   transform: scaleX(0);
   transform-origin: left center;
}

/* ---- the map ---- */

/* Must match the SVG's cropped viewBox (1100 x 433.6). Antarctica and the
   empty polar bands are gone, so this is no longer 2:1 — and the marker
   positions are computed against these same bounds in export.php. */
.export_map_area {
   position: relative;
   width: 100%;
   aspect-ratio: 1100 / 433.6;
}

/* the 2:1 box matches the map's own ratio, so the projection maths holds and a
   percentage position lands on the right country at any size */
/* the whole world stays in view; only the markers change */
.export_map_canvas_area {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}

/* the land tone is set inside the SVG itself — it is loaded as an <img>, so
   rules out here cannot reach its paths */
.export_map_image {
   display: block;
   width: 100%;
   height: 100%;
}

.export_map_group_area {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.5s ease, visibility 0s linear 0.5s;
}

.export_map_group_area.is-active {
   opacity: 1;
   visibility: visible;
   transition: opacity 0.6s ease, visibility 0s linear 0s;
}

/* ---- markers ---- */

.export_marker_area {
   position: absolute;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 6px;
   padding: 0;
   border: 0;
   background: none;
   translate: -50% -50%;
   opacity: 0;
   cursor: pointer;
   transition: opacity 0.5s ease;
}

/* the hovered pin sits above its neighbours so its label is never covered */
.export_marker_area:hover,
.export_marker_area:focus-visible {
   z-index: 3;
}

.export_marker_area:focus {
   outline: none;
}

.is-active .export_marker_area {
   opacity: 1;
   transition-delay: calc(0.12s + var(--i) * 0.035s);
}

.export_marker_area i {
   position: relative;
   display: block;
   width: 9px;
   height: 9px;
   border-radius: 50%;
   background-color: #B3251E;
   box-shadow: 0 0 0 3px rgba(179, 37, 30, 0.18);
}

/* the glow: a ring that expands out of the pin and fades. Offsetting it by --i
   stops all of them pulsing in lockstep, which reads as a flicker. */
.export_marker_area i::after {
   content: '';
   position: absolute;
   top: 50%;
   left: 50%;
   width: 100%;
   height: 100%;
   border-radius: 50%;
   background-color: rgba(179, 37, 30, 0.4);
   translate: -50% -50%;
}

/* only the group on screen animates — otherwise all forty-two keep running
   behind a hidden layer for nothing */
.is-active .export_marker_area i::after {
   animation: export_marker_pulse 2.6s cubic-bezier(0.22, 1, 0.36, 1) infinite;
   animation-delay: calc(var(--i) * 0.22s);
}

@keyframes export_marker_pulse {
   0% {
      scale: 1;
      opacity: 0.5;
   }

   70%,
   100% {
      scale: 3.4;
      opacity: 0;
   }
}

/* Hidden until asked for. With forty-two pins on one map, showing every name
   at once buries the map — the dots carry the story, the label answers "which
   one is that?" on hover, keyboard focus, or tap. */
.export_marker_area em {
   position: absolute;
   top: 100%;
   margin-top: 7px;
   padding: 4px 9px;
   border-radius: 3px;
   background-color: rgba(44, 41, 39, 0.92);
   font-family: 'Aeonik Mono', monospace;
   font-size: 10px;
   font-style: normal;
   letter-spacing: 0.08em;
   white-space: nowrap;
   color: #F3F0EC;
   opacity: 0;
   translate: 0 -4px;
   pointer-events: none;
   transition: opacity 0.25s ease, translate 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.export_marker_area:hover em,
.export_marker_area:focus-visible em {
   opacity: 1;
   translate: 0 0;
}

@media (prefers-reduced-motion: reduce) {
   .is-active .export_marker_area i::after {
      animation: none;
   }
}

.export_map_header_area span {
   text-transform: uppercase;
}

/* ==========================================================================
   Export page — country list
   ========================================================================== */
.export_list_header_area {
   padding-bottom: 40px;
   border-bottom: 1px solid #DDDDDD;
}

.export_list_header_area h2 {
   margin: 0;
   color: #2C2927;
}

.export_list_area {
   margin-top: 60px;
}

.export_list_group_area span.default_label {
   display: block;
   margin-bottom: 46px;
   text-transform: uppercase;
}

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

.export_list_group_area li {
   display: flex;
   align-items: center;
   gap: 22px;
   margin-bottom: 26px;
}

.export_list_group_area li:last-child {
   margin-bottom: 0;
}

/* fixed box so a missing flag leaves the names aligned rather than shunted left */
.export_list_group_area img {
   flex-shrink: 0;
   width: 28px;
   height: auto;
}

.export_list_group_area li span {
   font-family: 'Aeonik Mono', monospace;
   font-size: 14px;
   letter-spacing: 0.15em;
   text-transform: uppercase;
   color: #2C2927;
}

/* ==========================================================================
   Export page — enquiry form
   ========================================================================== */
.export_form_section {
   background-color: #EDE9E3;
}

.export_form_header_area h2 {
   margin: 0;
   color: #2C2927;
}

.export_form_area {
   margin-top: 90px;
}

/* ---- fields ---- */

/* The label starts on the line like a placeholder and floats up once the field
   has focus or content. It stays a real <label> tied to the input, so the hit
   target and screen-reader name survive — which a placeholder alone loses. */
.export_field_area,
.contact_field_area {
   position: relative;
   margin-bottom: 46px;
}

.export_field_area input,
.export_field_area textarea,
.contact_field_area input,
.contact_field_area textarea {
   display: block;
   width: 100%;
   padding: 0 0 12px;
   border: 0;
   border-bottom: 1px solid rgba(44, 41, 39, 0.25);
   border-radius: 0;
   background: none;
   font-family: 'Geist', sans-serif;
   font-size: 16px;
   font-weight: 300;
   color: #2C2927;
   transition: border-color 0.3s ease;
}

.export_field_area textarea,
.contact_field_area textarea {
   min-height: 44px;
   resize: vertical;
}

.export_field_area input:focus,
.export_field_area textarea:focus,
.contact_field_area input:focus,
.contact_field_area textarea:focus {
   outline: none;
   border-bottom-color: #2C2927;
}

.export_field_area label,
.contact_field_area label {
   position: absolute;
   top: 0;
   left: 0;
   font-family: 'Geist', sans-serif;
   font-size: 14px;
   font-weight: 300;
   letter-spacing: 0.04em;
   text-transform: uppercase;
   color: #2C2927;
   pointer-events: none;
   transform-origin: left top;
   transition: transform 0.25s ease, color 0.25s ease;
}

/* :not(:placeholder-shown) is why every field carries placeholder=" " */
.export_field_area input:focus+label,
.export_field_area input:not(:placeholder-shown)+label,
.export_field_area textarea:focus+label,
.export_field_area textarea:not(:placeholder-shown)+label,
.contact_field_area input:focus+label,
.contact_field_area input:not(:placeholder-shown)+label,
.contact_field_area textarea:focus+label,
.contact_field_area textarea:not(:placeholder-shown)+label {
   transform: translateY(-22px) scale(0.82);
   color: #6D6D6D;
}

/* ---- consent ---- */
.export_form_consent_area,
.contact_form_consent_area {
   margin-top: 44px;
}

.export_check_area,
.contact_check_area {
   display: flex;
   align-items: flex-start;
   gap: 22px;
   margin-bottom: 26px;
}

.export_check_area input,
.contact_check_area input {
   flex-shrink: 0;
   width: 22px;
   height: 22px;
   margin: 0;
   border: 1px solid #2C2927;
   border-radius: 0;
   background-color: transparent;
   appearance: none;
   -webkit-appearance: none;
   cursor: pointer;
   transition: background-color 0.2s ease;
}

.export_check_area input:checked,
.contact_check_area input:checked {
   background-color: #2C2927;
}

/* the tick is drawn rather than a glyph, so it stays crisp at any size */
.export_check_area input:checked::after,
.contact_check_area input:checked::after {
   content: '';
   display: block;
   width: 5px;
   height: 10px;
   margin: 3px auto 0;
   border: solid #F3F0EC;
   border-width: 0 1.5px 1.5px 0;
   transform: rotate(45deg);
}

.export_check_area input:focus-visible,
.contact_check_area input:focus-visible {
   outline: 2px solid #2C2927;
   outline-offset: 3px;
}

.export_check_area label,
.contact_check_area label {
   font-family: 'Geist', sans-serif;
   font-size: 15px;
   font-weight: 300;
   line-height: 1.5;
   color: #2C2927;
   cursor: pointer;
}

.export_form_area .default_button,
.contact_form_area .default_button {
   margin-top: 34px;
   border: 0;
   cursor: pointer;
}

.contact_form_area .default_button.is-loading,
.export_form_area .default_button.is-loading {
   opacity: 0.6;
   pointer-events: none;
}

/* ---- validation ---- */
/* :empty collapses the space when JS clears the message, so a field with no
   error doesn't carry a permanent gap under it */
.contact_field_error {
   display: block;
   margin-top: 8px;
   font-family: 'Geist', sans-serif;
   font-size: 12px;
   font-weight: 300;
   letter-spacing: 0.02em;
   color: #9a3327;
}

.contact_field_error:empty {
   display: none;
}

.contact_field_area.has_error input,
.contact_field_area.has_error textarea,
.export_field_area.has_error input,
.export_field_area.has_error textarea {
   border-bottom-color: #9a3327;
}

.contact_select_field_area.has_error select {
   border-bottom-color: #9a3327;
}

/* ==========================================================================
   Download page — catalogue library
   ========================================================================== */
.catalog_header_area,
.blog_header_area {
   padding-bottom: 34px;
   border-bottom: 1px solid #DDDDDD;
}

.catalog_header_area h2,
.blog_header_area h2 {
   margin: 0;
   color: #2C2927;
}

/* ---- filter + search ---- */
.catalog_filter_area,
.blog_filter_area {
   margin: 80px 0 100px;
}

.catalog_select_area label,
.blog_select_area label {
   display: block;
   margin-bottom: 30px;
   text-transform: uppercase;
}

/* the native arrow differs per platform, so it is replaced with one drawn here */
.catalog_select_area select,
.blog_select_area select {
   width: 100%;
   padding: 0 26px 14px 0;
   border: 0;
   border-bottom: 1px solid rgba(44, 41, 39, 0.3);
   border-radius: 0;
   background-color: transparent;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7' fill='none'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%232C2927' stroke-width='1'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: right center;
   appearance: none;
   -webkit-appearance: none;
   font-family: 'Geist', sans-serif;
   font-size: 16px;
   font-weight: 300;
   color: #2C2927;
   cursor: pointer;
   transition: border-color 0.3s ease;
}

.catalog_select_area select:focus,
.blog_select_area select:focus {
   outline: none;
   border-bottom-color: #2C2927;
}

/* the filter carries a label and the search does not, so bottom-aligning the
   columns is what puts the two underlines on one line */
.catalog_filter_area .row,
.blog_filter_area .row {
   align-items: flex-end;
}

/* The underline lives on the wrapper, and the input and icon share one flex
   line — so the icon sits on the same baseline by construction rather than
   being positioned against a box that can be taller than the field. */
.catalog_search_area,
.blog_search_area {
   display: flex;
   align-items: center;
   gap: 14px;
   border-bottom: 1px solid rgba(44, 41, 39, 0.3);
   transition: border-color 0.3s ease;
}

.catalog_search_area:focus-within,
.blog_search_area:focus-within {
   border-bottom-color: #2C2927;
}

.catalog_search_area input,
.blog_search_area input {
   flex: 1;
   min-width: 0;
   padding: 0 0 14px;
   border: 0;
   border-radius: 0;
   background: none;
   font-family: 'Geist', sans-serif;
   font-size: 16px;
   font-weight: 300;
   color: #2C2927;
}

.catalog_search_area input::placeholder,
.blog_search_area input::placeholder {
   color: #8A8A8A;
}

.catalog_search_area input:focus,
.blog_search_area input:focus {
   outline: none;
}

.catalog_search_area button,
.blog_search_area button {
   flex-shrink: 0;
   /* matches the input's padding so both rest on the underline */
   padding: 0 0 14px;
   border: 0;
   background: none;
   color: #2C2927;
   cursor: pointer;
   line-height: 0;
}

/* reachable by screen readers, invisible on screen */
.catalog_hidden_label,
.blog_hidden_label {
   position: absolute;
   width: 1px;
   height: 1px;
   margin: -1px;
   padding: 0;
   overflow: hidden;
   clip: rect(0 0 0 0);
   white-space: nowrap;
   border: 0;
}

/* ---- grid ---- */
/* Laid out as a real grid rather than with column padding. Padding can only
   sit inside a fixed-width column, so zeroing it on the outer cards to keep
   the row flush also makes those cards wider than the ones between them.
   column-gap puts the space *between* the tracks instead, so every cover is
   the same width and the row still ends flush with the container.
   Column counts per breakpoint are in responsive.css. */
.catalog_grid_area {
   --bs-gutter-x: 0;
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   column-gap: 100px;
   row-gap: 90px;
   transition: opacity 0.25s ease;
}

/* the col-* classes still carry a 25% width, which would shrink the track */
.catalog_grid_area>div {
   width: auto;
   padding: 0;
}

.catalog_empty_area {
   grid-column: 1 / -1;
}

/* results are being swapped, so dim rather than empty the grid — the layout
   holds still instead of collapsing and snapping back */
.catalog_grid_area.is-loading {
   opacity: 0.4;
}

.catalog_item_area {
   display: block;
   text-decoration: none;
}

/* fixed ratio so a row stays aligned whether or not a cover has loaded */
.catalog_thumb_area {
   display: block;
   aspect-ratio: 5 / 7;
   overflow: hidden;
   background-color: #EAE6E0;
}

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

.catalog_item_area .default_label {
   display: block;
   margin-top: 26px;
   text-transform: uppercase;
}

.catalog_title_area {
   display: block;
   margin-top: 12px;
   font-family: 'Geist', sans-serif;
   font-size: 22px;
   font-weight: 500;
   color: #2C2927;
   transition: opacity 0.3s ease;
}

.catalog_item_area:hover .catalog_title_area {
   opacity: 0.6;
}

.catalog_empty_area {
   width: 100%;
   padding: 10px 12px;
}

/* ==========================================================================
   Blog page — article list
   (header, filter and search chrome is shared with the catalogue rules above)
   ========================================================================== */
.blog_list_area {
   transition: opacity 0.25s ease;
}

/* the rule sits between articles, so the first one opens straight off the
   filter rather than under a stray line */
.blog_list_area>div+div {
   border-top: 1px solid #DDDDDD;
}

/* Fixed thumbnail column, fluid copy. The covers are 440x260, so a percentage
   track keeps them near their native size on a wide container and scales them
   down with it rather than letting the copy swallow the row. */
.blog_item_area {
   display: grid;
   grid-template-columns: 30% 1fr;
   -webkit-column-gap: 48px;
   -moz-column-gap: 48px;
   column-gap: 48px;
   align-items: start;
   padding: 46px 0;
   text-decoration: none;
}

.blog_list_area>div:first-child .blog_item_area {
   padding-top: 0;
}

/* fixed ratio so a row stays aligned whether or not a cover has loaded */
.blog_thumb_area {
   display: block;
   aspect-ratio: 22 / 13;
   overflow: hidden;
   background-color: #EAE6E0;
}

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

.blog_content_area {
   display: block;
}

.blog_content_area .default_label {
   display: block;
   text-transform: uppercase;
}

.blog_title_area {
   display: block;
   margin-top: 22px;
   font-family: 'Geist', sans-serif;
   font-size: 26px;
   font-weight: 500;
   line-height: 1.4;
   color: #2C2927;
   transition: opacity 0.3s ease;
}

.blog_item_area:hover .blog_title_area {
   opacity: 0.6;
}

/* The image is the largest part of the row and the most likely thing to be
   pointed at, so it needs to answer. A fade rather than a zoom, matching how
   the rest of the site responds. */
.blog_item_area:hover .blog_thumb_area img {
   opacity: 0.82;
}

.blog_thumb_area img {
   transition: opacity 0.4s ease;
}

/* kept faintly visible rather than revealed on hover, so the row still reads
   as a link on touch, where there is no hover at all */
.blog_more_area {
   display: block;
   margin-top: 26px;
   color: #2C2927;
   opacity: 0.35;
   line-height: 0;
   transition: opacity 0.3s ease, transform 0.3s ease;
}

.blog_item_area:hover .blog_more_area {
   opacity: 1;
   -webkit-transform: translateX(8px);
   transform: translateX(8px);
}

/* the row is a full-width link, so without this there is no way to tell where
   the keyboard is in the list */
.blog_item_area:focus-visible {
   outline: 1px solid #2C2927;
   outline-offset: 10px;
}

/* ---- result count + reset ---- */
/* the filter's own bottom margin is reduced below, so this line sits between
   the two rather than adding to the gap */
.blog_result_area {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 20px;
   margin-bottom: 40px;
}

/* set in the same mono as the "Filter by:" label above it, so the two read as
   one piece of chrome around the list */
.blog_result_area p {
   margin: 0;
   font-family: 'Aeonik Mono', monospace;
   font-size: 13px;
   letter-spacing: 0.15em;
   text-transform: uppercase;
   color: #6D6D6D;
}

.blog_filter_area {
   margin-bottom: 54px;
}

/* results are being swapped, so dim rather than empty the list — the layout
   holds still instead of collapsing and snapping back */
.blog_list_area.is-loading {
   opacity: 0.4;
}

.blog_empty_area {
   width: 100%;
   padding: 10px 0;
}

.blog_empty_area p {
   margin: 0 0 22px;
}

/* ==========================================================================
   Blog detail page
   ========================================================================== */

/* ---- reading progress ---- */
.article_progress_area {
   position: fixed;
   top: 0;
   left: 0;
   z-index: 90;
   width: 100%;
   height: 2px;
   background-color: rgba(44, 41, 39, 0.08);
}

.article_progress_area span {
   display: block;
   width: 100%;
   height: 100%;
   background-color: #2C2927;
   -webkit-transform: scaleX(0);
   transform: scaleX(0);
   -webkit-transform-origin: left center;
   transform-origin: left center;
}

/* ---- intro ---- */
.article_crumb_area {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 10px;
   margin-bottom: 46px;
   font-family: 'Aeonik Mono', monospace;
   font-size: 12px;
   letter-spacing: 0.14em;
   text-transform: uppercase;
   color: #6D6D6D;
}

.article_crumb_area a {
   color: #6D6D6D;
   text-decoration: none;
   transition: color 0.3s ease;
}

.article_crumb_area a:hover {
   color: #2C2927;
}

/* the last crumb is the article itself, which can be long — it truncates
   rather than pushing the trail onto a second line */
.article_crumb_area em {
   max-width: 34ch;
   overflow: hidden;
   font-style: normal;
   text-overflow: ellipsis;
   white-space: nowrap;
   color: #2C2927;
}

.article_header_area .default_label {
   display: block;
   text-transform: uppercase;
}

/* the measure is held well under the column width — a headline running the
   full width of a wide container is hard to track back from line to line */
.article_header_area h1 {
   margin: 26px 0 0;
   color: #2C2927;
}

.article_header_area p {
   margin: 30px 0 0;
   font-size: 20px;
   line-height: 1.75;
   color: #55504C;
}

/* ---- share ---- */
.article_share_area {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 24px;
   margin-top: 54px;
   padding-top: 30px;
   border-top: 1px solid #DDDDDD;
}

.article_share_area ul {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   margin: 0;
   padding: 0;
   list-style: none;
}

.article_share_area a,
.article_share_area button {
   display: inline-block;
   padding: 9px 16px;
   border: 1px solid rgba(44, 41, 39, 0.2);
   background: none;
   font-family: 'Aeonik Mono', monospace;
   font-size: 12px;
   letter-spacing: 0.12em;
   text-transform: uppercase;
   color: #2C2927;
   text-decoration: none;
   cursor: pointer;
   transition: border-color 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}

.article_share_area a:hover,
.article_share_area button:hover {
   border-color: #2C2927;
   background-color: #2C2927;
   color: #F0EFED;
}

.article_share_area a:focus-visible,
.article_share_area button:focus-visible {
   outline: 1px solid #2C2927;
   outline-offset: 3px;
}

/* ---- contents ---- */
/* sticky rather than fixed, so it scrolls out with its column at the end of
   the article instead of hanging over the related posts */
.article_toc_area {
   position: -webkit-sticky;
   position: sticky;
   top: 140px;
}

.article_toc_area summary {
   display: none;
}

.article_toc_area ol {
   margin: 0;
   padding: 0;
   list-style: none;
   counter-reset: toc;
}

.article_toc_area li {
   counter-increment: toc;
   margin-bottom: 2px;
}

.article_toc_area a {
   display: block;
   padding: 9px 0 9px 16px;
   /* the rule is on every item and only the colour changes, so nothing shifts
      sideways when the active section changes */
   border-left: 1px solid #DDDDDD;
   font-family: 'Geist', sans-serif;
   font-size: 14px;
   font-weight: 300;
   line-height: 1.5;
   color: #8A8A8A;
   text-decoration: none;
   transition: color 0.3s ease, border-color 0.3s ease;
}

.article_toc_area a::before {
   content: counter(toc, decimal-leading-zero);
   margin-right: 10px;
   font-family: 'Aeonik Mono', monospace;
   font-size: 11px;
   letter-spacing: 0.1em;
   color: #B5B0AA;
}

.article_toc_area a:hover {
   color: #2C2927;
}

.article_toc_area a.is-active {
   border-left-color: #2C2927;
   color: #2C2927;
}

.article_toc_area a:focus-visible {
   outline: 1px solid #2C2927;
   outline-offset: 2px;
}

/* ---- article body ---- */
/* Held to a measure rather than the column width. Comfortable reading tops out
   somewhere around 75 characters a line, and the column is wider than that on
   a large display. */
.article_content_area {
   max-width: 72ch;
   font-family: 'Geist', sans-serif;
   font-size: 18px;
   font-weight: 300;
   line-height: 1.85;
   color: #3F3B38;
}

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

.article_content_area> :last-child {
   margin-bottom: 0;
}

.article_content_area p {
   margin: 0 0 28px;
}

.blog_lead_area {
   font-size: 21px;
   line-height: 1.7;
   color: #2C2927;
}

/* Headings carry far more space above than below, so each one binds to the
   text it introduces rather than floating between two blocks. */
.article_content_area h2 {
   margin: 76px 0 26px;
   font-size: 34px;
   line-height: 1.25;
   color: #2C2927;
   /* the anchor would otherwise land under the fixed logo */
   scroll-margin-top: 140px;
}

.article_content_area h3 {
   margin: 52px 0 18px;
   font-size: 24px;
   line-height: 1.35;
   color: #2C2927;
   scroll-margin-top: 140px;
}

.article_content_area h4 {
   margin: 40px 0 14px;
   font-family: 'Geist', sans-serif;
   font-size: 19px;
   font-weight: 500;
   line-height: 1.4;
   color: #2C2927;
}

.article_content_area h5,
.article_content_area h6 {
   margin: 34px 0 12px;
   font-family: 'Aeonik Mono', monospace;
   font-size: 13px;
   font-weight: 400;
   letter-spacing: 0.16em;
   text-transform: uppercase;
   color: #6D6D6D;
}

.article_content_area a {
   color: #2C2927;
   text-decoration: none;
   border-bottom: 1px solid rgba(44, 41, 39, 0.35);
   transition: border-color 0.3s ease;
}

.article_content_area a:hover {
   border-bottom-color: #2C2927;
}

.article_content_area strong {
   font-weight: 500;
   color: #2C2927;
}

.article_content_area em {
   font-style: italic;
}

/* markers sit in the gutter, so the text of a wrapped item still lines up */
.article_content_area ul,
.article_content_area ol {
   margin: 0 0 28px;
   padding-left: 26px;
}

.article_content_area li {
   margin-bottom: 14px;
   padding-left: 8px;
}

.article_content_area li::marker {
   color: #8A8A8A;
}

.article_content_area ul ul,
.article_content_area ol ol,
.article_content_area ul ol,
.article_content_area ol ul {
   margin: 14px 0 0;
}

.article_content_area blockquote {
   margin: 48px 0;
   padding: 4px 0 4px 32px;
   border-left: 2px solid #2C2927;
   font-family: 'Canela Text', serif;
   font-size: 24px;
   font-weight: 300;
   font-style: italic;
   line-height: 1.55;
   color: #2C2927;
}

.article_content_area blockquote p {
   margin: 0;
}

/* Figures break the measure and run the full column width — an image sized to
   the text column reads as an afterthought. */
.article_content_area figure {
   width: 100%;
   margin: 52px 0;
}

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

.article_content_area figcaption {
   margin-top: 16px;
   font-family: 'Aeonik Mono', monospace;
   font-size: 12px;
   letter-spacing: 0.08em;
   line-height: 1.7;
   color: #8A8A8A;
}

/* a wide table scrolls inside its own box rather than pushing the page sideways */
.article_content_area table {
   display: block;
   width: 100%;
   margin: 44px 0;
   overflow-x: auto;
   border-collapse: collapse;
   font-size: 16px;
}

.article_content_area th,
.article_content_area td {
   padding: 16px 20px 16px 0;
   border-bottom: 1px solid #DDDDDD;
   text-align: left;
   vertical-align: top;
}

.article_content_area th {
   font-family: 'Aeonik Mono', monospace;
   font-size: 12px;
   font-weight: 400;
   letter-spacing: 0.14em;
   text-transform: uppercase;
   color: #6D6D6D;
   white-space: nowrap;
}

.article_content_area hr {
   margin: 60px 0;
   border: 0;
   border-top: 1px solid #DDDDDD;
   opacity: 1;
}

/* ---- foot ---- */
.article_foot_area {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
   gap: 24px;
   max-width: 72ch;
   margin-top: 70px;
   padding-top: 34px;
   border-top: 1px solid #DDDDDD;
}

.article_foot_area .default_label {
   text-transform: uppercase;
}

/* ---- related ---- */
.article_related_header_area {
   padding-bottom: 34px;
   border-bottom: 1px solid #DDDDDD;
}

.article_related_header_area .default_label {
   display: block;
   margin-bottom: 18px;
   text-transform: uppercase;
}

.article_related_header_area h2 {
   margin: 0;
   color: #2C2927;
}

.article_related_grid_area {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   -webkit-column-gap: 60px;
   -moz-column-gap: 60px;
   column-gap: 60px;
   row-gap: 50px;
   margin-top: 56px;
}

.article_related_item_area {
   display: block;
   text-decoration: none;
}

.article_related_thumb_area {
   display: block;
   aspect-ratio: 22 / 13;
   overflow: hidden;
   background-color: #EAE6E0;
}

.article_related_thumb_area img {
   display: block;
   width: 100%;
   height: 100%;
   -o-object-fit: cover;
   object-fit: cover;
   transition: opacity 0.4s ease;
}

.article_related_item_area:hover .article_related_thumb_area img {
   opacity: 0.82;
}

.article_related_item_area .default_label {
   display: block;
   margin-top: 22px;
   text-transform: uppercase;
}

.article_related_title_area {
   display: block;
   margin-top: 10px;
   font-family: 'Geist', sans-serif;
   font-size: 20px;
   font-weight: 500;
   line-height: 1.4;
   color: #2C2927;
   transition: opacity 0.3s ease;
}

.article_related_item_area:hover .article_related_title_area {
   opacity: 0.6;
}

.article_related_item_area:focus-visible {
   outline: 1px solid #2C2927;
   outline-offset: 10px;
}

/* ---- 404 ---- */
.article_missing_area {
   max-width: 46ch;
   padding: 80px 0 40px;
}

.article_missing_area h2 {
   margin: 20px 0 0;
   color: #2C2927;
}

.article_missing_area p {
   margin: 22px 0 40px;
}

/* ==========================================================================
   Contact page
   ========================================================================== */
/* held short so the headline breaks after "story," rather than running the
   full column — a max-width does that responsively, where a <br> would not */
.contact_header_area h2 {
   max-width: 640px;
   margin: 0;
   color: #2C2927;
}

.contact_body_area {
   margin-top: 96px;
}

.contact_intro_area h4 {
   margin: 0;
   font-family: 'Geist', sans-serif;
   font-size: 17px;
   font-weight: 500;
   line-height: 1.5;
   color: #2C2927;
}

.contact_intro_area p {
   margin: 6px 0 0;
   font-size: 17px;
   color: #8A8A8A;
}

/* ---- details ---- */
.contact_list_area {
   margin: 58px 0 0;
   padding: 0;
   list-style: none;
}

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

.contact_list_area li:last-child {
   margin-bottom: 0;
}

/* the icons carry their own circle, so they must not be squeezed by a long
   address beside them */
.contact_list_area li>img {
   flex-shrink: 0;
   width: 70px;
   height: 70px;
}

.contact_item_area span {
   display: block;
   font-family: 'Geist', sans-serif;
   font-size: 16px;
   font-weight: 500;
   line-height: 1.5;
   color: #2C2927;
}

.contact_item_area p {
   margin: 2px 0 0;
   font-size: 16px;
   line-height: 1.55;
   color: #55504C;
}

.contact_item_area a {
   color: #55504C;
   text-decoration: none;
   transition: color 0.3s ease;
}

.contact_item_area a:hover {
   color: #2C2927;
}

.contact_item_area a:focus-visible {
   outline: 1px solid #2C2927;
   outline-offset: 3px;
}

/* ---- form ---- */
.contact_field_grid_area {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   -webkit-column-gap: 50px;
   -moz-column-gap: 50px;
   column-gap: 50px;
   row-gap: 46px;
}

/* the rhythm is the grid's row-gap here, so the shared margin would double it */
.contact_field_grid_area .contact_field_area {
   margin-bottom: 0;
}

.contact_wide_field_area {
   grid-column: 1 / -1;
}

/* matches the resting position of the floating labels on the fields around it */
.contact_select_field_area select {
   display: block;
   width: 100%;
   padding: 0 26px 12px 0;
   border: 0;
   border-bottom: 1px solid rgba(44, 41, 39, 0.25);
   border-radius: 0;
   background-color: transparent;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7' fill='none'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%232C2927' stroke-width='1'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: right center;
   appearance: none;
   -webkit-appearance: none;
   font-family: 'Geist', sans-serif;
   font-size: 14px;
   font-weight: 300;
   letter-spacing: 0.04em;
   text-transform: uppercase;
   color: #2C2927;
   cursor: pointer;
   transition: border-color 0.3s ease;
}

.contact_select_field_area select:focus {
   outline: none;
   border-bottom-color: #2C2927;
}

/* reachable by screen readers, invisible on screen */
.contact_hidden_label {
   position: absolute;
   width: 1px;
   height: 1px;
   margin: -1px;
   padding: 0;
   overflow: hidden;
   clip: rect(0 0 0 0);
   white-space: nowrap;
   border: 0;
}

/* ==========================================================================
   Contact page — map
   ========================================================================== */
/* the bleed below would otherwise widen the document and give the page a
   horizontal scrollbar */
.contact_map_section {
   position: relative;
   overflow: hidden;
}

/* Same construction as .about_media_image_col: the right edge stays on the
   grid and the block runs out to the left. 50% resolves against the row, which
   is the container's width, so the bleed is exactly the gutter beside it. */
.contact_map_col {
   --col: 83.333333%;
   /* keep in sync with the col-lg-* class */
   --bleed: calc(50vw - 50%);
   flex: 0 0 auto;
   width: calc(var(--col) + var(--bleed));
   max-width: none;
   margin-left: calc(-1 * var(--bleed));
   padding-left: 0;
}

/* fixed ratio, so the page does not reflow when the embed finishes loading */
.contact_map_area {
   position: relative;
   width: 100%;
   aspect-ratio: 15 / 7;
   overflow: hidden;
   background-color: #EAE6E0;
}

.contact_map_area iframe {
   display: block;
   width: 100%;
   height: 100%;
   border: 0;
}

/* ==========================================================================
   About page — scale figures
   ========================================================================== */
.stats_header_area h2 {
   margin: 0;
   color: #2C2927;
}

.stats_list_area {
   margin-top: 100px;
}

/* Label at the top, figure pinned to the bottom, with the rule running the
   full height between them — so the four figures share a baseline however many
   lines their labels take. */
.stats_item_area {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   min-height: 460px;
   padding-left: 44px;
   border-left: 1px solid #D5D0CA;
}

/* the label only — a direct child span. Scoped so it never reaches the drum
   spans the rotating-reveal builds inside the <p> below. */
.stats_item_area > span {
   display: block;
   font-family: 'Geist', sans-serif;
   font-size: 18px;
   font-weight: 300;
   line-height: 1.5;
   letter-spacing: 0.01em;
   text-transform: uppercase;
   color: #8A8A8A;
}

/* baseline alignment, so the + sits on the figure's baseline rather than being
   centred against a much taller box */
.stats_item_area p {
   display: flex;
   align-items: baseline;
   gap: 16px;
   margin: 0;
   font-family: 'Geist', sans-serif;
   font-size: 100px;
   font-weight: 300;
   line-height: 1;
   letter-spacing: -0.04em;
   color: #2C2927;
}

.stats_item_area em {
   font-size: 40px;
   font-style: normal;
   letter-spacing: 0;
   color: #8A8A8A;
}

/* --- Rotating reveal (js/stats-reveal.js) --------------------------------
   The figure is rebuilt as one masked drum per character; each drum spins
   through decoy digits and settles on the real glyph. Every drum is pinned in
   JS to its final character's exact width, so the settled figure keeps the
   plain number's proportional spacing rather than spreading into a monospace
   grid. All of this only exists once JS enhances the value — the bare number
   renders fine without it. */
.stat_value {
   /* inline-block, not flex: the drums are inline-blocks in normal flow, so the
      figure's own letter-spacing (-0.04em) tracks between them exactly as it
      did on the plain number. No tabular-nums either — each drum is pinned to
      its target's real width in JS, so the settled figure keeps the original
      proportional kerning instead of a wide monospace grid. */
   display: inline-block;
   /* inherit the figure's size/weight/colour from the <p>, and undo anything a
      broader span rule might try to impose, so the drums always match the
      static number they replace */
   font: inherit;
   color: inherit;
   text-transform: none;
   letter-spacing: inherit;
   white-space: nowrap;
}

.stat_glyph {
   position: relative;
   display: inline-block;
   height: 1em;
   line-height: 1;
   vertical-align: baseline;
   font: inherit;
   color: inherit;
   text-transform: none;
   /* clip the spinning strip with clip-path, NOT overflow: an inline-block with
      overflow:hidden reports its baseline as its bottom edge, which would drop
      the "+" beside the figure below the digits' baseline. clip-path clips
      without touching the baseline, so the ghost's real baseline is preserved. */
   clip-path: inset(0);
   /* per-glyph blur, driven by GSAP through --sb (a plain px number) so it
      eases off as the drum slows */
   filter: blur(calc(var(--sb, 0) * 1px));
}

/* invisible, in normal flow: sets the drum's width and baseline (see JS) */
.stat_glyph_ghost {
   display: inline-block;
   visibility: hidden;
}

.stat_glyph_strip {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   display: flex;
   flex-direction: column;
   /* Slot-window fade, sized by --fade (a percentage the JS eases from ~26 down
      to 0 as the drum settles). At 0 the gradient is solid top-to-bottom, i.e.
      no fade at all — so the figure ends fully crisp with no snap, and rests
      that way before the roll ever fires. */
   --fade: 0;
   -webkit-mask-image: linear-gradient(to bottom,
         transparent 0,
         #000 calc(var(--fade) * 1%),
         #000 calc(100% - var(--fade) * 1%),
         transparent 100%);
   mask-image: linear-gradient(to bottom,
         transparent 0,
         #000 calc(var(--fade) * 1%),
         #000 calc(100% - var(--fade) * 1%),
         transparent 100%);
}

.stat_cell {
   display: block;
   height: 1em;
   line-height: 1;
   text-align: center;
   font: inherit;
   color: inherit;
   text-transform: none;
}

@media (prefers-reduced-motion: reduce) {

   /* belt and braces: the script already bails on reduced-motion, but if the
      markup was ever enhanced, never leave a figure masked or blurred */
   .stat_glyph_strip {
      -webkit-mask-image: none;
      mask-image: none;
   }

   .stat_glyph {
      filter: none;
   }
}

/* ==========================================================================
   About page — technology
   ========================================================================== */
/* A full-width split rather than a container section: the image runs off the
   left edge and the panel off the right, so neither has a gutter beside it.
   The content decides the row height and the image covers whatever that is. */
.technology_section {
   display: grid;
   grid-template-columns: 49% 1fr;
   align-items: stretch;
}

.technology_image_area {
   overflow: hidden;
   background-color: #EAE6E1;
}

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

.technology_content_area {
   display: flex;
   flex-direction: column;
   justify-content: center;
   padding: 80px 90px;
   background-color: #EAE6E1;
}

/* held short so the headline turns after "technology", the way the panel is
   drawn — the paragraph below runs the full width */
.technology_header_area h2 {
   max-width: 460px;
   margin: 0;
   color: #2C2927;
}

.technology_header_area p {
   margin: 42px 0 0;
   font-size: 17px;
   line-height: 1.65;
   color: #55504C;
}

/* ---- supplier logos ---- */
/* No column gap: the dotted rule is the top edge of each cell, and a gap would
   break it into two dashes per row. Separation comes from the alignment
   instead — left column left, right column right. */
.technology_logo_area {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   margin-top: 34px;
}

.technology_logo_area>div {
   display: flex;
   align-items: center;
   min-height: 116px;
   padding-right: 24px;
   border-top: 1px dashed #C5BFB7;
}

.technology_logo_area>div:nth-child(even) {
   justify-content: flex-end;
   padding-right: 0;
   padding-left: 24px;
}

/* the SVGs carry their intended size, so they render at natural scale and only
   shrink when the column gets narrower than the mark */
.technology_logo_area img {
   display: block;
   max-width: 100%;
   height: auto;
}

.journey_section {
   padding-top: 180px;
}

/* Desktop reads the map itself, so the written list is a small-screen device
   only — see responsive.css. */
.export_map_names_area {
   display: none;
}

/* ==========================================================================
   About page — milestone panel
   ========================================================================== */
/* Matches the photographs' own 800x620, so nothing is cropped. Stated as a
   ratio rather than left to the image, so a row of slides stays aligned before
   anything has loaded and a missing file leaves a placeholder instead of
   collapsing the slide. */
.journey_image_area {
   display: block;
   aspect-ratio: 40 / 31;
   overflow: hidden;
   background-color: #EAE6E1;
}

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

.journey_modal_area {
   position: fixed;
   inset: 0;
   z-index: 1200;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 24px;
}

.journey_modal_area[hidden] {
   display: none;
}

/* the same darkened blur the bottom bar and the site menu use, so the panel
   reads as part of the set rather than a browser dialog */
.journey_modal_backdrop_area {
   position: absolute;
   inset: 0;
   background-color: rgba(20, 18, 17, 0.55);
   -webkit-backdrop-filter: blur(14px);
   backdrop-filter: blur(14px);
   opacity: 0;
   transition: opacity 0.45s ease;
}

.journey_modal_area.is-open .journey_modal_backdrop_area {
   opacity: 1;
}

.journey_modal_panel_area {
   position: relative;
   width: 100%;
   max-width: 560px;
   padding: 56px 60px 52px;
   background-color: #F3F0EC;
   opacity: 0;
   -webkit-transform: translateY(24px);
   transform: translateY(24px);
   transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.journey_modal_panel_area:focus {
   outline: none;
}

.journey_modal_area.is-open .journey_modal_panel_area {
   opacity: 1;
   -webkit-transform: translateY(0);
   transform: translateY(0);
}

.journey_modal_panel_area .default_label {
   display: block;
   text-transform: uppercase;
}

.journey_modal_panel_area h3 {
   margin: 18px 0 0;
   /* the close button occupies the top-right corner */
   padding-right: 40px;
   color: #2C2927;
}

.journey_modal_panel_area p {
   margin: 26px 0 0;
   font-size: 17px;
   line-height: 1.7;
}

.journey_modal_close_area {
   position: absolute;
   top: 26px;
   right: 26px;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 40px;
   height: 40px;
   padding: 0;
   border: 1px solid rgba(44, 41, 39, 0.2);
   background: none;
   color: #2C2927;
   cursor: pointer;
   transition: border-color 0.3s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.journey_modal_close_area:hover {
   border-color: #2C2927;
   /* the X turns into a + rather than sliding, matching the ghost button */
   -webkit-transform: rotate(90deg);
   transform: rotate(90deg);
}

.journey_modal_close_area:focus-visible {
   outline: 1px solid #2C2927;
   outline-offset: 3px;
}

/* the page behind must not scroll under the panel on browsers Lenis is not
   driving */
body.journey-modal-open {
   overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {

   .journey_modal_backdrop_area,
   .journey_modal_panel_area {
      transition-duration: 0.01ms;
   }
}


/* ============================================================================
   Collection & product detail
   ----------------------------------------------------------------------------
   Editorial, gallery-led layout in the house language: Canela display heads,
   Aeonik-Mono labels tracked to 0.15em, the expo-out easing the buttons use,
   cream / white grounds and hairline rules. Nothing here invents a new visual
   idea — it extends the one the homepage already speaks.
   ========================================================================== */

:root {
   --lp-ink: #2C2927;
   --lp-ink-soft: #4A4744;
   --lp-muted: #6D6D6D;
   --lp-faint: #8A8A8A;
   --lp-cream: #F3F0EC;
   --lp-panel: #EAE6E0;
   --lp-line: rgba(44, 41, 39, 0.14);
   --lp-line-strong: rgba(44, 41, 39, 0.28);
   --lp-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------------------------------------------------------------- collection */
/* the site header is position:absolute over the top of the page; pages that
   open on content (no hero image) have to clear it themselves */
.product_section,
.product_detail_section {
   position: relative;
   overflow: hidden;
   padding-top: 180px;
}

/* editorial header: label + display heading on the left, lead paragraph on the
   right sitting on the heading's baseline — the sizes_section split, inverted
   so the hero line fills the wide column */
.product_intro_area {
   display: grid;
   grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
   gap: 40px 80px;
   align-items: end;
   padding-bottom: 52px;
   border-bottom: 1px solid var(--lp-line);
}

.product_intro_head .default_label {
   display: block;
   margin-bottom: 30px;
   text-transform: uppercase;
   letter-spacing: 0.16em;
}

.product_intro_head h1,
.product_intro_head h2 {
   font-family: 'Canela Text', serif;
   font-size: clamp(40px, 5.4vw, 66px);
   font-weight: 300;
   letter-spacing: -0.04em;
   line-height: 0.98;
   color: var(--lp-ink);
   margin: 0;
}

.product_intro_copy {
   padding-bottom: 6px;
}

.product_lead_area {
   margin: 0;
   max-width: 44ch;
   font-family: 'Geist', sans-serif;
   font-size: 17px;
   font-weight: 300;
   line-height: 1.62;
   color: var(--lp-muted);
}

.product_lead_area b {
   font-weight: 500;
   color: var(--lp-ink);
}

/* ---- filter toolbar ---- */
.product_toolbar {
   position: sticky;
   top: 0;
   z-index: 20;
   margin: 0 0 8px;
   padding: 26px 0 22px;
   background: var(--lp-cream);
}

.product_filter_area {
   margin: 0;
}

.product_filter_grid {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr)) 1.1fr 1.4fr;
   gap: 30px 34px;
   align-items: end;
}

.product_field label {
   display: block;
   margin-bottom: 16px;
   font-family: 'Aeonik Mono', monospace;
   font-size: 12px;
   letter-spacing: 0.14em;
   text-transform: uppercase;
   color: var(--lp-faint);
}

.product_field select {
   width: 100%;
   padding: 0 24px 12px 0;
   border: 0;
   border-bottom: 1px solid var(--lp-line-strong);
   border-radius: 0;
   background-color: transparent;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7' fill='none'%3E%3Cpath d='M1 1L5.5 5.5L10 1' stroke='%232C2927' stroke-width='1'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: right 2px center;
   appearance: none;
   -webkit-appearance: none;
   font-family: 'Geist', sans-serif;
   font-size: 16px;
   font-weight: 300;
   color: var(--lp-ink);
   cursor: pointer;
   transition: border-color 0.4s var(--lp-ease);
}

.product_field select:focus {
   outline: none;
   border-bottom-color: var(--lp-ink);
}

.product_search_area {
   display: flex;
   align-items: center;
   gap: 14px;
   border-bottom: 1px solid var(--lp-line-strong);
   transition: border-color 0.4s var(--lp-ease);
}

.product_search_area:focus-within {
   border-bottom-color: var(--lp-ink);
}

.product_search_area input {
   flex: 1;
   min-width: 0;
   padding: 0 0 12px;
   border: 0;
   background: none;
   font-family: 'Geist', sans-serif;
   font-size: 16px;
   font-weight: 300;
   color: var(--lp-ink);
}

.product_search_area input::placeholder {
   color: var(--lp-faint);
}

.product_search_area input:focus {
   outline: none;
}

.product_search_area button {
   flex-shrink: 0;
   padding: 0 0 12px;
   border: 0;
   background: none;
   color: var(--lp-ink);
   cursor: pointer;
   line-height: 0;
   transition: transform 0.4s var(--lp-ease);
}

.product_search_area button:hover {
   transform: scale(1.12);
}

.product_hidden_label {
   position: absolute;
   width: 1px;
   height: 1px;
   margin: -1px;
   padding: 0;
   overflow: hidden;
   clip: rect(0 0 0 0);
   white-space: nowrap;
   border: 0;
}

/* ---- result line ---- */
.product_result_area {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 20px;
   margin: 0 0 46px;
}

.product_result_area p {
   margin: 0;
   font-family: 'Aeonik Mono', monospace;
   font-size: 12px;
   letter-spacing: 0.14em;
   text-transform: uppercase;
   color: var(--lp-muted);
}

[data-product-clear] {
   display: inline-flex;
   align-items: center;
   gap: 12px;
}

/* ---- grid ---- */
.product_grid_area {
   --bs-gutter-x: 0;
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   column-gap: 34px;
   row-gap: 72px;
   transition: opacity 0.35s var(--lp-ease);
}

.product_grid_area>div {
   width: auto;
   padding: 0;
}

.product_grid_area.is-loading {
   opacity: 0.35;
}

.product_empty_area {
   grid-column: 1 / -1;
   padding: 60px 0;
   font-family: 'Canela Text', serif;
   font-size: 26px;
   font-weight: 300;
   letter-spacing: -0.02em;
   color: var(--lp-muted);
}

/* ---- card ---- */
.product_item_area {
   display: block;
   text-decoration: none;
   opacity: 1;
}

.product_thumb_area {
   position: relative;
   display: block;
   aspect-ratio: 4 / 5;
   overflow: hidden;
   background-color: var(--lp-panel);
}

.product_thumb_area img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform 0.9s var(--lp-ease);
   will-change: transform;
}

.product_item_area:hover .product_thumb_area img {
   transform: scale(1.05);
}

.product_thumb_empty {
   position: absolute;
   inset: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   font-family: 'Aeonik Mono', monospace;
   font-size: 11px;
   letter-spacing: 0.14em;
   text-transform: uppercase;
   color: #B4AEA4;
}

/* corner tag (360) */
.product_thumb_tag {
   position: absolute;
   top: 14px;
   left: 14px;
   padding: 5px 11px;
   background: rgba(20, 18, 16, 0.72);
   -webkit-backdrop-filter: blur(6px);
   backdrop-filter: blur(6px);
   color: #fff;
   font-family: 'Aeonik Mono', monospace;
   font-size: 10px;
   letter-spacing: 0.12em;
   border-radius: 100px;
}

/* hover "view" affordance sliding up from the base of the image */
.product_thumb_view {
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 10px;
   padding: 16px 18px;
   color: #fff;
   font-family: 'Aeonik Mono', monospace;
   font-size: 11px;
   letter-spacing: 0.14em;
   text-transform: uppercase;
   background: linear-gradient(to top, rgba(20, 18, 16, 0.72), rgba(20, 18, 16, 0));
   opacity: 0;
   transform: translateY(8px);
   transition: opacity 0.5s var(--lp-ease), transform 0.5s var(--lp-ease);
}

.product_item_area:hover .product_thumb_view {
   opacity: 1;
   transform: translateY(0);
}

.product_thumb_view svg {
   transition: transform 0.45s var(--lp-ease);
}

.product_item_area:hover .product_thumb_view svg {
   transform: translateX(4px);
}

.product_card_body {
   display: block;
   padding-top: 20px;
}

.product_item_area .default_label {
   display: block;
   font-size: 12px;
   letter-spacing: 0.14em;
   text-transform: uppercase;
   color: var(--lp-faint);
}

.product_title_area {
   display: block;
   margin-top: 9px;
   font-family: 'Canela Text', serif;
   font-size: 25px;
   font-weight: 400;
   letter-spacing: -0.02em;
   line-height: 1.12;
   color: var(--lp-ink);
   transition: color 0.35s var(--lp-ease);
}

.product_item_area:hover .product_title_area {
   color: var(--lp-muted);
}

.product_meta_area {
   display: flex;
   flex-wrap: wrap;
   gap: 7px;
   margin-top: 15px;
}

.product_meta_pill {
   padding: 5px 12px;
   border: 1px solid var(--lp-line);
   border-radius: 100px;
   font-family: 'Aeonik Mono', monospace;
   font-size: 10.5px;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   color: var(--lp-muted);
}

.product_meta_pill.is_finish {
   border-color: var(--lp-line-strong);
   color: var(--lp-ink);
}

.product_meta_pill.is_more {
   border-style: dashed;
   color: var(--lp-faint);
}

/* scroll reveal (progressive; visible by default if JS/animation is off) */
.reveal-init .product_item_area {
   opacity: 0;
   transform: translateY(26px);
}

.reveal-init .product_item_area.is-revealed {
   opacity: 1;
   transform: translateY(0);
   transition: opacity 0.8s var(--lp-ease), transform 0.8s var(--lp-ease);
}

/* ============================================================== detail page */
.product_detail_section {
   position: relative;
   overflow: hidden;
}

.product_back_link {
   display: inline-flex;
   align-items: center;
   gap: 12px;
   margin-bottom: 46px;
   font-family: 'Aeonik Mono', monospace;
   font-size: 12px;
   letter-spacing: 0.14em;
   text-transform: uppercase;
   color: var(--lp-muted);
   text-decoration: none;
   transition: color 0.35s var(--lp-ease), gap 0.35s var(--lp-ease);
}

.product_back_link svg {
   transition: transform 0.4s var(--lp-ease);
}

.product_back_link:hover {
   color: var(--lp-ink);
   gap: 16px;
}

.product_back_link:hover svg {
   transform: translateX(-4px);
}

.product_detail_grid {
   display: grid;
   grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
   gap: 70px;
   align-items: start;
}

/* ---- gallery ---- */
.product_gallery_col {
   position: relative;
}

.product_gallery {
   position: relative;
   overflow: hidden;
   background: var(--lp-panel);
}

.product_gallery_frame {
   display: none;
   position: relative;
   width: 100%;
   aspect-ratio: 4 / 5;
   overflow: hidden;
   cursor: zoom-in;
}

.product_gallery_frame.is-active {
   display: block;
   animation: lp-fade 0.6s var(--lp-ease);
}

@keyframes lp-fade {
   from {
      opacity: 0;
   }

   to {
      opacity: 1;
   }
}

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

.product_gallery_zoom {
   position: absolute;
   bottom: 18px;
   right: 18px;
   display: inline-flex;
   align-items: center;
   gap: 9px;
   padding: 9px 15px;
   background: rgba(20, 18, 16, 0.72);
   -webkit-backdrop-filter: blur(6px);
   backdrop-filter: blur(6px);
   color: #fff;
   font-family: 'Aeonik Mono', monospace;
   font-size: 10.5px;
   letter-spacing: 0.12em;
   text-transform: uppercase;
   border-radius: 100px;
   opacity: 0;
   transform: translateY(6px);
   transition: opacity 0.45s var(--lp-ease), transform 0.45s var(--lp-ease);
}

.product_gallery_frame:hover .product_gallery_zoom {
   opacity: 1;
   transform: translateY(0);
}

.product_thumbs {
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
   margin-top: 14px;
}

.product_thumb {
   width: 84px;
   height: 84px;
   padding: 0;
   border: 0;
   position: relative;
   overflow: hidden;
   background: var(--lp-panel);
   cursor: pointer;
   opacity: 0.55;
   transition: opacity 0.4s var(--lp-ease);
}

.product_thumb::after {
   content: '';
   position: absolute;
   inset: 0;
   border: 1px solid transparent;
   transition: border-color 0.4s var(--lp-ease);
}

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

.product_thumb:hover {
   opacity: 1;
}

.product_thumb.is-active {
   opacity: 1;
}

.product_thumb.is-active::after {
   border-color: var(--lp-ink);
}

.product_extra_media {
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
   margin-top: 22px;
}

/* ---- info column ---- */
.product_detail_info {
   position: relative;
}

@media (min-width: 992px) {
   .product_detail_info {
      position: sticky;
      top: 60px;
   }
}

.product_detail_info>.default_label {
   display: block;
   text-transform: uppercase;
   color: var(--lp-faint);
}

.product_detail_title {
   margin: 14px 0 0;
   font-family: 'Canela Text', serif;
   font-size: clamp(34px, 4.4vw, 52px);
   font-weight: 300;
   letter-spacing: -0.04em;
   line-height: 1.02;
   color: var(--lp-ink);
}

.product_detail_subtitle {
   margin-top: 18px;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 10px 16px;
   font-family: 'Aeonik Mono', monospace;
   font-size: 12px;
   letter-spacing: 0.1em;
   text-transform: uppercase;
   color: var(--lp-muted);
}

.product_detail_subtitle .product_code {
   padding-left: 16px;
   border-left: 1px solid var(--lp-line-strong);
   color: var(--lp-faint);
}

.product_detail_desc {
   margin-top: 26px;
   max-width: 52ch;
   font-family: 'Geist', sans-serif;
   font-size: 16px;
   font-weight: 300;
   line-height: 1.72;
   color: var(--lp-ink-soft);
}

/* variant switcher */
.product_variants_area {
   margin-top: 34px;
}

.product_variants_area .default_label {
   display: block;
   margin-bottom: 15px;
   text-transform: uppercase;
   color: var(--lp-faint);
}

.product_variants {
   display: flex;
   flex-wrap: wrap;
   gap: 9px;
}

.product_variant_chip {
   padding: 10px 16px;
   border: 1px solid var(--lp-line-strong);
   border-radius: 100px;
   font-family: 'Aeonik Mono', monospace;
   font-size: 11px;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   color: var(--lp-ink-soft);
   text-decoration: none;
   transition: border-color 0.3s var(--lp-ease), background-color 0.3s var(--lp-ease), color 0.3s var(--lp-ease);
}

.product_variant_chip:hover {
   border-color: var(--lp-ink);
   color: var(--lp-ink);
}

.product_variant_chip.is-active {
   background: var(--lp-ink);
   border-color: var(--lp-ink);
   color: var(--lp-cream);
}

/* colour palette */
.product_palette_area {
   margin-top: 36px;
}

.product_palette_area .default_label {
   display: block;
   margin-bottom: 15px;
   text-transform: uppercase;
   color: var(--lp-faint);
}

.product_palette {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
}

.product_swatch {
   position: relative;
   width: 38px;
   height: 38px;
   border-radius: 50%;
   border: 1px solid rgba(44, 41, 39, 0.1);
   cursor: default;
}

/* spec list as a hairline definition grid */
.product_spec_list {
   margin-top: 40px;
   border-top: 1px solid var(--lp-line);
}

.product_spec_row {
   display: grid;
   grid-template-columns: minmax(120px, 0.9fr) 1.4fr;
   gap: 20px;
   padding: 15px 0;
   border-bottom: 1px solid var(--lp-line);
}

/* the section below the spec list carries its own top divider, so the last row
   should not add a second line under it */
.product_spec_row:last-child {
   border-bottom: 0;
}

.product_spec_row dt {
   margin: 0;
   font-family: 'Aeonik Mono', monospace;
   font-size: 11px;
   letter-spacing: 0.1em;
   text-transform: uppercase;
   color: var(--lp-faint);
   align-self: center;
}

.product_spec_row dd {
   margin: 0;
   font-family: 'Geist', sans-serif;
   font-size: 15.5px;
   font-weight: 400;
   color: var(--lp-ink);
}

.product_notes_area {
   margin-top: 30px;
}

.product_notes_area p {
   margin: 0 0 12px;
   font-family: 'Geist', sans-serif;
   font-size: 14px;
   font-weight: 300;
   line-height: 1.65;
   color: var(--lp-ink-soft);
}

.product_notes_area .default_label {
   display: inline-block;
   margin-right: 10px;
   text-transform: uppercase;
   color: var(--lp-faint);
}

/* qr + actions footer of the info column */
.product_action_area {
   display: flex;
   flex-direction: column;
   gap: 22px;
   margin-top: 40px;
   padding-top: 34px;
   border-top: 1px solid var(--lp-line);
}

/* one aligned row: WhatsApp is the primary and grows to fill, the rest sit at
   a fixed size beside it and wrap underneath on narrow columns */
.product_action_buttons {
   display: flex;
   align-items: stretch;
   gap: 10px;
   flex-wrap: wrap;
}

.product_action_buttons .default_button {
   min-height: 52px;
   justify-content: center;
   white-space: nowrap;
}

/* WhatsApp is the primary call, so it takes the full first row; the PDF button
   grows to fill the second row beside the two icon buttons */
.product_action_buttons .product_wa_btn {
   flex: 1 1 100%;
}

.product_action_buttons .default_button.is_light {
   flex: 1 1 auto;
}

/* light secondary buttons sit on a cream ground almost the same colour, so give
   them a border to read as buttons (Download PDF, Export PDF, mobile Enquire) */
.product_action_buttons .default_button.is_light,
.shortlist_pdf.default_button,
.product_mobile_cta .default_button.is_light {
   border: 1px solid var(--lp-line-strong);
   transition: border-color 0.4s var(--lp-ease), background-color 0.4s var(--lp-ease);
}

.product_action_buttons .default_button.is_light:hover,
.shortlist_pdf.default_button:hover,
.product_mobile_cta .default_button.is_light:hover {
   border-color: var(--lp-ink);
}

.product_action_buttons .product_icon_btn {
   width: 52px;
   height: 52px;
   flex: 0 0 auto;
}

/* QR sits below the actions as a quiet aside */
.product_qr_area {
   display: flex;
   align-items: center;
   gap: 14px;
}

.product_qr_area img {
   width: 58px;
   height: 58px;
   background: #fff;
   padding: 6px;
   border: 1px solid var(--lp-line);
   border-radius: 4px;
   flex-shrink: 0;
}

.product_qr_area .default_label {
   max-width: 22ch;
   text-transform: uppercase;
   color: var(--lp-faint);
   line-height: 1.5;
}

/* closing cta band reused from the homepage language */
.product_cta_section {
   background: #fff;
}

.product_cta_box {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 40px;
   flex-wrap: wrap;
}

.product_cta_box h2 {
   font-family: 'Canela Text', serif;
   font-size: clamp(30px, 3.6vw, 46px);
   font-weight: 300;
   letter-spacing: -0.04em;
   line-height: 1.05;
   color: var(--lp-ink);
   margin: 14px 0 0;
}

.product_cta_box .default_label {
   text-transform: uppercase;
   color: var(--lp-faint);
}

.product_cta_buttons {
   display: flex;
   gap: 14px;
   flex-wrap: wrap;
}

/* ------------------------------------------------------------- responsive */
@media (max-width: 1199px) {
   .product_grid_area {
      grid-template-columns: repeat(3, 1fr);
      column-gap: 28px;
   }

   .product_filter_grid {
      grid-template-columns: repeat(3, 1fr);
      gap: 26px 30px;
   }

   .product_detail_grid {
      gap: 50px;
   }
}

@media (max-width: 991px) {
   .product_intro_area {
      grid-template-columns: 1fr;
      gap: 26px;
      align-items: start;
      padding-bottom: 44px;
   }

   .product_detail_grid {
      grid-template-columns: 1fr;
      gap: 40px;
   }

   .product_detail_info {
      position: static;
   }
}

@media (max-width: 767px) {
   .product_grid_area {
      grid-template-columns: repeat(2, 1fr);
      column-gap: 18px;
      row-gap: 48px;
   }

   .product_filter_grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 24px;
   }

   .product_toolbar {
      position: static;
   }

   .product_result_area {
      margin-bottom: 34px;
   }

   .product_action_area .default_button {
      margin-left: 0;
   }
}

@media (max-width: 479px) {
   .product_grid_area {
      /* grid-template-columns: 1fr 1fr; */
      grid-template-columns: 1fr;
      column-gap: 14px;
   }

   .product_title_area {
      font-size: 21px;
   }
}

/* ---------------------------------------------------------------- hero band */
.product_hero {
   position: relative;
   min-height: 76vh;
   display: flex;
   align-items: flex-end;
   padding: 160px 0 64px;
   overflow: hidden;
   background: var(--lp-panel);
   isolation: isolate;
}

.product_hero::before {
   content: '';
   position: absolute;
   inset: 0;
   z-index: -2;
   background-image: var(--hero);
   background-size: cover;
   background-position: center;
   /* no scale transform — a scaled background resamples and softens the image */
   image-rendering: auto;
}

/* legibility wash — a bottom lift plus a soft left vignette, so the headline
   reads over a bright image (a white marble floor) as well as a dark one, while
   the tile itself still shows through */
.product_hero::after {
   content: '';
   position: absolute;
   inset: 0;
   z-index: -1;
   background:
      linear-gradient(to top, rgba(18, 16, 15, 0.78) 0%, rgba(18, 16, 15, 0.34) 40%, rgba(18, 16, 15, 0.06) 70%, rgba(18, 16, 15, 0.14) 100%),
      linear-gradient(to right, rgba(18, 16, 15, 0.55) 0%, rgba(18, 16, 15, 0.12) 42%, rgba(18, 16, 15, 0) 68%);
}

.product_hero_inner {
   position: relative;
   width: 100%;
}

.product_hero .default_label {
   display: block;
   color: rgba(255, 255, 255, 0.72);
   text-transform: uppercase;
}

/* the back link is its own line above the category label, not inline with it */
.product_back_link.is_on_hero {
   display: flex;
   width: -moz-max-content;
   width: max-content;
}

.product_hero h1 {
   margin: 20px 0 0;
   font-family: 'Canela Text', serif;
   font-size: clamp(44px, 6.4vw, 88px);
   font-weight: 300;
   letter-spacing: -0.045em;
   line-height: 0.96;
   color: #fff;
}

.product_hero_lead {
   margin: 22px 0 0;
   max-width: 40ch;
   font-family: 'Geist', sans-serif;
   font-size: 17px;
   font-weight: 300;
   line-height: 1.6;
   color: rgba(255, 255, 255, 0.82);
}

.product_hero.is_detail .product_hero_lead {
   font-family: 'Aeonik Mono', monospace;
   font-size: 13px;
   letter-spacing: 0.12em;
   text-transform: uppercase;
   color: rgba(255, 255, 255, 0.78);
}

.product_hero_scroll {
   position: absolute;
   left: 50%;
   bottom: 30px;
   transform: translateX(-50%);
   display: inline-flex;
   flex-direction: column;
   align-items: center;
   gap: 10px;
   color: rgba(255, 255, 255, 0.7);
   font-family: 'Aeonik Mono', monospace;
   font-size: 10px;
   letter-spacing: 0.18em;
   text-transform: uppercase;
}

.product_hero_scroll svg {
   animation: lp-bob 2.4s var(--lp-ease) infinite;
}

@keyframes lp-bob {

   0%,
   100% {
      transform: translateY(0);
   }

   50% {
      transform: translateY(6px);
   }
}

/* back link sitting on the hero */
.product_back_link.is_on_hero {
   color: rgba(255, 255, 255, 0.8);
   margin-bottom: 28px;
}

.product_back_link.is_on_hero:hover {
   color: #fff;
}

/* with a hero on top, the detail section no longer needs its big top offset */
.product_hero+.product_detail_section {
   padding-top: 90px;
}

/* ------------------------------------------------------------- filter chips */
.product_chips_area {
   display: flex;
   flex-wrap: wrap;
   gap: 9px;
   margin: 30px 0 0;
}

.product_chip {
   display: inline-flex;
   align-items: center;
   gap: 9px;
   padding: 8px 13px;
   border: 1px solid var(--lp-line-strong);
   border-radius: 100px;
   background: transparent;
   font-family: 'Aeonik Mono', monospace;
   font-size: 11px;
   letter-spacing: 0.06em;
   text-transform: uppercase;
   color: var(--lp-ink);
   cursor: pointer;
   transition: border-color 0.3s var(--lp-ease), background-color 0.3s var(--lp-ease);
}

.product_chip:hover {
   border-color: var(--lp-ink);
   background: rgba(44, 41, 39, 0.04);
}

.product_chip_key {
   color: var(--lp-faint);
}

.product_chip svg {
   color: var(--lp-muted);
}

.product_chip:hover svg {
   color: var(--lp-ink);
}

/* ---------------------------------------------------------------- load more */
.product_more_area {
   display: flex;
   justify-content: center;
   margin-top: 72px;
}

.product_more_area .default_button.is-loading {
   opacity: 0.6;
   pointer-events: none;
}

.product_more_area .default_button.is-loading svg {
   animation: lp-spin 0.8s linear infinite;
}

@keyframes lp-spin {
   to {
      transform: rotate(360deg);
   }
}

/* ------------------------------------------------- detail info head tweaks */
.product_detail_head {
   margin-bottom: 30px;
}

.product_detail_head .default_label {
   display: block;
   text-transform: uppercase;
   color: var(--lp-faint);
}

.product_detail_head .product_detail_title {
   margin: 12px 0 0;
   font-family: 'Canela Text', serif;
   font-size: clamp(28px, 3.2vw, 40px);
   font-weight: 300;
   letter-spacing: -0.03em;
   line-height: 1.04;
   color: var(--lp-ink);
}

.product_detail_head .product_detail_subtitle {
   margin-top: 14px;
   display: flex;
   gap: 8px 16px;
   flex-wrap: wrap;
   font-family: 'Aeonik Mono', monospace;
   font-size: 12px;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   color: var(--lp-muted);
}

.product_detail_head .product_code {
   color: var(--lp-ink);
}

/* ----------------------------------------------------------- related grid */
.product_related_section {
   background: #fff;
}

.product_related_head {
   display: flex;
   align-items: baseline;
   justify-content: space-between;
   gap: 20px 40px;
   flex-wrap: wrap;
   margin-bottom: 56px;
   padding-bottom: 30px;
   border-bottom: 1px solid var(--lp-line);
}

.product_related_head h2 {
   flex: 1 1 auto;
   margin: 12px 0 0;
   font-family: 'Canela Text', serif;
   font-size: clamp(28px, 3.4vw, 44px);
   font-weight: 300;
   letter-spacing: -0.04em;
   color: var(--lp-ink);
}

.product_related_head .default_label {
   flex-basis: 100%;
   text-transform: uppercase;
   color: var(--lp-faint);
}

.product_related_all {
   display: inline-flex;
   align-items: center;
   gap: 12px;
   font-family: 'Aeonik Mono', monospace;
   font-size: 12px;
   letter-spacing: 0.12em;
   text-transform: uppercase;
   color: var(--lp-ink);
   text-decoration: none;
   transition: gap 0.35s var(--lp-ease);
}

.product_related_all:hover {
   gap: 18px;
}

.product_related_grid {
   row-gap: 40px;
}

@media (max-width: 767px) {
   .product_hero {
      min-height: 62vh;
      padding-top: 130px;
   }

   .product_hero_scroll {
      display: none;
   }
}

/* ------------------------------------------------------------- pagination */
.product_pager_area {
   margin-top: 72px;
}

.product_pager {
   display: flex;
   align-items: center;
   justify-content: center;
   flex-wrap: wrap;
   gap: 8px;
}

.product_pager_pages {
   display: flex;
   align-items: center;
   gap: 4px;
   margin: 0 10px;
}

.product_pager_num,
.product_pager_arrow {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   min-width: 42px;
   height: 42px;
   padding: 0 12px;
   border: 1px solid transparent;
   border-radius: 100px;
   font-family: 'Aeonik Mono', monospace;
   font-size: 12px;
   letter-spacing: 0.06em;
   text-transform: uppercase;
   color: var(--lp-muted);
   text-decoration: none;
   cursor: pointer;
   transition: color 0.3s var(--lp-ease), border-color 0.3s var(--lp-ease), background-color 0.3s var(--lp-ease);
}

.product_pager_num:hover {
   color: var(--lp-ink);
   border-color: var(--lp-line-strong);
}

.product_pager_num.is-active {
   background: var(--lp-ink);
   border-color: var(--lp-ink);
   color: var(--lp-cream);
   cursor: default;
}

.product_pager_arrow {
   color: var(--lp-ink);
}

.product_pager_arrow:hover {
   border-color: var(--lp-line-strong);
}

.product_pager_arrow svg {
   transition: transform 0.35s var(--lp-ease);
}

.product_pager_arrow[rel="next"]:hover svg {
   transform: translateX(4px);
}

.product_pager_arrow[rel="prev"]:hover svg {
   transform: translateX(-4px);
}

.product_pager_arrow.is-disabled {
   color: var(--lp-line-strong);
   cursor: not-allowed;
   pointer-events: none;
}

.product_pager_gap {
   min-width: 24px;
   text-align: center;
   font-family: 'Aeonik Mono', monospace;
   font-size: 12px;
   color: var(--lp-faint);
}

@media (max-width: 767px) {
   .product_pager_area {
      margin-top: 50px;
   }

   .product_pager_arrow span {
      display: none;
   }

   /* arrows only on small screens */
   .product_pager_arrow {
      min-width: 42px;
      padding: 0;
   }
}

/* --------------------------------------------------------------- 360° view */
.product_360_btn {
   align-items: center;
   gap: 12px;
}

.product_360_btn svg {
   transition: transform 0.5s var(--lp-ease);
}

.product_360_btn:hover svg {
   transform: rotate(18deg);
}

/* a small 360 marker on cards / gallery already uses .product_thumb_tag */

.product_360_modal {
   position: fixed;
   inset: 0;
   z-index: 3000;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 28px;
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.35s var(--lp-ease), visibility 0.35s var(--lp-ease);
}

.product_360_modal.is-open {
   opacity: 1;
   visibility: visible;
}

.product_360_backdrop {
   position: absolute;
   inset: 0;
   background: rgba(14, 12, 11, 0.86);
   -webkit-backdrop-filter: blur(6px);
   backdrop-filter: blur(6px);
}

.product_360_dialog {
   position: relative;
   width: min(1180px, 100%);
   height: min(78vh, 820px);
   display: flex;
   flex-direction: column;
   background: #14120F;
   border-radius: 4px;
   overflow: hidden;
   box-shadow: 0 40px 120px rgba(0, 0, 0, 0.5);
   transform: translateY(14px) scale(0.99);
   transition: transform 0.45s var(--lp-ease);
}

.product_360_modal.is-open .product_360_dialog {
   transform: none;
}

.product_360_bar {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 20px;
   padding: 16px 20px;
   border-bottom: 1px solid rgba(255, 255, 255, 0.08);
   z-index: 2;
}

.product_360_title {
   display: flex;
   align-items: baseline;
   gap: 12px;
   font-family: 'Canela Text', serif;
   font-size: 20px;
   font-weight: 300;
   letter-spacing: -0.02em;
   color: #fff;
}

.product_360_title .default_label {
   color: rgba(255, 255, 255, 0.5);
}

.product_360_close {
   flex-shrink: 0;
   width: 40px;
   height: 40px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border: 1px solid rgba(255, 255, 255, 0.2);
   border-radius: 50%;
   background: transparent;
   color: #fff;
   cursor: pointer;
   transition: background-color 0.3s var(--lp-ease), border-color 0.3s var(--lp-ease);
}

.product_360_close:hover {
   background: rgba(255, 255, 255, 0.12);
   border-color: rgba(255, 255, 255, 0.4);
}

.product_360_stage {
   position: relative;
   flex: 1;
   min-height: 0;
   background: #000;
}

/* pannellum fills its container */
.product_360_stage .pnlm-container {
   background: #000 !important;
}

.product_360_hint {
   position: absolute;
   left: 50%;
   bottom: 18px;
   transform: translateX(-50%);
   padding: 8px 16px;
   background: rgba(20, 18, 15, 0.7);
   -webkit-backdrop-filter: blur(6px);
   backdrop-filter: blur(6px);
   border-radius: 100px;
   font-family: 'Aeonik Mono', monospace;
   font-size: 11px;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   color: rgba(255, 255, 255, 0.8);
   pointer-events: none;
   z-index: 2;
   animation: lp-fade 0.6s var(--lp-ease) 0.4s both;
}

body.is-360-open {
   overflow: hidden;
}

@media (max-width: 767px) {
   .product_360_modal {
      padding: 0;
   }

   .product_360_dialog {
      width: 100%;
      height: 100%;
      border-radius: 0;
   }

   .product_360_title {
      font-size: 16px;
   }
}

/* ------------------------------------------------------- product article */
.product_article_section {
   border-top: 1px solid var(--lp-line);
}

.product_article {
   display: grid;
   grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
   gap: 40px 80px;
   align-items: start;
}

.product_article_head {
   position: relative;
}

@media (min-width: 992px) {
   .product_article_head {
      position: sticky;
      top: 60px;
   }
}

.product_article_head .default_label {
   display: block;
   margin-bottom: 18px;
   text-transform: uppercase;
   color: var(--lp-faint);
}

.product_article_head h2 {
   font-family: 'Canela Text', serif;
   font-size: clamp(28px, 3vw, 40px);
   font-weight: 300;
   letter-spacing: -0.03em;
   line-height: 1.04;
   color: var(--lp-ink);
   margin: 0;
}

.product_article_body {
   max-width: 68ch;
}

.product_article_lead {
   font-family: 'Geist', sans-serif;
   font-size: clamp(18px, 2vw, 21px);
   font-weight: 300;
   line-height: 1.55;
   color: var(--lp-ink);
   margin: 0 0 10px;
}

.product_article_h {
   font-family: 'Canela Text', serif;
   font-size: 26px;
   font-weight: 400;
   letter-spacing: -0.02em;
   line-height: 1.1;
   color: var(--lp-ink);
   margin: 46px 0 16px;
}

.product_article_body>p {
   font-family: 'Geist', sans-serif;
   font-size: 16.5px;
   font-weight: 300;
   line-height: 1.75;
   color: var(--lp-ink-soft);
   margin: 0 0 18px;
}

/* FAQ */
.product_faq {
   margin: 22px 0 0;
   border-top: 1px solid var(--lp-line);
}

.product_faq_item {
   padding: 22px 0;
   border-bottom: 1px solid var(--lp-line);
}

.product_faq_item dt {
   font-family: 'Geist', sans-serif;
   font-size: 17px;
   font-weight: 500;
   color: var(--lp-ink);
   margin-bottom: 10px;
}

.product_faq_item dd {
   margin: 0;
   font-family: 'Geist', sans-serif;
   font-size: 16px;
   font-weight: 300;
   line-height: 1.7;
   color: var(--lp-ink-soft);
}

@media (max-width: 991px) {
   .product_article {
      grid-template-columns: 1fr;
      gap: 30px;
   }

   .product_article_body {
      max-width: none;
   }

   .product_article_h {
      margin-top: 38px;
   }
}

/* ============================================================================
   Collection & detail features: shortlist, quick view, WhatsApp, calculator
   ========================================================================== */

/* shared small icon button */
.product_icon_btn {
   width: 40px;
   height: 40px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 0;
   border: 1px solid var(--lp-line-strong);
   border-radius: 50%;
   background: rgba(243, 240, 236, 0.92);
   -webkit-backdrop-filter: blur(6px);
   backdrop-filter: blur(6px);
   color: var(--lp-ink);
   cursor: pointer;
   transition: border-color 0.3s var(--lp-ease), background-color 0.3s var(--lp-ease), color 0.3s var(--lp-ease), transform 0.3s var(--lp-ease);
   position: relative;
}

.product_icon_btn:hover {
   border-color: var(--lp-ink);
   background: #fff;
}

.product_save_heart {
   transition: transform 0.3s var(--lp-ease);
}

.product_save_btn.is-saved {
   color: #C0392B;
   border-color: #C0392B;
}

.product_save_btn.is-saved .product_save_heart {
   fill: #C0392B;
   stroke: #C0392B;
}

.product_save_btn.is-pop .product_save_heart {
   transform: scale(1.3);
}

/* ---- card actions overlay ---- */
.product_card {
   position: relative;
}

.product_card_actions {
   position: absolute;
   top: 14px;
   right: 14px;
   z-index: 3;
   display: flex;
   flex-direction: column;
   gap: 8px;
   opacity: 0;
   transform: translateY(-4px);
   transition: opacity 0.35s var(--lp-ease), transform 0.35s var(--lp-ease);
}

.product_card:hover .product_card_actions,
.product_card_actions:focus-within {
   opacity: 1;
   transform: none;
}

/* a saved heart stays visible even when not hovering */
.product_card_actions:has(.is-saved) {
   opacity: 1;
   transform: none;
}

@media (hover: none) {
   .product_card_actions {
      opacity: 1;
      transform: none;
   }

   /* touch: always show */
}

/* ---- WhatsApp button tint ---- */
.default_button.product_wa_btn {
   background-color: #1FA855;
   color: #fff;
}

.default_button.product_wa_btn::before {
   background-color: rgba(255, 255, 255, 0.16);
}

/* secondary WhatsApp button: solid dark WhatsApp green with a white glyph */
.default_button.is_light.product_wa_btn {
   background-color: #0B6B39;
   color: #fff;
}

.default_button.is_light.product_wa_btn::before {
   background-color: rgba(255, 255, 255, 0.16);
}

.default_button.is_light.product_wa_btn svg {
   color: #fff;
}

.product_share_flash {
   position: absolute;
   bottom: calc(100% + 8px);
   left: 50%;
   transform: translateX(-50%);
   white-space: nowrap;
   padding: 5px 10px;
   background: var(--lp-ink);
   color: var(--lp-cream);
   font-family: 'Aeonik Mono', monospace;
   font-size: 10px;
   letter-spacing: 0.06em;
   text-transform: uppercase;
   border-radius: 4px;
}

/* ---- area calculator ---- */
.product_calc {
   margin-top: 34px;
   padding-top: 30px;
   border-top: 1px solid var(--lp-line);
}

.product_calc>.default_label {
   display: block;
   margin-bottom: 16px;
   text-transform: uppercase;
   color: var(--lp-faint);
}

.product_calc_row {
   display: flex;
   align-items: flex-end;
   gap: 14px;
   flex-wrap: wrap;
}

.product_calc_row label {
   display: flex;
   flex-direction: column;
   gap: 8px;
   font-family: 'Aeonik Mono', monospace;
   font-size: 11px;
   letter-spacing: 0.1em;
   text-transform: uppercase;
   color: var(--lp-faint);
}

.product_calc_row input {
   width: 96px;
   padding: 0 0 10px;
   border: 0;
   border-bottom: 1px solid var(--lp-line-strong);
   background: none;
   font-family: 'Geist', sans-serif;
   font-size: 20px;
   font-weight: 300;
   color: var(--lp-ink);
}

.product_calc_row input:focus {
   outline: none;
   border-bottom-color: var(--lp-ink);
}

.product_calc_x {
   padding-bottom: 8px;
   color: var(--lp-faint);
}

.product_calc_unit {
   display: inline-flex;
   border: 1px solid var(--lp-line-strong);
   border-radius: 100px;
   overflow: hidden;
   margin-bottom: 2px;
}

.product_calc_unit button {
   padding: 7px 14px;
   border: 0;
   background: transparent;
   cursor: pointer;
   font-family: 'Aeonik Mono', monospace;
   font-size: 11px;
   letter-spacing: 0.06em;
   text-transform: uppercase;
   color: var(--lp-muted);
}

.product_calc_unit button.is-active {
   background: var(--lp-ink);
   color: var(--lp-cream);
}

.product_calc_out {
   margin: 18px 0 0;
   font-family: 'Geist', sans-serif;
   font-size: 15px;
   font-weight: 300;
   line-height: 1.6;
   color: var(--lp-ink-soft);
}

.product_calc_out span[data-calc-tiles],
.product_calc_out span[data-calc-order] {
   font-weight: 500;
   color: var(--lp-ink);
}

/* ---- shortlist floating button ---- */
.shortlist_fab {
   position: fixed;
   right: 22px;
   bottom: 92px;
   z-index: 2400;
   width: 56px;
   height: 56px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border: 0;
   border-radius: 50%;
   background: var(--lp-ink);
   color: var(--lp-cream);
   cursor: pointer;
   box-shadow: 0 12px 34px rgba(20, 18, 15, 0.28);
   transition: transform 0.3s var(--lp-ease), opacity 0.3s var(--lp-ease);
}

.shortlist_fab:hover {
   transform: translateY(-2px);
}

.shortlist_fab.is-empty {
   opacity: 0;
   pointer-events: none;
   transform: scale(0.8);
}

.shortlist_fab_count {
   position: absolute;
   top: -3px;
   right: -3px;
   min-width: 22px;
   height: 22px;
   padding: 0 5px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   background: #C0392B;
   color: #fff;
   border-radius: 100px;
   font-family: 'Aeonik Mono', monospace;
   font-size: 11px;
   font-weight: 500;
   border: 2px solid var(--lp-cream);
}

/* ---- shortlist panel ---- */
.shortlist_panel {
   position: fixed;
   inset: 0;
   z-index: 3200;
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.35s var(--lp-ease), visibility 0.35s var(--lp-ease);
}

.shortlist_panel.is-open {
   opacity: 1;
   visibility: visible;
}

.shortlist_backdrop {
   position: absolute;
   inset: 0;
   background: rgba(14, 12, 11, 0.55);
   -webkit-backdrop-filter: blur(4px);
   backdrop-filter: blur(4px);
}

.shortlist_dialog {
   position: absolute;
   top: 0;
   right: 0;
   height: 100%;
   width: min(420px, 100%);
   display: flex;
   flex-direction: column;
   background: var(--lp-cream);
   box-shadow: -20px 0 60px rgba(0, 0, 0, 0.25);
   transform: translateX(100%);
   transition: transform 0.4s var(--lp-ease);
}

.shortlist_panel.is-open .shortlist_dialog {
   transform: none;
}

.shortlist_head {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 24px 26px;
   border-bottom: 1px solid var(--lp-line);
}

.shortlist_title {
   display: flex;
   align-items: baseline;
   gap: 12px;
   font-family: 'Canela Text', serif;
   font-size: 22px;
   font-weight: 300;
   color: var(--lp-ink);
}

.shortlist_title .default_label {
   color: var(--lp-faint);
}

.shortlist_close {
   width: 38px;
   height: 38px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border: 1px solid var(--lp-line-strong);
   border-radius: 50%;
   background: transparent;
   color: var(--lp-ink);
   cursor: pointer;
}

.shortlist_close:hover {
   border-color: var(--lp-ink);
}

.shortlist_body {
   flex: 1;
   overflow-y: auto;
   padding: 14px 26px;
}

.shortlist_empty {
   padding: 40px 0;
   font-family: 'Geist', sans-serif;
   font-weight: 300;
   color: var(--lp-muted);
}

.shortlist_item {
   display: flex;
   align-items: center;
   gap: 16px;
   padding: 14px 0;
   border-bottom: 1px solid var(--lp-line);
}

.shortlist_thumb {
   width: 64px;
   height: 64px;
   flex-shrink: 0;
   overflow: hidden;
   background: var(--lp-panel);
   border-radius: 2px;
}

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

.shortlist_meta {
   flex: 1;
   min-width: 0;
}

.shortlist_name {
   display: block;
   font-family: 'Geist', sans-serif;
   font-size: 16px;
   font-weight: 500;
   color: var(--lp-ink);
   text-decoration: none;
}

.shortlist_name:hover {
   opacity: 0.6;
}

.shortlist_sub {
   font-family: 'Aeonik Mono', monospace;
   font-size: 11px;
   letter-spacing: 0.04em;
   text-transform: uppercase;
   color: var(--lp-faint);
}

.shortlist_remove {
   width: 30px;
   height: 30px;
   flex-shrink: 0;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border: 0;
   background: transparent;
   color: var(--lp-faint);
   cursor: pointer;
   border-radius: 50%;
}

.shortlist_remove:hover {
   color: var(--lp-ink);
   background: rgba(44, 41, 39, 0.06);
}

.shortlist_foot {
   padding: 20px 26px;
   border-top: 1px solid var(--lp-line);
   display: flex;
   flex-direction: column;
   gap: 12px;
}

.shortlist_foot .default_button {
   justify-content: center;
}

.shortlist_clear {
   border: 0;
   background: none;
   cursor: pointer;
   font-family: 'Aeonik Mono', monospace;
   font-size: 11px;
   letter-spacing: 0.1em;
   text-transform: uppercase;
   color: var(--lp-faint);
}

.shortlist_clear:hover {
   color: var(--lp-ink);
}

body.is-sl-open,
body.is-qv-open {
   overflow: hidden;
}

/* ---- quick view modal ---- */
.quickview_modal {
   position: fixed;
   inset: 0;
   z-index: 3100;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 28px;
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.3s var(--lp-ease), visibility 0.3s var(--lp-ease);
}

.quickview_modal.is-open {
   opacity: 1;
   visibility: visible;
}

.quickview_backdrop {
   position: absolute;
   inset: 0;
   background: rgba(14, 12, 11, 0.6);
   -webkit-backdrop-filter: blur(5px);
   backdrop-filter: blur(5px);
}

.quickview_dialog {
   position: relative;
   width: min(860px, 100%);
   max-height: 88vh;
   overflow: hidden;
   background: var(--lp-cream);
   border-radius: 4px;
   box-shadow: 0 40px 120px rgba(0, 0, 0, 0.4);
   transform: translateY(14px) scale(0.99);
   transition: transform 0.4s var(--lp-ease);
}

.quickview_modal.is-open .quickview_dialog {
   transform: none;
}

.quickview_close {
   position: absolute;
   top: 14px;
   right: 14px;
   z-index: 4;
   width: 40px;
   height: 40px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border: 0;
   border-radius: 50%;
   background: rgba(243, 240, 236, 0.9);
   color: var(--lp-ink);
   cursor: pointer;
}

.quickview_close:hover {
   background: #fff;
}

.quickview_loading,
.quickview_empty {
   padding: 80px;
   text-align: center;
   font-family: 'Aeonik Mono', monospace;
   font-size: 12px;
   letter-spacing: 0.1em;
   text-transform: uppercase;
   color: var(--lp-faint);
}

.quickview_card {
   display: grid;
   grid-template-columns: 1fr 1fr;
}

.quickview_media {
   position: relative;
   display: block;
   aspect-ratio: 1/1;
   background: var(--lp-panel);
   overflow: hidden;
}

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

.quickview_info {
   padding: 40px 40px 36px;
   display: flex;
   flex-direction: column;
   overflow-y: auto;
}

.quickview_info .default_label {
   text-transform: uppercase;
   color: var(--lp-faint);
}

.quickview_name {
   margin: 12px 0 0;
   font-family: 'Canela Text', serif;
   font-size: 30px;
   font-weight: 300;
   letter-spacing: -0.03em;
   color: var(--lp-ink);
}

.quickview_code {
   margin-top: 8px;
   font-family: 'Aeonik Mono', monospace;
   font-size: 11px;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   color: var(--lp-faint);
}

.quickview_pills {
   display: flex;
   flex-wrap: wrap;
   gap: 7px;
   margin-top: 20px;
}

.quickview_swatches {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   margin-top: 20px;
}

.quickview_swatches .product_swatch {
   width: 28px;
   height: 28px;
}

.quickview_actions {
   display: flex;
   align-items: center;
   gap: 10px;
   flex-wrap: wrap;
   margin-top: auto;
   padding-top: 28px;
}

.quickview_actions .default_button {
   flex: 0 0 auto;
}

@media (max-width: 719px) {
   .quickview_card {
      grid-template-columns: 1fr;
   }

   .quickview_media {
      aspect-ratio: 16/10;
   }

   .quickview_info {
      padding: 26px;
   }
}

/* ============================================================================
   UI polish: card hover 2nd image, skeletons, gallery nav, mobile CTA
   ========================================================================== */

/* ---- skeleton loading ---- */
.product_skeleton {
   pointer-events: none;
}

.product_skeleton .product_sk_thumb {
   display: block;
   aspect-ratio: 4 / 5;
   background: var(--lp-panel);
   border-radius: 2px;
}

.product_skeleton .product_sk_line {
   display: block;
   height: 11px;
   border-radius: 3px;
   background: var(--lp-panel);
}

.product_skeleton .product_sk_line.is_label {
   width: 34%;
   margin-top: 20px;
   height: 8px;
}

.product_skeleton .product_sk_line.is_title {
   width: 68%;
   margin-top: 12px;
   height: 18px;
}

.product_skeleton .product_sk_pills {
   display: flex;
   gap: 7px;
   margin-top: 15px;
}

.product_skeleton .product_sk_pill {
   width: 58px;
   height: 22px;
   border-radius: 100px;
   background: var(--lp-panel);
}

.product_skeleton .product_sk_thumb,
.product_skeleton .product_sk_line,
.product_skeleton .product_sk_pill {
   position: relative;
   overflow: hidden;
}

.product_skeleton .product_sk_thumb::after,
.product_skeleton .product_sk_line::after,
.product_skeleton .product_sk_pill::after {
   content: '';
   position: absolute;
   inset: 0;
   transform: translateX(-100%);
   background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
   animation: lp-shimmer 1.3s infinite;
}

@keyframes lp-shimmer {
   100% {
      transform: translateX(100%);
   }
}

/* while skeletons show, the grid should not be dimmed as well */
.product_grid_area.is-skeleton {
   opacity: 1;
}

/* ---- detail gallery: arrows + counter ---- */
.product_gallery_col {
   position: relative;
}

.product_gallery_arrows {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: calc(100% - 0px);
   pointer-events: none;
}

.product_gallery_arrow {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   width: 44px;
   height: 44px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border: 0;
   border-radius: 50%;
   background: rgba(243, 240, 236, 0.9);
   -webkit-backdrop-filter: blur(6px);
   backdrop-filter: blur(6px);
   color: var(--lp-ink);
   cursor: pointer;
   pointer-events: auto;
   opacity: 0;
   transition: opacity 0.35s var(--lp-ease), background-color 0.3s var(--lp-ease);
}

.product_gallery_col:hover .product_gallery_arrow {
   opacity: 1;
}

.product_gallery_arrow:hover {
   background: #fff;
}

.product_gallery_arrow.is_prev {
   left: 14px;
}

.product_gallery_arrow.is_next {
   right: 14px;
}

@media (hover: none) {
   .product_gallery_arrow {
      opacity: 1;
   }
}

.product_gallery_counter {
   position: absolute;
   left: 14px;
   bottom: 14px;
   z-index: 3;
   padding: 5px 11px;
   background: rgba(20, 18, 16, 0.72);
   -webkit-backdrop-filter: blur(6px);
   backdrop-filter: blur(6px);
   color: #fff;
   font-family: 'Aeonik Mono', monospace;
   font-size: 11px;
   letter-spacing: 0.06em;
   border-radius: 100px;
}

/* ---- mobile sticky CTA bar (detail) ---- */
.product_mobile_cta {
   display: none;
}

@media (max-width: 767px) {
   .product_mobile_cta {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 2300;
      display: flex;
      gap: 10px;
      padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px));
      background: rgba(243, 240, 236, 0.94);
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
      border-top: 1px solid var(--lp-line);
   }

   .product_mobile_cta .default_button {
      flex: 1;
      justify-content: center;
   }

   /* lift the floating nav pill and shortlist button above the bar */
   body.has-mobile-cta .site_bottom_nav {
      bottom: 92px;
   }

   body.has-mobile-cta .shortlist_fab {
      bottom: 134px;
   }

   /* room so the bar never covers the last content */
   body.has-mobile-cta main {
      padding-bottom: 74px;
   }
}

/* ============================================================================
   Enquiry popup — the primary "Enquire" action (WhatsApp kept as secondary)
   ========================================================================== */
body.is-eq-open {
   overflow: hidden;
}

.enquiry_modal {
   position: fixed;
   inset: 0;
   z-index: 3200;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 28px;
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.3s var(--lp-ease), visibility 0.3s var(--lp-ease);
}

.enquiry_modal.is-open {
   opacity: 1;
   visibility: visible;
}

.enquiry_backdrop {
   position: absolute;
   inset: 0;
   background: rgba(14, 12, 11, 0.6);
   -webkit-backdrop-filter: blur(5px);
   backdrop-filter: blur(5px);
}

.enquiry_dialog {
   position: relative;
   width: min(520px, 100%);
   max-height: 90vh;
   overflow-y: auto;
   background: var(--lp-cream);
   border-radius: 4px;
   box-shadow: 0 40px 120px rgba(0, 0, 0, 0.4);
   transform: translateY(14px) scale(0.99);
   transition: transform 0.4s var(--lp-ease);
}

.enquiry_modal.is-open .enquiry_dialog {
   transform: none;
}

.enquiry_close {
   position: absolute;
   top: 14px;
   right: 14px;
   z-index: 4;
   width: 40px;
   height: 40px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border: 0;
   border-radius: 50%;
   background: rgba(243, 240, 236, 0.9);
   color: var(--lp-ink);
   cursor: pointer;
}

.enquiry_close:hover {
   background: #fff;
}

.enquiry_body {
   padding: 42px 40px 38px;
}

.enquiry_body .default_label {
   text-transform: uppercase;
   color: var(--lp-faint);
}

.enquiry_title {
   margin: 10px 0 0;
   font-family: 'Canela Text', serif;
   font-size: 28px;
   font-weight: 300;
   letter-spacing: -0.03em;
   color: var(--lp-ink);
}

.enquiry_subject {
   margin: 8px 0 0;
   font-family: 'Aeonik Mono', monospace;
   font-size: 11px;
   line-height: 1.5;
   letter-spacing: 0.05em;
   text-transform: uppercase;
   color: var(--lp-faint);
}

.enquiry_form {
   margin-top: 24px;
}

.enquiry_row {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 14px;
}

.enquiry_field {
   margin-bottom: 14px;
}

.enquiry_field label {
   display: block;
   font-family: 'Aeonik Mono', monospace;
   font-size: 10px;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   color: var(--lp-faint);
   margin-bottom: 7px;
}

.enquiry_opt {
   text-transform: none;
   letter-spacing: 0;
}

.enquiry_field input,
.enquiry_field textarea {
   width: 100%;
   padding: 12px 14px;
   background: rgba(255, 255, 255, 0.6);
   border: 1px solid var(--lp-line, #DAD5CD);
   border-radius: 3px;
   font-family: inherit;
   font-size: 14px;
   color: var(--lp-ink);
   outline: none;
   transition: border-color 0.2s var(--lp-ease);
}

.enquiry_field input:focus,
.enquiry_field textarea:focus {
   border-color: var(--lp-ink);
   background: #fff;
}

.enquiry_field textarea {
   resize: vertical;
   min-height: 74px;
}

/* ---- validation (mirrors .contact_field_error, fitted to enquiry_field's boxed border) ---- */
.enquiry_field_error {
   display: block;
   margin-top: 7px;
   font-family: 'Geist', sans-serif;
   font-size: 12px;
   font-weight: 300;
   letter-spacing: 0.02em;
   color: #9a3327;
}

.enquiry_field_error:empty {
   display: none;
}

.enquiry_field.has_error input,
.enquiry_field.has_error textarea {
   border-color: #9a3327;
}

.enquiry_consent {
   display: flex;
   align-items: flex-start;
   gap: 9px;
   margin: 4px 0 2px;
   font-size: 12.5px;
   line-height: 1.45;
   color: var(--lp-muted, #6D6D6D);
   cursor: pointer;
}

.enquiry_consent input {
   margin-top: 2px;
   flex: 0 0 auto;
}

.enquiry_hp {
   position: absolute;
   left: -9999px;
   width: 1px;
   height: 1px;
   overflow: hidden;
}

.enquiry_error {
   margin: 14px 0 0;
   padding: 10px 12px;
   background: rgba(154, 51, 39, 0.08);
   border: 1px solid rgba(154, 51, 39, 0.25);
   border-radius: 3px;
   color: #9a3327;
   font-size: 13px;
}

.enquiry_actions {
   display: flex;
   gap: 10px;
   flex-wrap: wrap;
   margin-top: 22px;
}

.enquiry_submit {
   flex: 1 1 auto;
   justify-content: center;
}

.enquiry_submit.is-loading {
   opacity: 0.7;
   pointer-events: none;
}

.enquiry_success {
   text-align: center;
   padding: 24px 6px 8px;
}

.enquiry_success_mark {
   width: 58px;
   height: 58px;
   margin: 0 auto 18px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   background: rgba(37, 140, 80, 0.12);
   color: #258c50;
}

.enquiry_success h3 {
   font-family: 'Canela Text', serif;
   font-weight: 300;
   font-size: 26px;
   color: var(--lp-ink);
   margin: 0 0 8px;
}

.enquiry_success p {
   color: var(--lp-muted, #6D6D6D);
   font-size: 14px;
   line-height: 1.55;
   margin: 0 auto 22px;
   max-width: 320px;
}

@media (max-width: 719px) {
   .enquiry_body {
      padding: 30px 24px 26px;
   }

   .enquiry_row {
      grid-template-columns: 1fr;
      gap: 0;
   }
}

.contact_form_flash {
   margin: 0 0 24px;
   padding: 14px 18px;
   border-radius: 3px;
   font-size: 14px;
   line-height: 1.5;
}

.contact_form_flash.is_ok {
   background: rgba(37, 140, 80, 0.1);
   border: 1px solid rgba(37, 140, 80, 0.3);
   color: #1f7043;
}

.contact_form_flash.is_err {
   background: rgba(154, 51, 39, 0.08);
   border: 1px solid rgba(154, 51, 39, 0.25);
   color: #9a3327;
}
/* ==========================================================================
   Press & keyboard-focus feedback  (additive)
   --------------------------------------------------------------------------
   Tactile :active press states and consistent :focus-visible rings for the
   interactive controls that had hover but neither. Purely additive: nothing
   changes at rest, no existing rule is overridden, and prefers-reduced-motion
   drops the press motion (the rings stay). Follows the house tokens — a 1px
   ink hairline ring (white on the dark menu / bottom-nav / footer surfaces)
   and the --lp-ease curve.
   ========================================================================== */

/* A transform transition for the controls that don't already declare one, so
   the press eases in and out rather than snapping. No resting transform is set,
   so this moves nothing until :active fires. */
.default_button,
.product_pager_num,
.product_gallery_frame,
.site_bottom_nav_toggle,
.site_bottom_nav_brand,
.product_item_area,
.catalog_item_area {
   transition: transform 0.2s var(--lp-ease);
}

/* --- press: a small, quick give on activation ------------------------------ */
.default_button:active {
   transform: scale(0.97);
}

.product_icon_btn:active {
   transform: scale(0.9);
}

.product_chip:active {
   transform: scale(0.94);
}

.product_pager_num:active,
.product_pager_arrow:not(.is-disabled):active {
   transform: scale(0.94);
}

.product_gallery_arrow:active {
   transform: scale(0.92);
}

.product_thumb:active {
   transform: scale(0.95);
}

.site_bottom_nav_toggle:active {
   transform: scale(0.92);
}

.product_item_area:active,
.catalog_item_area:active,
.product_gallery_frame:active {
   transform: scale(0.99);
}

.site_footer_social_area a:active {
   transform: translateY(1px);
}

/* --- keyboard focus rings: ink on the light (cream/white) surfaces --------- */
.default_button:focus-visible {
   outline: 1px solid var(--lp-ink);
   outline-offset: 4px;
}

.product_icon_btn:focus-visible,
.product_chip:focus-visible,
.product_gallery_arrow:focus-visible {
   outline: 1px solid var(--lp-ink);
   outline-offset: 3px;
}

.product_pager_num:focus-visible,
.product_pager_arrow:focus-visible,
.product_thumb:focus-visible {
   outline: 1px solid var(--lp-ink);
   outline-offset: 4px;
}

.product_gallery_frame:focus-visible {
   outline: 1px solid var(--lp-ink);
   outline-offset: 6px;
}

.product_item_area:focus-visible,
.catalog_item_area:focus-visible {
   outline: 1px solid var(--lp-ink);
   outline-offset: 10px;
}

/* --- keyboard focus rings: white on the dark surfaces --------------------- */
.site_menu_primary a:focus-visible,
.site_menu_secondary a:focus-visible,
.site_menu_contact:focus-visible {
   outline: 1px solid #fff;
   outline-offset: 6px;
}

.site_bottom_nav_toggle:focus-visible,
.site_bottom_nav_brand:focus-visible {
   outline: 1px solid #fff;
   outline-offset: 4px;
}

.site_footer_social_area a:focus-visible {
   outline: 1px solid #fff;
   outline-offset: 3px;
}

/* reduced-motion: keep every focus ring, drop only the press movement */
@media (prefers-reduced-motion: reduce) {

   .default_button:active,
   .product_icon_btn:active,
   .product_chip:active,
   .product_pager_num:active,
   .product_pager_arrow:not(.is-disabled):active,
   .product_gallery_arrow:active,
   .product_thumb:active,
   .site_bottom_nav_toggle:active,
   .product_item_area:active,
   .catalog_item_area:active,
   .product_gallery_frame:active,
   .site_footer_social_area a:active {
      transform: none;
   }
}