/** Shopify CDN: Minification failed

Line 395:18 Unexpected "{"
Line 395:27 Expected ":"

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:contact (INDEX:7) */
/* .og-h3 brings section padding of its own. */
.m-contact__title.og-h3 {
  margin: 0;
  padding: 0;
}
.m-contact__subheading {
  margin: 0 0 8px;
}
.m-contact__content {
  margin-top: 16px;
}

/* The form is the width the merchant picks, centred in the section. */
.m-contact .form {
  width: 100%;
  margin-inline: auto;
  text-align: start;
}
.m-contact--small .form {
  max-width: 528px;
}
.m-contact--medium .form {
  max-width: 640px;
}
.m-contact--large .form {
  max-width: 100%;
}

.m-contact__optin {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  cursor: pointer;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 15px;
  line-height: 24px;
  letter-spacing: -0.45px;
  color: rgb(var(--text-color));
}
.m-contact__optin input {
  width: 18px;
  height: 18px;
  flex: none;
  accent-color: rgb(var(--text-color));
  cursor: pointer;
}

/* The section owns its spacing so it can differ per breakpoint. Its own
   margins replace the theme's 64px stack gap. */
.m-contact {
  padding-block: var(--m-contact-pt) var(--m-contact-pb);
  --section-stack-gap: 0px;
}
.m-contact > * + .form {
  margin-top: 32px;
}

/* Fields, Figma 4223-15457: 32px tall, 8px radius, 16px apart. */
.m-contact {
  --input-border-radius: 8px;
  --input-padding-block: 7px;
  --input-padding-inline: 16px;
  --fieldset-gap: 16px;
}
.m-contact :is(.input, .textarea, .select) {
  border-color: #a0a599;
  font-size: 11px;
  line-height: 16px;
}
.m-contact :is(.input:focus, .textarea:focus, .select:focus-visible) {
  border-color: currentColor;
}
.m-contact :is(.input, .textarea)::placeholder,
.m-contact .select:required:invalid {
  color: #868d87;
}

/* The theme gives selects a faint lift that reads as a halo on a dark scheme. */
.m-contact .select,
.m-contact select {
  box-shadow: none;
}

.m-contact textarea {
  min-height: 187px;
  resize: vertical;
}

/* Button big. Scheme-derived, so it cannot end up the same colour as the
   section it sits on the way a literal green did. */
button.m-contact__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  margin-top: 24px;
  padding-inline: 32px;
  justify-self: center;
  border: 0;
  border-radius: 50px;
  background: rgb(var(--text-color));
  color: rgb(var(--background));
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 2.64px;
  text-transform: uppercase;
  cursor: pointer;
}

@media (max-width: 699px) {
  .m-contact {
    padding-block: var(--m-contact-pt-mob) var(--m-contact-pb-mob);
  }
  .m-contact textarea {
    min-height: 140px;
  }
  /* 16px stops iOS zooming into the field on focus. */
  .m-contact :is(.input, .textarea, .select) {
    font-size: 16px;
    line-height: 20px;
  }
  button.m-contact__btn {
    width: 100%;
  }
}
/* END_SECTION:contact */

/* START_SECTION:faq (INDEX:11) */
/* Qualified .faq.faq--* (0,2,0) to beat the theme's generic .faq{} in theme.css. */
.faq.faq--with-sidebar {
  display: grid;
  /* 320px holds "Book your experience": 201px label, 16px button padding and
     40px card padding each side. A quarter of the row fell short below ~1500px. */
  grid-template-columns: minmax(320px, 1fr) minmax(0, 3fr);
  gap: 40px;
  align-items: start;
}

.faq__help-card {
  background: #f8f9f8;
  border-radius: 14px;
  padding: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  text-align: center;
  position: sticky;
  /* Park below the sticky header + announcement bar so the card doesn't
     slide behind them. Both vars are set by the theme; multipliers track
     whether each bar is actually sticky in the current setup. */
  top: calc(
    var(--header-height, 80px) * var(--header-is-sticky, 0)
    + var(--announcement-bar-height, 0px) * var(--announcement-bar-is-sticky, 0)
    + 24px
  );
}

.faq__help-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
}

.faq__help-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
}

.faq__help-title {
  margin: 0;
  font-family: 'Playfair Display', serif;
  font-weight: 500;
  font-size: 24px;
  line-height: 31px;
  letter-spacing: 0;
  color: #4d5848;
}

.faq__help-title em {
  font-style: italic;
}

.faq__help-body {
  margin: 0;
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 24px;
  letter-spacing: -0.03em;
  color: #868d87;
  max-width: 28ch;
}

.faq__help-body p {
  margin: 0;
  font-size: 15px;
  line-height: 24px;
}

.faq__help-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 100%;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
  min-height: 48px;
  padding: 17px 16px 16px;
  border-radius: 50px;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
  border: 1px solid #4d5848;
}

.faq__help-btn--solid {
  background: #4d5848;
  color: #eaf2eb;
}

.faq__help-btn--solid:hover {
  background: #3a4337;
}

.faq__help-btn--outline {
  background: transparent;
  color: #4d5848;
}

.faq__help-btn--outline:hover {
  background: rgba(77, 88, 72, 0.08);
}

.faq__rail {
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-self: start;
  position: sticky;
  top: calc(
    var(--header-height, 80px) * var(--header-is-sticky, 0)
    + var(--announcement-bar-height, 0px) * var(--announcement-bar-is-sticky, 0)
    + 24px
  );
}

@media (min-width: 1000px) {
  .faq--with-sidebar:has(.faq__toc) {
    grid-template-columns: 343px minmax(0, 1fr);
    gap: 88px;
  }
}

.faq__rail .faq__toc {
  position: static;
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: none;
  min-width: 0;
}
.faq__rail .faq__toc-item {
  font-family: 'Playfair Display', serif;
  font-weight: 500;
  font-size: 24px;
  line-height: 31px;
  color: #868d87;
  padding: 0;
  background: none;
}
.faq__rail .faq__toc-item.is-active,
.faq__rail .faq__toc-item:hover {
  color: #4d5848;
}

/* Help card is static inside the (already sticky) rail. */
.faq__rail .faq__help-card {
  position: static;
  top: auto;
  align-self: stretch;
}

.faq__category {
  font-family: 'Playfair Display', serif;
  font-size: 34px;
  line-height: 45px;
  font-weight: 400;
}

.faq.faq--mobile {
  display: none;
}
@media (max-width: 699px) {
  .faq.faq--desktop {
    display: none;
  }
  .faq.faq--mobile {
    display: block;
  }
}

.faq--desktop .faq__group + .faq__group {
  margin-block-start: 3rem;
}

/* MOBILE instance — horizontal tab bar (full-bleed), one category at a time.
   The .faq--mobile wrapper is hidden on desktop, so no per-rule media query needed.
   `button.` qualifier beats the theme reset `[type="button"]{background:#0000}`. */
.faq__tabs {
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  margin-inline: calc(50% - 50vw);
  margin-block-end: 40px;
}
.faq__tabs::-webkit-scrollbar {
  display: none;
}
button.faq__tab {
  flex: 0 0 auto;
  height: 64px;
  padding: 16px;
  border: 0;
  background: #f8f9f8;
  color: #4d5848;
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 24px;
  white-space: nowrap;
  cursor: pointer;
}
button.faq__tab.is-active {
  background: #4d5848;
  color: #f1f3f1;
}

.faq--mobile .faq__group {
  display: none;
}
.faq--mobile .faq__group.is-active {
  display: block;
}

/* Active category heading = Mob-H3 26/32. */
.faq--mobile .faq__category {
  font-size: 26px;
  line-height: 32px;
}

/* Help card sits below the answers on mobile. */
.faq--mobile .faq__help-card {
  position: static;
  margin-block-start: 24px;
}

.faq .faq__content .accordion__toggle {
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 26px;
  letter-spacing: 0;
  color: var(--Green-text-color, #4D5848);
  min-height: 48px;
  padding-block: 20px;
}

/* Section title uses the shared og-h3 type (Mob-H3 on mobile). The FAQ's
   .section-stack already provides the vertical rhythm, so drop og-h3's own
   header padding to avoid doubling it. */
#shopify-section-{{ section.id }} .section-header .og-h3 {
  padding: 0;
}

.faq__content .accordion__toggle .icon {
  width: 22px;
  flex-shrink: 0;
  color: #868d87;
}

.faq__content .accordion__toggle .icon path {
  stroke-width: 0.6;
  stroke-linecap: round;
}

/* Dividers only between questions — drop the line above the first and below the last. */
.faq__content .accordion:first-child {
  border-top: 0;
}
.faq__content .accordion:last-child {
  border-bottom: 0;
}

/* The theme leaves .accordion__content displayed when collapsed and relies on
   a JS height tween that is unreliable here (every answer showed on load, and
   open panels sometimes clamped to the summary height). Drive show/hide off the
   reliable aria-expanded state and force the open panel to its natural height,
   overriding the JS inline height/overflow. */
/* Smooth height morph matching Queensmith (Alpine x-collapse): 0.25s,
   cubic-bezier(0.4,0,0.2,1), overflow hidden. Driven off aria-expanded (reliable)
   via a grid-rows 0fr->1fr morph. The theme's own JS height tween is neutralised on
   the disclosure (height/overflow forced) so it can't fight or clamp the panel. */
.faq__content .accordion__disclosure {
  height: auto !important;
  overflow: visible !important;
}
.faq__content .accordion__content {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  margin-block-start: 0;
  padding: 0;
  transition: grid-template-rows 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.faq__content .accordion__disclosure[aria-expanded='true'] .accordion__content {
  grid-template-rows: 1fr;
}
.faq__content .accordion__content > * {
  min-height: 0;
  overflow: hidden;
  padding-block-end: 20px; /* answer bottom spacing inside the morphing row */
}

.faq__content .accordion__content,
.faq__content .accordion__content .prose,
.faq__content .accordion__content .prose p {
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 24px;
  letter-spacing: -0.45px;
  color: var(--Text-secondary, #868D87);
}

/* Below 1000px: help card moves BELOW accordion, full width. Beside it, the
   320px card left tablets a ~250px column of questions. Scoped
   :not(.faq--desktop) so it can't re-show the hidden desktop instance. */
@media (max-width: 999px) {
  .faq--with-sidebar:not(.faq--desktop) {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  /* Order belongs on the rail: it is the flex item here, the card inside it is
     not, so ordering the card did nothing. */
  .faq--with-sidebar:not(.faq--desktop) .faq__rail {
    order: 2;
    width: 100%;
    position: static;
  }
  .faq--with-sidebar:not(.faq--desktop) .faq__content {
    order: 1;
    width: 100%;
  }
  .faq--with-sidebar:not(.faq--desktop).faq--help-first .faq__rail {
    order: 0;
  }
  .faq--with-sidebar:not(.faq--desktop) .faq__help-card {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    background: #F8F9F8;
    padding: 40px;
    gap: 32px;
    position: static;
    border-radius: 14px;
  }
}

@media (max-width: 699px) {
  /* Mob-H4: Playfair SemiBold 22/28 */
  .faq__help-title {
    font-weight: 600;
    font-size: 22px;
    line-height: 28px;
  }

  /* Questions stay Instrument Sans (from base), slightly smaller on mobile. */
  .faq .faq__content .accordion__toggle {
    font-size: 18px;
    line-height: 24px;
    font-weight: 400;
  }

  /* Mob-paragraph token: 16/24 #868D87 */
  .faq__help-body {
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0;
    color: #868D87;
    max-width: none;
  }
}
/* END_SECTION:faq */

/* START_SECTION:m-bespoke-steps (INDEX:23) */
.m-bespoke-steps {
  /* Unified homepage container (matches header/logo gutter). */
  padding-inline: max(var(--og-gutter), calc((100% - 1336px) / 2));
  interpolate-size: allow-keywords; /* lets the accordion animate to height:auto */
}

/* Smoothly expand/collapse the open step's body. Progressive enhancement:
   browsers without ::details-content just snap (the previous behaviour). */
.m-bespoke-steps__item::details-content {
  height: 0;
  overflow: hidden;
  transition: height 0.3s ease, content-visibility 0.3s ease allow-discrete;
}
.m-bespoke-steps__item[open]::details-content {
  height: auto;
}

.m-bespoke-steps__heading { /* type + spacing via .og-h3 */
}

/* .og-h3 carries the 64px gap below the header, so hand it to the subtext. */
.m-bespoke-steps__heading:has(+ .m-bespoke-steps__subtext) {
  padding-block-end: 16px;
}
.m-bespoke-steps__subtext {
  padding: 0 88px 64px;
  text-align: center;
}
.m-bespoke-steps__subtext > * {
  margin: 0;
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 24px;
  letter-spacing: -0.45px;
}

/* Fallback so the custom element is block-level before JS upgrades it. */
bespoke-steps {
  display: block;
}

/* .container (content_width) sizes the header; og-h3 and the paragraph drop
   their own side padding so the container alone decides the width. The steps
   below keep their full-bleed layout. */
.m-bespoke-steps__header .og-h3,
.m-bespoke-steps__header .m-bespoke-steps__subtext {
  padding-inline: 0;
}

/* The container is 1240px, which is 130 characters of 15px text on one line.
   Same measure as the get-inspired intro. */
.m-bespoke-steps__header .m-bespoke-steps__subtext {
  max-width: 680px;
  margin-inline: auto;
}

.m-bespoke-steps__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: stretch;
}

.m-bespoke-steps__col-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 32px;
}

.m-bespoke-steps__list {
  display: flex;
  flex-direction: column;
}

.m-bespoke-steps__item {
  border-top: 1px solid rgba(0, 0, 0, 0.12);
}

.m-bespoke-steps__item:first-child {
  border-top: 0;
}

.m-bespoke-steps__summary {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 22px 4px;
  cursor: pointer;
  list-style: none;
  font-family: 'Playfair Display', serif;
  font-weight: 500;
  font-size: 24px;
  line-height: 31px;
  letter-spacing: 0;
}

.m-bespoke-steps__summary::-webkit-details-marker {
  display: none;
}

/* Number = H4 token (Playfair Medium 24/31), 48px box. Secondary grey when the
   step is closed; highlights green only on the open (active) step. */
.m-bespoke-steps__number {
  font-family: 'Playfair Display', serif;
  font-weight: 500;
  font-size: 24px;
  line-height: 31px;
  letter-spacing: 0;
  min-width: 48px;
  color: #868d87;
  transition: color 0.2s ease;
}

.m-bespoke-steps__item[open] .m-bespoke-steps__number {
  color: #4d5848;
}

/* Match FAQ questions exactly: green at all times (no closed/open grey). */
.m-bespoke-steps__title {
  flex: 1;
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 26px;
  color: #4d5848;
}

.m-bespoke-steps__item[open] .m-bespoke-steps__title {
  color: #4d5848;
}

.m-bespoke-steps__chevron {
  display: inline-flex;
  align-items: center;
  color: #868d87;
  transition: transform 0.3s ease;
}

/* Chevron rotates to point down when the step is open. */
.m-bespoke-steps__item[open] .m-bespoke-steps__chevron {
  transform: rotate(90deg);
}

/* Left padding aligns the body with the title text (4px summary pad + 48px
   number box + 28px gap), not indented further left. */
/* Type on the <p> too — beats the global `p { font-size: var(--text-base) }`. */
.m-bespoke-steps__body,
.m-bespoke-steps__body p {
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 24px;
  letter-spacing: -0.45px;
  color: #868d87;
}

/* Left padding aligns the body with the title text (4px summary pad + 48px
   number box + 28px gap). */
.m-bespoke-steps__body {
  padding: 0 4px 22px 80px;
  max-width: 56ch;
}

.m-bespoke-steps__body p {
  margin: 0 0 8px;
}

.m-bespoke-steps__body p:last-child {
  margin-bottom: 0;
}

.m-bespoke-steps__cta {
  margin-top: 8px;
}

.m-bespoke-steps__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #4d5848;
  color: #efebe7;
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 100%;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 17px 32px 16px;
  border-radius: 50px;
  text-decoration: none;
  transition: background 0.2s ease;
}

.m-bespoke-steps__btn:hover {
  background: #3a4337;
}

.m-bespoke-steps__col-right {
  position: relative;
  min-height: 480px;
  border-radius: 0;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.04);
}

@media (min-width: 700px) and (orientation: landscape), (min-width: 1101px) {
  .m-bespoke-steps {
    max-width: none;
  }

  .m-bespoke-steps__layout {
    margin-inline: calc(50% - 50vw);
    /* 756 is half the 1512 design; on narrower screens it stays a half. */
    grid-template-columns: minmax(0, 1fr) min(756px, 50%);
    gap: 0;
  }
  .m-bespoke-steps__col-left {
    padding-inline: var(--og-gutter);
    padding-block: 40px;
    gap: 40px;
  }
  /* At least the design's 726, and as tall as the text when that runs longer,
     so no background shows under the photo; the photo crops to fit. */
  .m-bespoke-steps__col-right {
    min-height: 726px;
  }
}

.m-bespoke-steps__pane {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

.m-bespoke-steps__pane.is-active {
  opacity: 1;
  pointer-events: auto;
}

.m-bespoke-steps__media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: 0;
}

.m-bespoke-steps__media--placeholder {
  background: linear-gradient(135deg, #efebe7, #e0d8d0);
}

.m-bespoke-steps__media--embed {
  pointer-events: none;
}

@media (max-aspect-ratio: 16/9) {
  .m-bespoke-steps__media--embed {
    min-width: 100%;
    min-height: 100%;
    width: 177.78vh;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
  }
}

/* Mobile-only UI is hidden on desktop. Portrait tablets get the mobile layout. */
.m-bespoke-steps__mobile { display: none; }

@media (max-width: 999px) {
  .m-bespoke-steps__layout {
    gap: 40px;
  }
}

@media (max-width: 699px), (orientation: portrait) and (max-width: 1100px) {
  /* No inner padding-block: vertical spacing is the wrapper's padding_*_mobile
     (settings) + .og-h3's 40px top. An inner value here would double them. */
  .m-bespoke-steps {
    padding-inline: 0;
  }

  /* Mobile: white background. The tabs strip keeps its own off-white. */
  .m-bespoke-steps.color-scheme {
    background: #fff;
  }

  .m-bespoke-steps__heading { /* spacing via .og-h3; keep wider side pad (full-bleed section) */
    padding-inline: 32px;
  }
  .m-bespoke-steps__subtext {
    padding: 0 32px 40px;
  }

  .m-bespoke-steps__layout {
    grid-template-columns: 1fr;
    gap: 0;
  }

  /* Single 40px gap between the step content and the button (no extra
     padding on the panel below). */
  .m-bespoke-steps__col-left {
    gap: 40px;
  }

  .m-bespoke-steps__col-right {
    order: -1;
    width: 100%;
    height: calc(100vw * 387 / 414);
    min-height: auto;
    border-radius: 0;
  }

  /* Desktop accordion hidden on mobile, mobile tab-UI shown */
  .m-bespoke-steps__list--desktop { display: none; }
  .m-bespoke-steps__mobile { display: block; }

  /* The strip's background is the divider: the 1px gaps are the only part of
     it the opaque tabs leave showing. */
  .m-bespoke-steps__tabs {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    align-items: stretch;
    gap: 1px;
    background: #ffffff;
  }

  /* button. qualifier beats the theme reset [type="button"]{background:#0000} */
  button.m-bespoke-steps__tab {
    background: #F8F9F8;
    color: #4d5848;
    border: 0;
    border-radius: 0;
    padding: 22px 0;
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-style: normal;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
  }

  .m-bespoke-steps__tab.is-active {
    background: #4d5848;
    color: #efebe7;
  }

  .m-bespoke-steps__active-wrap {
    position: relative;
    /* No bottom padding — the 40px col-left gap handles space to the button.
       68 left only 8px between the arrows and the copy; 74 with the arrows
       moved out to 8 gives the 18px the review carousel uses. */
    padding: 32px 74px 0;
  }

  /* Stack every panel in one grid cell so the area is always as tall as the
     tallest step — switching steps never resizes the card (identical size). */
  .m-bespoke-steps__active-content {
    position: relative;
    display: grid;
  }
  .m-bespoke-steps__active {
    grid-area: 1 / 1;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease, visibility 0s 0.3s;
  }
  .m-bespoke-steps__active.is-active {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.3s ease, visibility 0s;
  }

  /* Match FAQ questions on mobile: Instrument Sans 400, 18/24. */
  .m-bespoke-steps__active-title {
    margin: 0 0 16px;
    font-family: 'Instrument Sans', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    color: #4d5848;
  }

  /* Mob-paragraph: 15/24, -0.45px */
  .m-bespoke-steps__active-body,
  .m-bespoke-steps__active-body p {
    margin: 0;
    font-family: 'Instrument Sans', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 24px;
    letter-spacing: -0.45px;
    color: #868d87;
  }

  /* Prev/next arrows — white circle + soft shadow, flanking the content */
  button.m-bespoke-steps__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #fff;
    border: 0;
    color: #4d5848;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: background 0.2s ease, color 0.2s ease;
  }
  .m-bespoke-steps__nav--next { right: 8px; }
  /* Prev arrow fades in once past the first step — Queensmith's opacity-only
     fade (no visibility toggle), standard-ease 0.25s. */
  .m-bespoke-steps__nav--prev {
    left: 8px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s 0.25s, background 0.2s ease, color 0.2s ease;
  }
  .m-bespoke-steps__active-wrap--has-nav .m-bespoke-steps__nav--prev {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s, background 0.2s ease, color 0.2s ease;
  }
  /* Hover devices only — avoids sticky :hover after a tap */
  @media (hover: hover) {
    button.m-bespoke-steps__nav:hover {
      background: #4d5848;
      color: #efebe7;
    }
  }

  .m-bespoke-steps__cta {
    margin-top: 0;
    padding: 0 32px 8px;
  }

  .m-bespoke-steps__btn {
    width: 100%;
    text-align: center;
    font-size: 12px;
    letter-spacing: 0.14em;
    padding: 18px 28px 17px;
  }
}
/* Green background, desktop only. Mobile keeps the white card it has always
   had, so nothing below 700px changes. White leaves every rule untouched. */
@media (min-width: 700px) and (orientation: landscape), (min-width: 1101px) {
  .m-bespoke-steps--green.color-scheme { background: #4d5848; }
  .m-bespoke-steps--green .m-bespoke-steps__heading,
  .m-bespoke-steps--green .m-bespoke-steps__subtext > *,
  .m-bespoke-steps--green .m-bespoke-steps__title,
  .m-bespoke-steps--green .m-bespoke-steps__item[open] .m-bespoke-steps__title,
  .m-bespoke-steps--green .m-bespoke-steps__item[open] .m-bespoke-steps__number { color: #efebe7; }
  .m-bespoke-steps--green .m-bespoke-steps__number,
  .m-bespoke-steps--green .m-bespoke-steps__chevron,
  .m-bespoke-steps--green .m-bespoke-steps__body,
  .m-bespoke-steps--green .m-bespoke-steps__body p { color: rgba(239, 235, 231, 0.72); }
  .m-bespoke-steps--green .m-bespoke-steps__item { border-top-color: rgba(239, 235, 231, 0.22); }
  .m-bespoke-steps--green .m-bespoke-steps__btn { --wf: #efebe7; --wt: #4d5848; }
}
/* END_SECTION:m-bespoke-steps */

/* START_SECTION:m-cta-banner (INDEX:28) */
.m-cta-banner {
  width: 100%;
}

.m-cta-banner__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: clamp(24px, 5.8vw, 88px);
  text-align: center;
}

.m-cta-banner__heading {
  margin: 0;
  max-width: 680px;
}
.m-cta-banner__heading.og-h3 {
  padding: 0;
}

/* Paragraph token: Instrument Sans 15/24, ls -0.45px */
.m-cta-banner__text {
  max-width: 880px;
}

.m-cta-banner--overline .m-cta-banner__text,
.m-cta-banner--overline .m-cta-banner__text > * {
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 2.64px;
  text-transform: uppercase;
  font-weight: 500;
}

.m-cta-banner__text > * {
  margin: 0;
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 24px;
  letter-spacing: -0.45px;
}

/* Button big token: Instrument Sans Medium 12, ls 2.64px, uppercase pill */
.m-cta-banner__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 17px 32px 16px;
  border-radius: 50px;
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 2.64px;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  /* Solid by default (colours via --wf/--wt from the inline style). The slideshow
     wipe-fill hover in custom.css overrides this on fine pointers. */
  background: var(--wf);
  color: var(--wt);
}

@media (max-width: 699px) {
  .m-cta-banner__inner {
    gap: 24px;
  }

  /* Heading type (incl. mobile 26/32) comes from .og-h3. */
}
/* END_SECTION:m-cta-banner */

/* START_SECTION:m-diamond-shapes (INDEX:29) */
.m-diamond-shapes {
  --m-diamond-shapes-gap: 64px;
  /* Unified homepage container (matches header/logo gutter). */
  padding-inline: max(var(--og-gutter), calc((100% - 1336px) / 2));
}

.m-diamond-shapes__heading { /* type + spacing via .og-h3 */
}

.m-diamond-shapes__layout {
  display: grid;
  grid-template-columns: 400px minmax(0, 1fr);
  gap: var(--m-diamond-shapes-gap);
  align-items: center;
}

.m-diamond-shapes__main {
  width: 400px;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.m-diamond-shapes__main-link {
  display: block;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

.m-diamond-shapes__main-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.35s ease;
}

@media (prefers-reduced-motion: reduce) {
  .m-diamond-shapes__main-image {
    transition: none;
  }
}

.m-diamond-shapes__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 32px 16px;
}

.m-diamond-shapes__item {
  margin: 0;
}

.m-diamond-shapes__item-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-decoration: none;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.m-diamond-shapes__icon {
  width: 80px;
  height: 80px;
  object-fit: contain;
  display: block;
  border-radius: 50%;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

.m-diamond-shapes__item-link.is-active .m-diamond-shapes__icon {
  background: #fff;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}
@media (hover: hover) {
  .m-diamond-shapes__item-link:hover .m-diamond-shapes__icon {
    background: #fff;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  }
}

.m-diamond-shapes__item-link.is-active .m-diamond-shapes__label {
  font-weight: 500;
  color: #4d5848;
}

/* Same hover underline as the mega menu: drawn on the text, not the box. */
.m-diamond-shapes__label {
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (hover: hover) {
  .m-diamond-shapes__item-link:hover .m-diamond-shapes__label {
    background-size: 100% 1px;
  }
}

.m-diamond-shapes__icon--placeholder {
  background: rgba(0, 0, 0, 0.06);
  border-radius: 50%;
}

.m-diamond-shapes__label {
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.03em;
  text-align: center;
  color: #868d87;
}

.m-diamond-shapes__cta {
  display: flex;
  justify-content: center;
  margin-top: 48px;
}

.m-diamond-shapes__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #4d5848;
  color: #efebe7;
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 100%;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 17px 32px 16px;
  border-radius: 50px;
  text-decoration: none;
  transition: background 0.2s ease;
}

.m-diamond-shapes__btn:hover {
  background: #3a4337;
}

@media (max-width: 999px) {
  .m-diamond-shapes {
    --m-diamond-shapes-gap: 48px;
  }

  .m-diamond-shapes__layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .m-diamond-shapes__main {
    width: 100%;
    margin-inline: auto;
    max-width: 445px;
  }

  .m-diamond-shapes__grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 24px 12px;
  }
}

@media (max-width: 699px) {
  .m-diamond-shapes {
    padding-inline: 48px;
    --m-diamond-shapes-gap: 32px;
  }

  /* heading spacing via .og-h3 */

  .m-diamond-shapes__grid {
    display: flex;
    flex-wrap: nowrap;
    grid-template-columns: none;
    gap: 32px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 48px;
    -webkit-overflow-scrolling: touch;
    padding-inline: 48px;
    margin-inline: -48px;
    margin-top: 0;
    padding-bottom: 8px;
    scrollbar-width: none;
  }

  .m-diamond-shapes__grid::-webkit-scrollbar {
    display: none;
  }

  .m-diamond-shapes__item {
    flex: 0 0 auto;
    scroll-snap-align: center;
  }

  .m-diamond-shapes__item-link {
    gap: 8px;
  }

  .m-diamond-shapes__icon {
    width: 64px;
    height: 64px;
  }

  .m-diamond-shapes__label {
    font-size: 12px;
  }

  .m-diamond-shapes__cta {
    margin-top: 32px;
  }

  /* Keep the label on one line — looser 0.22em spacing wrapped longer labels. */
  .m-diamond-shapes__btn {
    letter-spacing: 0.14em;
    white-space: nowrap;
  }
}
/* END_SECTION:m-diamond-shapes */

/* START_SECTION:m-feature-card (INDEX:30) */
/* Full-bleed: no inline padding, no max-width, no border-radius on inner */
.m-feature-card {
  padding-inline: 0;
  max-width: none;
  margin-inline: 0;
  width: 100%;
}

.m-feature-card__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--m-fc-bg, #4d5848);
  color: var(--m-fc-text, #efebe7);
  border-radius: 0;
  overflow: hidden;
  /* Height is driven by the content column; the image fills its half via
     absolute positioning, so it never forces extra background past the 88px. */
}

.m-feature-card--image-right .m-feature-card__media {
  order: 2;
}

.m-feature-card__media {
  position: relative;
  overflow: hidden;
}

.m-feature-card__image,
.m-feature-card__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.m-feature-card__image--placeholder {
  background: linear-gradient(135deg, #efebe7, #d8d0c8);
  width: 100%;
  height: 100%;
  min-height: 560px;
}

.m-feature-card__content {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 1.4vw, 20px);
  /* Sides on the page gutter, so the text lines up with the logo. */
  padding: 88px var(--og-gutter);
  justify-content: center;
}

.m-feature-card__subheading {
  margin: 0;
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 100%;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.m-feature-card__title {
  margin: 0;
  color: inherit;
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  font-size: 34px;
  line-height: 45px;
  letter-spacing: 0;
  max-width: 580px;
}

/* Type on the <p> too — beats theme's `@media p { font-size: var(--text-base) }` */
.m-feature-card__body,
.m-feature-card__body p {
  color: inherit;
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 400;
  font-size: clamp(15px, 1.04vw, 18px);
  line-height: 1.6;
  letter-spacing: -0.45px;
  max-width: 580px;
}

/* Consistent gap between paragraphs — automatic, no blank lines needed. Shopify
   rich text collapses stacked blank lines on save, so spacing must come from CSS,
   not from how many times the merchant hits Enter. */
.m-feature-card__body p {
  margin: 0 0 24px;
}

.m-feature-card__body p:last-child {
  margin-bottom: 0;
}

/* Stray empty paragraphs add nothing (they collapse) so spacing stays even. */
.m-feature-card__body p:empty {
  margin: 0;
}

.m-feature-card__signature-img {
  display: block;
  width: 199px;
  height: 26px;
  aspect-ratio: 199 / 26;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
  margin: 8px 0 0;
}

.m-feature-card__signature {
  margin: 8px 0 0;
  font-family: 'Dancing Script', cursive;
  font-weight: 500;
  font-size: clamp(24px, 2.2vw, 30px);
  line-height: 1.15;
  letter-spacing: 0;
}

.m-feature-card__cta {
  display: flex;
  gap: clamp(16px, 1.7vw, 24px);
  margin-top: clamp(24px, 2.2vw, 32px);
  flex-wrap: wrap;
}

@media (min-width: 700px) {
  .m-feature-card__content { gap: 0; }
  .m-feature-card__content > * + * { margin-top: 20px; } /* default (eyebrow -> title) */
  .m-feature-card__body { margin-top: 24px; }
  .m-feature-card__cta { margin-top: 56px; }
}

.m-feature-card__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 100%;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 17px 32px 16px;
  border-radius: 50px;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
  border: 1px solid currentColor;
  color: var(--m-fc-text, #efebe7);
  background: transparent;
}

.m-feature-card__btn--outline:first-child {
  background: var(--m-fc-text, #efebe7);
  color: var(--m-fc-bg, #4d5848);
  border-color: var(--m-fc-text, #efebe7);
}

.m-feature-card__btn--outline:hover {
  opacity: 0.85;
}

@media (max-width: 699px) {
  .m-feature-card {
    padding-inline: 0;
  }

  .m-feature-card__inner {
    grid-template-columns: 1fr;
    height: auto;
    min-height: auto;
    border-radius: 0;
  }

  /* Mobile always shows image first */
  .m-feature-card--image-right .m-feature-card__media,
  .m-feature-card__media {
    order: 0;
    aspect-ratio: 4 / 3;
  }

  .m-feature-card__image,
  .m-feature-card__image--placeholder {
    min-height: auto;
  }

  .m-feature-card__content {
    padding: 70px 20px 80px;
    gap: 24px;
  }

  .m-feature-card__title {
    font-size: 26px;
    line-height: 32px;
    font-weight: 500;
  }

  .m-feature-card__body,
  .m-feature-card__body p {
    font-size: 15px;
    line-height: 24px; /* Paragraph 15/24, ls -0.45px */
    letter-spacing: -0.45px;
  }

  .m-feature-card__signature {
    font-size: 26px;
  }

  .m-feature-card__cta {
    gap: 20px;
    margin-top: 32px;
  }

  .m-feature-card__btn {
    text-align: center;
    font-size: 12px;
    letter-spacing: 0.22em;
    padding: 17px 32px 16px;
  }
}

/* Root painted too — stacked child blocks can leave subpixel white seams */
.m-feature-card--experience {
  background: var(--m-fc-bg, #4d5848);
}

.m-fc-exp__header {
  background: var(--m-fc-bg, #4d5848);
  padding: 64px 88px;
}

.m-fc-exp__title {
  margin: 0;
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  font-size: 34px;
  line-height: 45px;
  color: var(--m-fc-text, #ffffff);
  text-align: center;
}

.m-fc-exp__main {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.m-fc-exp__media {
  position: relative;
  min-height: 526px;
}

.m-fc-exp__media .m-feature-card__image,
.m-fc-exp__media .m-feature-card__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The overlay sits on top of the main video rather than filling the frame.
   Its own aspect ratio sets the height, so a portrait clip stays portrait. */
.m-fc-exp__media .m-fc-exp__video--pip {
  inset: auto;
  width: var(--m-fc-pip-w, 22%);
  height: auto;
  /* Width alone makes a portrait clip nearly as tall as the frame, so cap it.
     cover only bites once the cap does, so normally nothing is cropped. */
  max-height: 60%;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28);
  z-index: 1;
}
/* Scoped to the frame so these outrank the `inset: 0` that fills it. */
.m-fc-exp__media .m-fc-exp__video--top-left     { top: 20px; left: 20px; }
.m-fc-exp__media .m-fc-exp__video--top-right    { top: 20px; right: 20px; }
.m-fc-exp__media .m-fc-exp__video--bottom-left  { bottom: 20px; left: 20px; }
.m-fc-exp__media .m-fc-exp__video--bottom-right { bottom: 20px; right: 20px; }

/* Active entry picks the media */
.m-fc-exp__video {
  display: none;
}

.m-feature-card--experience.show-video .m-fc-exp__video {
  display: block;
}

.m-feature-card--experience.show-video .m-fc-exp__img {
  display: none;
}

.m-fc-exp__panel {
  background: var(--m-fc-bg, #4d5848);
  color: var(--m-fc-text, #ffffff);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 40px;
  padding: 40px 88px 80px;
}

.m-fc-exp__tabs {
  display: none;
}

.m-fc-exp__entries {
  max-width: 580px;
}

.m-fc-exp__entry {
  border-bottom: 1px solid rgba(241, 243, 241, 0.25);
}

/* Dividers only between entries — none below the last one */
.m-fc-exp__entry:last-child {
  border-bottom: 0;
}

.m-fc-exp__entry-head {
  display: flex;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 20px 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--m-fc-text, #ffffff);
  text-align: start;
}

.m-fc-exp__chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
}

.m-fc-exp__chevron svg {
  width: 11px;
  height: 19px;
}

.m-fc-exp__entry-label {
  font-family: 'Playfair Display', serif;
  font-weight: 500;
  font-size: 24px;
  line-height: 31px;
  /* Underline on hover, so it reads as something to click. */
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (hover: hover) {
  .m-fc-exp__entry-head:hover .m-fc-exp__entry-label {
    background-size: 100% 1px;
  }
}

/* 0fr/1fr rows animate the open/close without a fixed height */
.m-fc-exp__entry-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}

.m-fc-exp__entry.is-open .m-fc-exp__entry-body {
  grid-template-rows: 1fr;
}

.m-fc-exp__entry-text {
  overflow: hidden;
  margin-left: 48px; /* aligned under the label, past the chevron box */
}

.m-fc-exp__entry-text > * {
  margin: 0 0 12px;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 15px;
  line-height: 24px;
  letter-spacing: -0.45px;
  color: #f1f3f1;
}

/* Bottom spacing lives inside the clipped content (not a state-dependent
   padding) so open and closed entries measure the same height — otherwise
   the reserved min-height comes up 20px short and the media still jumps. */
@media (min-width: 700px) {
  .m-fc-exp__entry-text::after {
    content: '';
    display: block;
    height: 20px;
  }
}

.m-fc-exp__nav {
  display: none;
}

/* compound selector — .button-group sets 20px and wins otherwise */
.m-fc-exp__cta.button-group {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.m-fc-exp__cta .button {
  font-family: 'Instrument Sans', sans-serif !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  line-height: 1 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  padding: 16px 32px !important;
  min-height: 48px !important;
  border-radius: 50px !important;
  white-space: nowrap;
}

@media (max-width: 699px) {
  .m-fc-exp__header {
    padding: 40px 20px;
  }

  .m-fc-exp__title {
    font-size: 26px;
    line-height: 32px;
  }

  .m-fc-exp__main {
    grid-template-columns: 1fr;
  }

  .m-fc-exp__media {
    min-height: 0;
    aspect-ratio: 414 / 387;
  }

  .m-fc-exp__media .m-fc-exp__video--top-left     { top: 12px; left: 12px; }
  .m-fc-exp__media .m-fc-exp__video--top-right    { top: 12px; right: 12px; }
  .m-fc-exp__media .m-fc-exp__video--bottom-left  { bottom: 12px; left: 12px; }
  .m-fc-exp__media .m-fc-exp__video--bottom-right { bottom: 12px; right: 12px; }

  .m-fc-exp__panel {
    background: #ffffff;
    padding: 0;
    gap: 0;
  }

  .m-fc-exp__tabs {
    display: flex;
    width: 100%;
  }

  .m-fc-exp__tab {
    flex: 1;
    height: 64px;
    margin: 0;
    padding: 16px;
    border: 0;
    background: #f8f9f8;
    color: #4d5848;
    font-family: 'Playfair Display', serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 24px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
  }

  .m-fc-exp__tab.is-active {
    background: var(--m-fc-bg, #4d5848);
    color: #f1f3f1;
  }

  .m-fc-exp__content {
    position: relative;
    padding: 32px 24px 0;
  }

  .m-fc-exp__entries {
    max-width: none;
  }

  /* Stack entries in one grid cell: the container sizes to the tallest entry,
     so switching tabs never changes the height (no media/content jump). */
  .m-fc-exp__entries {
    display: grid;
  }

  .m-fc-exp__entry {
    grid-area: 1 / 1;
    visibility: hidden;
    border: 0;
  }

  .m-fc-exp__entry.is-open {
    visibility: visible;
  }

  .m-fc-exp__entry-head {
    display: none;
  }

  .m-fc-exp__entry-body {
    display: block;
  }

  .m-fc-exp__entry-text {
    margin: 0;
    padding-inline: 56px;
  }

  .m-fc-exp__entry-text > * {
    color: #868d87;
  }

  .m-fc-exp__nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 96px;
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 50%;
    background: #ffffff;
    color: #4d5848;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s;
  }

  .m-fc-exp__nav svg {
    width: 20px;
    height: 20px;
  }

  .m-fc-exp__nav--prev { left: 24px; }
  .m-fc-exp__nav--next { right: 24px; }

  .m-feature-card--experience.at-first .m-fc-exp__nav--prev,
  .m-feature-card--experience.at-last .m-fc-exp__nav--next {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s 0.25s;
  }

  .m-fc-exp__cta.button-group {
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding: 40px 24px 24px;
  }

  .m-fc-exp__cta .button {
    --button-background: 77 88 72 !important;
    --button-outline-color: 77 88 72 !important;
    --button-text-color: 241 243 241 !important;
  }
}
/* END_SECTION:m-feature-card */

/* START_SECTION:m-footer (INDEX:32) */
.m-footer {
  /* The design names these outright rather than deriving them from the scheme,
     so they are set here instead of tinting the scheme's cream text. */
  --m-footer-heading: #fff;
  --m-footer-muted: #a0a599;
  background: rgb(var(--background));
  color: var(--m-footer-heading);
}

.m-footer__inner {
  padding-block: 64px 40px;
  padding-inline: max(var(--og-gutter), calc((100% - 1336px) / 2));
}

.m-footer__cols {
  display: flex;
  justify-content: space-between;
  gap: 32px;
  align-items: flex-start;
}

/* H4: Playfair Display Medium 24/31 */
.m-footer__title {
  margin: 0;
  font-family: 'Playfair Display', serif;
  font-weight: 500;
  font-size: 24px;
  line-height: 31px;
  color: var(--m-footer-heading);
}

/* Paragraph Small: Instrument Sans 11/16, faded against the green. */
.m-footer__link,
.m-footer__contact-text,
.m-footer__subscribe-text,
.m-footer__credit {
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 400;
  font-size: 11px;
  line-height: 16px;
  color: var(--m-footer-muted);
}

/* Paragraph: Instrument Sans 15/24, -0.45px. Legal, credit and the
   subscribe line keep Figma's Paragraph Small. */
.m-footer__links .m-footer__link,
.m-footer__contact-text {
  font-size: 15px;
  line-height: 24px;
  letter-spacing: -0.45px;
}

.m-footer__link {
  text-decoration: none;
  transition: color 0.15s ease;
}
.m-footer__link:hover {
  color: var(--m-footer-heading);
}

/* Wide enough for the address to sit on one line beside its icon: at
   Paragraph the text runs to ~213px and the icon gutter takes 28 more. */
.m-footer__col--contact {
  flex: 0 0 auto;
  max-width: 280px;
}

.m-footer__contact {
  list-style: none;
  margin: 41px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 25px;
}
.m-footer__contact-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.m-footer__contact-icon {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--m-footer-muted);
}
.m-footer__contact-icon img {
  width: 16px;
  height: 16px;
  display: block;
  object-fit: contain;
}
.m-footer__contact-text--link {
  text-decoration: none;
  transition: color 0.15s ease;
}
.m-footer__contact-text--link:hover {
  color: var(--m-footer-heading);
}

/* Button small: 11/100%, 22% tracking. */
.m-footer__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 190px;
  height: 40px;
  margin-top: 24px;
  border: 1px solid rgb(255 255 255 / 0.6);
  border-radius: 50px;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 11px;
  letter-spacing: 2.42px;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--m-footer-heading);
  transition: background-color 0.15s ease;
}
.m-footer__btn:hover {
  background: rgb(255 255 255 / 0.1);
}

.m-footer__follow {
  margin-top: 64px;
}
.m-footer__social {
  margin-top: 33px;
}
.m-footer__social .social-media__list,
.m-footer__social ul {
  display: flex;
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.m-footer__social svg {
  width: 16px;
  height: 16px;
  color: var(--m-footer-muted);
  transition: color 0.2s ease;
}
.m-footer__social a:hover svg,
.m-footer__social a:focus-visible svg {
  color: var(--m-footer-heading);
}

/* Menu columns. details/summary gives the mobile accordion for free. */
.m-footer__col--menu {
  flex: 0 1 auto;
}
.m-footer__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: default;
  list-style: none;
}
.m-footer__summary::-webkit-details-marker {
  display: none;
}
.m-footer__chevron {
  display: none;
  width: 14px;
  height: 8px;
  flex: none;
  transition: transform 0.2s ease;
}

.m-footer__links {
  list-style: none;
  margin: 41px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.m-footer__col--brand {
  flex: 0 0 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  text-align: center;
}
.m-footer__logo,
.m-footer-wheel {
  width: 114px;
  height: auto;
  display: block;
}
/* The live theme draws the wheel in #efebe7, not the heading white. */
.m-footer-wheel {
  color: #efebe7;
}
/* The outer ring turns, as it does on the live site. view-box origin so it
   spins about the artwork's centre rather than the element's. */
.m-footer-wheel__ring {
  transform-box: view-box;
  transform-origin: 50% 50%;
  animation: m-footer-wheel-spin 80s linear infinite;
}
@keyframes m-footer-wheel-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .m-footer-wheel__ring {
    animation: none;
  }
}

.m-footer__rating {
  display: flex;
  align-items: center;
  gap: 8px;
}
.m-footer__rating-left {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  width: 80px;
}
.m-footer__rating-right {
  min-width: 58px;
}
.m-footer__google {
  width: 52px;
  height: auto;
  display: block;
}
.m-footer__stars {
  display: flex;
  gap: 4px;
}
.m-footer__star {
  width: 12px;
  height: 12px;
  color: rgb(255 255 255 / 0.35);
}
.m-footer__star.is-full {
  color: var(--m-footer-heading);
}
.m-footer__rating-right {
  display: flex;
  flex-direction: column;
  gap: 9px;
  text-align: start;
}
.m-footer__rating-word,
.m-footer__reviews {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 11px;
  line-height: 16px;
  color: var(--m-footer-heading);
}
.m-footer__reviews {
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}

.m-footer__subscribe {
  width: 200px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.m-footer__subscribe-text {
  margin: 0;
  text-align: center;
  color: var(--m-footer-heading);
}
.m-footer__form {
  position: relative;
  display: flex;
  height: 40px;
}
.m-footer__form {
  border: 1px solid #a0a599;
  border-radius: 8px;
}
.m-footer__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 38px;
  padding-inline: 8px;
  border: 0;
  border-radius: 8px 0 0 8px;
  background: transparent;
  color: var(--m-footer-heading);
  font-family: 'Instrument Sans', sans-serif;
  font-size: 11px;
  line-height: 16px;
}
.m-footer__input::placeholder {
  color: #868d87;
}
/* button. qualifier beats the theme reset [type="button"]{background:#0000} */
button.m-footer__submit {
  flex: none;
  /* The arrow is a block-level svg, so text-align cannot centre it. */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  /* 40 tall with the negative margins, so it covers the field's border edge
     to edge rather than leaving a sliver of it showing. */
  height: 40px;
  margin: -1px -1px -1px 0;
  border: 1px solid #a0a599;
  border-radius: 0 8px 8px 0;
  cursor: pointer;
  background: #a0a599;
  color: #fff;
}
button.m-footer__submit svg {
  width: 8.5px;
  height: 16px;
}
.m-footer__form-note {
  position: absolute;
  inset-block-start: 100%;
  margin: 4px 0 0;
  font-size: 11px;
}

/* Legal bar: full bleed, its own tint. */
.m-footer__bar {
  background: rgb(255 255 255 / 0.06);
}
.m-footer__bar-inner {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 13px;
  padding-inline: max(var(--og-gutter), calc((100% - 1336px) / 2));
}
.m-footer__legal {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 80px;
}
.m-footer__credit {
  margin: 0;
  display: flex;
  gap: 16px;
}

@media (max-width: 999px) {
  .m-footer__inner {
    padding-block: 40px 32px;
    padding-inline: 20px;
  }
  .m-footer__cols {
    flex-direction: column;
    /* stretch, or the columns shrink to their content and the button with them */
    align-items: stretch;
    gap: 0;
  }

  /* Mobile leads with the menus; desktop keeps Contact in the first column. */
  .m-footer__col--menu {
    order: 1;
  }
  .m-footer__col--contact {
    order: 2;
  }
  .m-footer__col--brand {
    order: 3;
  }

  /* Menu columns become accordions, each on its own divider. */
  .m-footer__col--menu {
    border-block-end: 1px solid rgb(255 255 255 / 0.25);
  }
  /* Mob-H4, not the desktop H4: Playfair SemiBold 18/24. */
  .m-footer__title {
    font-weight: 600;
    font-size: 18px;
    line-height: 24px;
  }
  .m-footer__summary {
    cursor: pointer;
    padding-block: 24px;
  }
  .m-footer__chevron {
    display: block;
  }
  .m-footer__col--menu[open] .m-footer__chevron {
    transform: rotate(180deg);
  }
  .m-footer__links {
    margin: 0 0 24px;
  }

  .m-footer__col--contact {
    max-width: none;
    padding-block-start: 24px;
  }
  .m-footer__contact {
    margin-top: 24px;
  }
  .m-footer__btn {
    width: 100%;
    margin-top: 32px;
  }
  .m-footer__follow {
    margin-top: 40px;
    text-align: center;
  }
  .m-footer__social {
    margin-top: 16px;
  }
  .m-footer__social ul {
    justify-content: center;
  }

  .m-footer__col--brand {
    flex: none;
    margin-top: 40px;
  }
  .m-footer__subscribe {
    width: 100%;
  }

  .m-footer__bar-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding-inline: 20px;
  }
  .m-footer__legal {
    justify-content: space-between;
    gap: 16px;
  }
  .m-footer__credit {
    justify-content: space-between;
  }
}

@media (prefers-reduced-motion: reduce) {
  .m-footer__chevron,
  .m-footer__link,
  .m-footer__btn {
    transition: none;
  }
}
/* END_SECTION:m-footer */

/* START_SECTION:m-get-inspired (INDEX:33) */
/* Tap-to-zoom. */
.m-get-inspired__tile--zoom {
  cursor: zoom-in;
}

/* Full-screen viewer (Figma 4027-48624 desktop, 4027-48641 mobile). A solid
   green panel, not an overlay. */
.gi-lb {
  position: fixed;
  inset: 0;
  z-index: 9999;
  /* A safety net only: the panel is sized to fit, so this should not engage. */
  overflow-y: auto;
  background: #4d5848;
  color: #fff;
  font-family: 'Instrument Sans', sans-serif;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.gi-lb[hidden] {
  display: none;
}
.gi-lb__panel {
  width: 700px;
  /* 100px each side keeps the arrows on screen at narrow desktop widths. */
  max-width: calc(100% - 200px);
  margin: 56px auto;
  text-align: center;
  /* One screen, no scrolling: the photo gives up whatever height the price,
     title, text and buttons need. */
  display: flex;
  flex-direction: column;
  /* A definite height, not a maximum: flex-grow only shares out free space,
     and a max-height creates none. */
  height: calc(100dvh - 112px);
  justify-content: center;
}
.gi-lb__figure {
  position: relative;
  /* Takes the height the text and buttons leave over, capped at the design's
     700. Absolute children then have a definite box to size against, which a
     flexed auto height does not give them. */
  flex: 1 1 0;
  min-height: 0;
  max-height: 700px;
}
/* The box is the photo, not a 700 square it sits inside: a letterboxed photo
   would show its own square corners inside the rounded box. Auto width and
   height with both maxima scales it down whole, never cropping a portrait the
   way the design's 700 square would. */
.gi-lb__img {
  position: absolute;
  inset: 0;
  margin: auto;
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  border-radius: 14px;
  transition: opacity 0.18s ease;
}
.gi-lb__img.is-fading {
  opacity: 0;
}
.gi-lb__price {
  margin: 24px 0 0;
  min-height: 24px;
  font-size: 15px;
  line-height: 24px;
  letter-spacing: -0.45px;
}
.gi-lb__title {
  /* The theme colours every heading green, which is this panel's background. */
  color: inherit;
  margin: 8px 0 0;
  font-family: 'Playfair Display', serif;
  font-weight: 500;
  font-size: 24px;
  line-height: 31px;
}
.gi-lb__text {
  margin: 24px 0 0;
  font-size: 15px;
  line-height: 24px;
  letter-spacing: -0.45px;
}
.gi-lb__text[hidden] {
  display: none;
}
.gi-lb__actions {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-top: 32px;
}
.gi-lb__btn {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding-inline: 32px;
  border: 1px solid #f1f3f1;
  border-radius: 50px;
  font-weight: 500;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 2.64px;
  text-transform: uppercase;
  text-decoration: none;
  color: #f1f3f1;
}
.gi-lb__btn--solid {
  background: #f1f3f1;
  color: #212121;
}
/* Alone (the gallery page drops the second), it hugs its label. */
.gi-lb__btn:only-child {
  flex: 0 0 auto;
}
.gi-lb__close,
.gi-lb__nav {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: none;
  color: #fff;
  cursor: pointer;
}
.gi-lb__close {
  top: 56px;
  right: 56px;
  width: 24px;
  height: 24px;
  padding: 0;
}
/* button. qualifier beats the theme reset [type="button"]{background:#0000} */
button.gi-lb__nav {
  position: absolute;
  top: 50%;
  width: 48px;
  height: 48px;
  margin-top: -24px;
  border-radius: 50%;
  background: #ffffff;
  color: #868d87;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
button.gi-lb__nav svg {
  width: 20px;
  height: 20px;
}
button.gi-lb__nav:hover,
button.gi-lb__nav:focus-visible {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16);
  outline: none;
}
/* 32px clear of the image, per the design. */
.gi-lb__nav--prev {
  left: -80px;
}
.gi-lb__nav--next {
  right: -80px;
}

@media (max-width: 699px) {
  /* Mobile: full-bleed photo, text left aligned, arrows over the image. */
  .gi-lb__panel {
    width: 100%;
    max-width: none;
    margin: 56px 0 0;
    padding: 0 20px 40px;
    text-align: start;
  }
  .gi-lb__panel {
    display: block;
    height: auto;
  }
  .gi-lb__figure {
    display: block;
    max-height: none;
    margin-inline: -20px;
  }
  .gi-lb__img {
    position: static;
    margin: 0;
    width: 100%;
    height: auto;
    max-height: min(700px, 70vh);
    object-fit: contain;
  }
  .gi-lb__img {
    border-radius: 0;
  }
  .gi-lb__title {
    font-weight: 600;
    font-size: 18px;
    line-height: 24px;
  }
  .gi-lb__text {
    margin-top: 16px;
  }
  .gi-lb__close {
    top: 16px;
    right: 20px;
  }
  .gi-lb__nav--prev {
    left: 20px;
  }
  .gi-lb__nav--next {
    right: 20px;
  }
  .gi-lb__actions {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 20px;
  }
  .gi-lb__btn {
    flex: 0 0 auto;
  }
}

.m-get-inspired {
  padding-inline: var(--og-gutter);
  max-width: 1512px;
  margin-inline: auto;
}


.m-get-inspired__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  padding: 64px 88px;
  text-align: center;
}
.m-get-inspired__heading--grouped {
  margin: 0;
  font-family: "Playfair Display", serif;
  font-weight: 400;
  font-size: 34px;
  line-height: 45px;
  color: rgb(var(--text-color, 77 88 72));
}
.m-get-inspired__subheading {
  margin: 0;
  max-width: 680px;
  font-family: "Instrument Sans", system-ui, sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 24px;
  letter-spacing: -0.45px;
  color: #868d87;
}
@media (max-width: 699px) {
  .m-get-inspired__header {
    padding: 40px 20px;
    gap: 24px;
  }
  .m-get-inspired__heading--grouped {
    font-size: 26px;
    line-height: 32px;
    font-weight: 500;
  }
}

.m-get-inspired__grid {
  display: flex;
  gap: 24px;
}

/* One repeat of the 8-tile layout. Batches stack with the same 24px rhythm as
   the tiles inside them. */
.m-get-inspired__batch + .m-get-inspired__batch {
  margin-top: 24px;
}

.m-get-inspired__more-wrap {
  display: flex;
  justify-content: center;
  padding-top: 32px;
}

/* button. qualifier beats the theme reset [type="button"]{background:#0000} */
button.m-get-inspired__more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 32px;
  border: 0;
  border-radius: 50px;
  background: #4d5848;
  color: #f1f3f1;
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 2.64px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s ease;
}

button.m-get-inspired__more:hover {
  background: #3a4337;
}

/* Mobile grid is rendered alongside the desktop one; hidden until mobile. */
.m-get-inspired__grid--mobile {
  display: none;
}

.m-get-inspired__col {
  display: flex;
  flex-direction: column;
  gap: 24px;
  flex: 1 1 0;
  min-width: 0;
}

/* The CTA is excluded: the design's own heights already add up to a flush
   column (347+441+276+48 = 273+496+295+48), so it never needs to grow. Letting
   it grow made it swallow the shortfall whenever a batch ran short of photos. */
.m-get-inspired__grid--desktop .m-get-inspired__col > :last-child:not(.m-get-inspired__cta) {
  flex: 1 0 auto;
}

.m-get-inspired__tile {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.04);
}

.m-get-inspired__tile {
  aspect-ratio: var(--r-d, 1);
}

.m-get-inspired__cta {
  aspect-ratio: 429 / 276;
  container-type: inline-size;
}
/* Tablet columns make the tile ~220-300px wide; the desktop type needs ~280px
   of height, so it scales down with the tile. Phones keep their own rules. */
@media (min-width: 700px) {
  @container (max-width: 330px) {
    .m-get-inspired__cta .m-get-inspired__cta-inner {
      gap: 12px;
      padding: 16px;
    }
    .m-get-inspired__cta .m-get-inspired__cta-title {
      font-size: 20px;
      line-height: 26px;
    }
    .m-get-inspired__cta .m-get-inspired__cta-btn {
      height: 32px;
      padding: 0 16px;
      font-size: 10px;
      letter-spacing: 0.22em;
    }
  }
}

.m-get-inspired__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.m-get-inspired__image--placeholder {
  background: linear-gradient(135deg, #efebe7, #d8d0c8);
}

.m-get-inspired__tile:hover .m-get-inspired__image {
  transform: scale(1.04);
}

/* Sliding hover info — exact Queensmith .sliding-card mechanism:
   panel parked just BELOW the image (top: 100%) and slides up by its
   own height (translateY(-100%)) on hover. Only as tall as its content
   (subtitle + title + 15px padding), so it's a thin strip, never a big
   overlay. Our green instead of Queensmith's navy. */
.m-get-inspired__info {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  padding: 15px 18px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: #F4EFE6;
  background: #4D5848;
  transition: transform 0.5s ease;
  pointer-events: none;
}

/* Desktop: hover. Mobile: press-and-hold (:active) so the slide-up
   works reliably on touch (Queensmith leans on :hover, which is flaky
   on Android). */
.m-get-inspired__tile--has-info:hover .m-get-inspired__info,
.m-get-inspired__tile--has-info:focus-visible .m-get-inspired__info,
.m-get-inspired__tile--has-info:active .m-get-inspired__info {
  transform: translateY(-100%);
}

.m-get-inspired__info-subtitle {
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.3;
  letter-spacing: 0.02em;
  color: #F4EFE6;
}

.m-get-inspired__info-title {
  margin: 0;
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: #F4EFE6;
}

@media (prefers-reduced-motion: reduce) {
  .m-get-inspired__info { transition: none; }
}

.m-get-inspired__cta {
  background: #4d5848;
  color: #efebe7;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}

.m-get-inspired__cta:hover {
  background: #3a4337;
}

.m-get-inspired__cta-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
  padding: 37px 39px;
}

.m-get-inspired__cta-title {
  margin: 0;
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  font-style: normal;
  font-size: 34px;
  line-height: 45px;
  letter-spacing: 0;
  text-align: center;
  color: #ffffff;
}

.m-get-inspired__cta:hover .m-get-inspired__cta-title,
.m-get-inspired__cta:focus-visible .m-get-inspired__cta-title {
  color: #ffffff;
}

.m-get-inspired__cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 2.64px;
  text-transform: uppercase;
  padding: 0 32px;
  border-radius: 50px;
  /* Matches the --wf token in custom.css, which repaints this button with
     !important for the wipe-fill hover. */
  border: 1px solid #f1f3f1;
  color: #f1f3f1;
}

@media (max-width: 699px) {
  .m-get-inspired {
    padding-inline: 20px;
  }

  /* heading spacing via .og-h3 */

  .m-get-inspired__grid--desktop {
    display: none;
  }

  .m-get-inspired__grid--mobile {
    display: flex;
    gap: 8px;
    align-items: stretch; /* both columns equal height → bottom-aligned */
  }

  .m-get-inspired__grid--mobile .m-get-inspired__col {
    gap: 8px;
  }

  .m-get-inspired__tile {
    width: 100%;
    /* Mobile ratio per image (--r-m), falling back to the desktop ratio. */
    aspect-ratio: var(--r-m, var(--r-d, 1));
  }

  .m-get-inspired__grid--mobile .m-get-inspired__col > :last-child:not(.m-get-inspired__cta) {
    flex: 1 0 auto;
  }

  .m-get-inspired__image {
    height: 100%;
  }

  .m-get-inspired__cta {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .m-get-inspired__cta-inner {
    padding: 16px;
    gap: 16px;
  }

  .m-get-inspired__cta-title {
    font-family: 'Instrument Sans', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
  }

  .m-get-inspired__cta-btn {
    height: 32px;
    padding: 0 16px;
    font-size: 10px;
    letter-spacing: 0.22em;
  }
}
/* END_SECTION:m-get-inspired */

/* START_SECTION:m-google-reviews (INDEX:34) */
.m-google-reviews {
  max-width: 1512px;
  margin-inline: auto;
  padding-inline: var(--og-gutter);
}

.m-google-reviews__inner {
  display: flex;
  align-items: center;
  gap: 88px;
}

/* Rating summary */
.m-google-reviews__summary {
  flex: 0 0 172px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.m-google-reviews__brand {
  display: flex;
  align-items: center;
  gap: 7px;
}

.m-google-reviews__logo {
  width: 89px;
  height: auto;
  display: block;
}

.m-google-reviews__brand-label {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 15px;
  line-height: 24px;
  letter-spacing: -0.03em;
  color: #4d5848;
}

.m-google-reviews__rating,
.m-google-reviews__stars {
  display: flex;
  align-items: center;
  gap: 8px;
}

.m-google-reviews__stars {
  gap: 1px;
  color: #4d5848;
}

.m-google-reviews__star {
  display: block;
}

.m-google-reviews__star--empty {
  color: #868d87;
}

.m-google-reviews__rating-value,
.m-google-reviews__count {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 15px;
  line-height: 24px;
  letter-spacing: -0.03em;
  color: #868d87;
}

/* Carousel: arrow · track · arrow so cards can never slide under the arrows */
.m-google-reviews__carousel-wrapper {
  display: flex;
  align-items: center;
  gap: 40px;
  flex: 1 1 0;
  min-width: 0;
}

.m-google-reviews__list {
  display: flex;
  gap: 40px;
  list-style: none;
  margin: 0;
  flex: 1 1 0;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.m-google-reviews__list::-webkit-scrollbar {
  display: none;
}

.m-google-reviews__nav {
  flex: 0 0 auto;
  display: block;
}

scroll-carousel.m-google-reviews__list {
  scroll-snap-type: x mandatory;
}

/* Review card — 3 across; extra reviews overflow and scroll */
.m-google-reviews__card {
  flex: 0 0 calc((100% - 80px) / 3);
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  scroll-snap-align: start;
}

.m-google-reviews__name {
  margin: 0;
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 26px;
  color: #4d5848;
}

.m-google-reviews__meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.m-google-reviews__date {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 15px;
  line-height: 24px;
  letter-spacing: -0.03em;
  color: #868d87;
}

.m-google-reviews__text {
  margin: 0;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 15px;
  line-height: 24px;
  letter-spacing: -0.03em;
  color: #4d5848;
}

.m-google-reviews__read-more {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 15px;
  line-height: 24px;
  letter-spacing: -0.03em;
  color: #868d87;
  text-decoration: none;
}

.m-google-reviews__read-more:hover {
  text-decoration: underline;
}

.m-google-reviews__nav .circle-button {
  --circle-button-size: 3rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

@media (max-width: 999px) {
  .m-google-reviews {
    padding-inline: 5vw;
  }

  .m-google-reviews__inner {
    gap: 40px;
  }

  .m-google-reviews__card {
    flex: 0 0 calc((100% - 40px) / 2);
  }
}

@media (max-width: 699px) {
  .m-google-reviews__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
  }

  .m-google-reviews__summary {
    flex: 0 0 auto;
  }

  .m-google-reviews__carousel-wrapper {
    width: 100%;
  }

  .m-google-reviews__list {
    padding-inline: 0;
    gap: 24px;
  }

  .m-google-reviews__card {
    flex: 0 0 80vw;
  }

  .m-google-reviews__nav {
    display: none;
  }
}
/* END_SECTION:m-google-reviews */

/* START_SECTION:m-grown-diamonds (INDEX:35) */
/* Full-bleed video band — no side gutters, max-width or rounded corners
   on either device. */
.m-grown-diamonds {
  padding-inline: 0;
  max-width: none;
  margin-inline: 0;
}

/* Height matches m-slideshow video: desktop calc(100vw * 0.37) */
.m-grown-diamonds__inner {
  position: relative;
  border-radius: 0;
  overflow: hidden;
  isolation: isolate;
  height: calc(100vw * 0.37);
  min-height: 460px;
  display: flex;
  align-items: center;
}

.m-grown-diamonds__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

.m-grown-diamonds__bg--placeholder {
  background: linear-gradient(135deg, #4d5848, #2a3025);
}

.m-grown-diamonds__bg--video {
  object-fit: cover;
}

.m-grown-diamonds__bg--embed {
  border: 0;
  pointer-events: none;
}

.m-grown-diamonds__bg--desktop {
  display: none;
}

@media (min-width: 700px) {
  .m-grown-diamonds__bg--mobile {
    display: none;
  }
  .m-grown-diamonds__bg--desktop {
    display: block;
  }
}

@media (max-aspect-ratio: 16/9) {
  .m-grown-diamonds__bg--embed {
    width: 177.78vh;
    height: 100%;
    left: 50%;
    transform: translateX(-50%);
  }
}

/* Award badges, same row as the homepage hero: bottom left, on the logo gutter. */
.m-grown-diamonds__awards {
  position: absolute;
  inset-inline: 0;
  bottom: 40px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  padding-inline: max(var(--og-gutter), calc((100% - 1336px) / 2));
  z-index: 3;
  pointer-events: none;
}

.m-grown-diamonds__award {
  height: 88px;
  width: auto;
  display: block;
}

@media (max-width: 999px) {
  .m-grown-diamonds__awards {
    bottom: 24px;
    padding-inline: 32px;
  }
  .m-grown-diamonds__award {
    height: auto;
    max-height: 80px;
    max-width: 47%;
    object-fit: contain;
  }
}

.m-grown-diamonds__overlay {
  position: absolute;
  inset: 0;
  background: var(--m-grown-overlay, rgba(0, 0, 0, 0.2));
  z-index: -1;
}

.m-grown-diamonds__play {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  z-index: 1;
  padding: 0;
  border: 0;
  background: none;
  color: var(--m-grown-play, #fff);
  cursor: pointer;
  line-height: 0;
  filter: drop-shadow(0 2px 5px rgb(0 0 0 / 0.1));
  transition: scale .2s ease-in-out, opacity .2s ease-in-out;
}

.m-grown-diamonds__play:hover {
  scale: 1.1;
}

.m-grown-diamonds__play svg {
  width: 48px;
  height: 48px;
}

@media (min-width: 700px) {
  .m-grown-diamonds__play svg {
    width: 64px;
    height: 64px;
  }
}

.m-grown-diamonds.is-playing .m-grown-diamonds__play,
.m-grown-diamonds.is-playing .m-grown-diamonds__content,
.m-grown-diamonds.is-playing .m-grown-diamonds__overlay {
  opacity: 0;
  pointer-events: none;
}

.m-grown-diamonds__content {
  color: var(--m-grown-text, #F4EFE6);
  padding: 64px 56px;
  /* Half the section: the inner's padding is symmetric, so 50% ends on the
     screen's midline. The floor keeps the heading on two lines. */
  max-width: max(50%, 640px);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Desktop: align the overlaid text to the homepage gutter (logo line). The bg
   video/overlay are position:absolute, so padding on __inner doesn't move them. */
@media (min-width: 1000px) {
  .m-grown-diamonds__inner {
    padding-inline: max(var(--og-gutter), calc((100% - 1336px) / 2));
  }
  .m-grown-diamonds__content {
    padding-inline: 0;
  }
}

/* Button text-big eyebrow: 12/100%, ls 22%, weight 500 */
.m-grown-diamonds__subheading {
  margin: 0;
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 100%;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* H1 token: 60/70 Playfair 400, ls -2%. Base is roman; only the
   <em>-wrapped word renders italic (schema hint). */


.m-grown-diamonds__title em {
  font-style: italic;
}

/* Type on the <p> too — beats the global `p { font-size: var(--text-base) }`. */
.m-grown-diamonds__body,
.m-grown-diamonds__body p {
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.03em;
}

.m-grown-diamonds__body {
  /* The content box is the only constraint now, so the paragraph runs the full
     half-screen rather than stopping short of it. */
  max-width: none;
}

.m-grown-diamonds__body p {
  margin: 0 0 8px;
}

.m-grown-diamonds__body p:last-child {
  margin-bottom: 0;
}

.m-grown-diamonds__cta {
  display: flex;
  gap: 24px; /* identical to the slideshow hero button group */
  margin-top: 36px; /* + 20px content gap = 56px below the body */
  flex-wrap: wrap;
}

.m-grown-diamonds__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 100%;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 17px 32px 16px;
  border-radius: 50px;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}

.m-grown-diamonds__btn--solid {
  background: #efebe7;
  color: #4d5848;
}

.m-grown-diamonds__btn--solid:hover {
  background: #ffffff;
}

.m-grown-diamonds__btn--outline {
  background: transparent;
  color: var(--m-grown-text, #F4EFE6);
  border: 1px solid currentColor;
}

.m-grown-diamonds__btn--outline:hover {
  background: rgba(255, 255, 255, 0.1);
}

@media (max-width: 999px) {
  .m-grown-diamonds__content {
    padding: 48px 32px;
    max-width: 560px;
  }
}

@media (max-width: 699px) {
  .m-grown-diamonds__awards {
    padding-inline: 24px;
  }
  /* stay full-bleed on mobile too — no side padding or rounded corners */
  .m-grown-diamonds {
    padding-inline: 0;
  }

  .m-grown-diamonds__inner {
    border-radius: 0;
    align-items: flex-end;
  }

  .m-grown-diamonds__content {
    padding: 32px 24px 64px;
    max-width: 100%;
    gap: 16px;
  }

  /* The badges sit 24px off the bottom and are ~80px tall, so the text has to
     stop above them. Same reservation the homepage hero makes. */
  .m-grown-diamonds--awards .m-grown-diamonds__content {
    padding-bottom: 120px;
  }

  .m-grown-diamonds__subheading {
    font-size: 11px;
    letter-spacing: 0.14em;
  }

  .m-grown-diamonds__body,
  .m-grown-diamonds__body p {
    font-size: 15px;
    line-height: 20px;
  }

  .m-grown-diamonds__cta {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px; /* match slideshow mobile button gap */
    margin-top: 40px; /* + 16px content gap = 56px below the body */
  }

  .m-grown-diamonds__btn {
    text-align: center;
    font-size: 12px;
    letter-spacing: 0.14em;
    padding: 15px 28px 14px;
  }
}
/* END_SECTION:m-grown-diamonds */

/* START_SECTION:m-instagram (INDEX:36) */
.m-instagram {
  background: var(--m-ig-bg, #F8F9F8);
  color: var(--m-ig-text, #4D5848);
  padding-inline: 0;
  overflow: hidden;
  box-sizing: border-box;
}

/* Desktop: inset the marquee to the homepage gutter (logo line) so tiles clip at
   88px like every other section, instead of bleeding to the screen edge. */
@media (min-width: 1000px) {
  .m-instagram {
    padding-inline: max(var(--og-gutter), calc((100% - 1336px) / 2));
  }
}

.m-instagram__heading { /* type + spacing via .og-h3 */
}

/* Horizontal marquee — full-bleed edge-to-edge regardless of the section's
   gutter (the heading keeps the section's padding). width 100vw + the
   50%-50vw left margin pulls it out to the viewport edges at every breakpoint. */
.m-instagram__marquee {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
  margin-bottom: 0;
  /* Horizontal swipes drag the strip; vertical ones still scroll the page. */
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.m-instagram__marquee:active {
  cursor: grabbing;
}

.m-instagram__track {
  display: flex;
  flex-wrap: nowrap;
  gap: 32px;
  width: max-content;
  will-change: transform;
}

.m-instagram__tile {
  position: relative;
  flex: 0 0 auto;
  width: 192px;
  aspect-ratio: 192 / 256;
  border-radius: 14px;
  overflow: hidden;
  display: block;
  text-decoration: none;
  color: inherit;
  background: rgba(77, 88, 72, 0.06);
}

.m-instagram__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.m-instagram__image--placeholder {
  background: linear-gradient(135deg, #efebe7, #d8d0c8);
}

.m-instagram__tile:hover .m-instagram__image,
.m-instagram__tile:focus-visible .m-instagram__image {
  transform: scale(1.04);
}

.m-instagram__handle {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  max-width: calc(100% - 32px);
  height: 32px;
  display: block; /* not flex: the ellipsis only works on a block */
  line-height: 32px;
  background: rgba(255, 255, 255, 0.8); /* same as the og-pill labels */
  color: #4D5848;
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 0 16px;
  border-radius: 50px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.m-instagram__footer {
  padding-top: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.m-instagram__subheading {
  margin: 0;
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 26px;
  color: #4D5848;
}

.m-instagram__profile {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  color: #868D87;
  text-decoration: none;
}

.m-instagram__profile svg {
  width: 16px;
  height: 16px;
}

.m-instagram__profile-handle {
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 100%;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding-bottom: 2px;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (hover: hover) {
  .m-instagram__profile:hover .m-instagram__profile-handle {
    background-size: 100% 1px;
  }
}

/* Mobile */
@media (max-width: 699px) {
  /* White on mobile; desktop keeps the off-white background_color setting */
  .m-instagram {
    background: #ffffff;
    padding-inline: 20px;
  }

  /* heading spacing via .og-h3 */

  .m-instagram__tile {
    width: 192px;
  }

  .m-instagram__track {
    gap: 24px;
  }

  .m-instagram__handle {
    bottom: 12px;
    height: 28px;
    line-height: 28px;
    padding: 0 12px;
    font-size: 9px;
  }
}
/* END_SECTION:m-instagram */

/* START_SECTION:m-link-cards (INDEX:37) */
.shopify-section--m-link-cards { background-color: #FFFFFF; }

.m-link-cards {
  /* Unified homepage container (matches header/logo gutter). */
  padding-inline: max(var(--og-gutter), calc((100% - 1336px) / 2));
}

.m-link-cards__heading { /* type + spacing via .og-h3 */
}

.m-link-cards__carousel {
  position: relative;
}

/* Carousel nav arrows. Hidden by default; shown on mobile (always) and on the
   desktop 3-up scroller (>3 cards). Visual lives here so both contexts share it. */
.m-link-cards__nav {
  display: none;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: var(--lc-arrow-top, 41%);
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 0;
  background: #ffffff;
  color: #868D87;
  cursor: pointer;
  padding: 0;
  z-index: 2;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.m-link-cards__nav svg { width: 20px; height: 20px; }
.m-link-cards__nav--next { right: -16px; }
.m-link-cards__nav--prev { left: -16px; }
/* Class, not [hidden] — theme.css [hidden] display:none!important kills the fade */
.m-link-cards__nav.is-gone {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s 0.25s;
}
.m-link-cards__nav:hover,
.m-link-cards__nav:focus-visible {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16);
  outline: none;
}

.m-link-cards__grid {
  display: grid;
  gap: 24px;
  /* Slide timing = 500ms (the arrow scroll is animated over 500ms in JS; this
     declares the duration so it's also reported by getComputedStyle). */
  transition: transform 0.5s ease;
}

.m-link-cards__grid--cols-1 { grid-template-columns: minmax(0, 1fr); }
.m-link-cards__grid--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.m-link-cards__grid--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.m-link-cards__grid--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Desktop: >3 cards -> 3-up horizontal scroller with arrows (Client Stories). */
@media (min-width: 700px) {
  .m-link-cards__grid--scroll {
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 48px) / 3); /* exactly 3 visible, 24px gaps */
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: 8px;
  }
  .m-link-cards__grid--scroll::-webkit-scrollbar { display: none; }
  .m-link-cards__grid--scroll .m-link-cards__card { scroll-snap-align: start; }
  .m-link-cards__carousel:has(.m-link-cards__grid--scroll) .m-link-cards__nav {
    display: inline-flex;
  }
  .m-link-cards__carousel:has(.m-link-cards__grid--scroll) .m-link-cards__nav--prev { left: -24px; }
  .m-link-cards__carousel:has(.m-link-cards__grid--scroll) .m-link-cards__nav--next { right: -24px; }
}

.m-link-cards__card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  text-decoration: none;
  color: inherit;
}

.m-link-cards__media {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.04);
}

.m-link-cards__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.m-link-cards__image--placeholder {
  background: linear-gradient(135deg, #efebe7, #d8d0c8);
}

a.m-link-cards__card:hover .m-link-cards__image,
.m-link-cards__card--video:hover .m-link-cards__image {
  transform: scale(1.04);
}

/* Video card: reset the <button> to look like the other cards. */
.m-link-cards__card--video {
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  text-align: inherit;
  cursor: pointer;
  align-items: stretch;
}

.m-link-cards__watch {
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding-inline: 14px;
  border-radius: 50px;
  background: #F8F9F8;
  color: #4D5848;
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 400;
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  z-index: 1;
  transition: background 0.3s ease, transform 0.3s ease;
}
.m-link-cards__card--video:hover .m-link-cards__watch {
  background: #ffffff;
  transform: translateX(-50%) scale(1.04);
}

/* Modal */
.m-link-cards__modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.m-link-cards__modal[hidden] { display: none; }
.m-link-cards__modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
}
.m-link-cards__modal-dialog {
  position: relative;
  width: min(1000px, 100%);
  max-height: 90vh;
}
.m-link-cards__modal-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
}
.m-link-cards__modal-stage iframe,
.m-link-cards__modal-stage video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.m-link-cards__modal-close {
  position: absolute;
  top: -44px;
  right: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}
.m-link-cards__modal-close:hover { background: rgba(255, 255, 255, 0.3); }
.m-link-cards__modal-close svg { width: 18px; height: 18px; }

.m-link-cards__title {
  margin: 0;
  width: fit-content;
  margin-inline: auto;
  text-align: center;
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 31px;
  letter-spacing: -0.01em;
  color: #4D5848;
  /* underline draws in on hover (same as announcement bar) */
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (hover: hover) {
  .m-link-cards__card:hover .m-link-cards__title {
    background-size: 100% 1px;
  }
}

@media (max-width: 699px) {
  /* vertical padding comes from the section setting (padding_*_mobile) + .og-h3;
     no inner padding-block here, to avoid double padding. */
  .m-link-cards {
    padding-inline: 32px;
  }

  /* heading spacing via .og-h3 */

  /* Carousel matches m-shop-by-category: 32px gutter, card = image width
     (content - 32) flush to the gutter, next card peeks with one nav arrow. */
  .m-link-cards__grid,
  .m-link-cards__grid--cols-3,
  .m-link-cards__grid--cols-4,
  .m-link-cards__grid--cols-2 {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    grid-template-columns: none;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    /* 48px inline padding = the centring margin, so the active card (incl. the
       first/last) sits centred with a symmetric peek — and the seam between
       active card and peek lands at the same x for every card. */
    padding-inline: 48px;
    margin-inline: -32px;
    padding-bottom: 8px;
    scrollbar-width: none;
  }

  .m-link-cards__grid::-webkit-scrollbar {
    display: none;
  }

  .m-link-cards__card {
    gap: 24px;
    scroll-snap-align: center;
  }

  /* Mob-H3 for card title */
  .m-link-cards__title {
    font-size: 22px;
    line-height: 28px;
  }

  /* Prev/next nav arrows for the carousel. */
  button.m-link-cards__nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: var(--lc-arrow-top, 41%);
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 0;
    background: #ffffff;
    color: #868D87;
    cursor: pointer;
    padding: 0;
    z-index: 2;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }

  button.m-link-cards__nav svg {
    width: 20px;
    height: 20px;
  }

  button.m-link-cards__nav--next {
    right: -16px;
  }
  button.m-link-cards__nav--prev {
    left: -16px;
  }
  button.m-link-cards__nav.is-gone {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s 0.25s;
  }

  button.m-link-cards__nav:hover,
  button.m-link-cards__nav:focus-visible {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16);
    outline: none;
  }
}
/* END_SECTION:m-link-cards */

/* START_SECTION:m-promise (INDEX:39) */
.m-promise {
  padding-inline: var(--og-gutter);
}

.m-promise__inner {
  display: flex;
  align-items: center;
  gap: 32px;
}

/* H3 token: Playfair 34/45 */
.m-promise__heading {
  flex: 0 0 auto;
  margin: 0;
  white-space: nowrap;
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  font-size: 34px;
  line-height: 45px;
  letter-spacing: 0;
  color: #4d5848;
}

.m-promise__carousel-wrapper {
  flex: 1 1 auto;
  min-width: 0;
}

.m-promise__list {
  display: flex;
  gap: 16px;
  margin: 0;
  padding: 0;
  scroll-snap-type: x mandatory;
  /* Fill the full width: 16px is the MIN gap; extra space spreads the cards
     evenly. When the row overflows (narrow), gap collapses to 16px and scrolls. */
  justify-content: space-between;
}

.m-promise__card {
  flex: 0 0 203px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px;
  background: #fff;
  border-radius: 14px;
  scroll-snap-align: start;
}

.m-promise__icon {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
}

.m-promise__leaf {
  width: 24px;
  height: 24px;
  color: #a0a599;
}

.m-promise__icon-img {
  width: 24px;
  height: auto;
}

/* Paragraph token: Instrument Sans 15/24, ls -0.45px */
.m-promise__label {
  margin: 0;
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 24px;
  letter-spacing: -0.45px;
  color: #4d5848;
}

.m-promise__nav .circle-button {
  --circle-button-background: 255 255 255;
  --circle-button-text-color: 77 88 72;
  --circle-button-size: 3rem;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.m-promise__nav .circle-button[disabled] {
  opacity: 1;
  cursor: default;
}
@media screen and (pointer: fine) {
  /* Straddle the outer card edges (same as m-featured-collections .carousel-arrow):
     the 48px circle sits centred on the first/last card edge, half in the gutter. */
  .m-promise .floating-controls-container__control:first-child {
    inset-inline-start: -1.5rem;
  }
  .m-promise .floating-controls-container__control:last-child {
    inset-inline-end: -1.5rem;
  }
  .m-promise .floating-controls-container:not(:has(.is-scrollable)) .floating-controls-container__control {
    display: grid;
  }
}

/* Desktop: the row runs to the screen edge, so the card being scrolled past is
   cut by the screen and not by the gutter. The end padding keeps the gutter at
   the last card, and the arrow comes back inside the bleed. */
@media (min-width: 700px) {
  .m-promise__carousel-wrapper {
    margin-inline-end: calc(-1 * var(--og-gutter));
  }

  .m-promise__list {
    padding-inline-end: var(--og-gutter);
    scroll-padding-inline-end: var(--og-gutter);
  }

  .m-promise .floating-controls-container__control:last-child {
    inset-inline-end: 1.5rem;
  }
}

@media (max-width: 699px) {
  .m-promise {
    padding-inline: 20px;
  }

  .m-promise__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
  }

  /* Mob-H4 (18/24), not the site-wide H3: this row's heading sits close to the
     cards and the design sizes it to match them. */
  .m-promise__heading {
    white-space: normal;
    text-align: center;
    font-weight: 600;
    font-size: 18px;
    line-height: 24px;
  }

  .m-promise__nav {
    display: none;
  }

  .m-promise__carousel-wrapper {
    width: 100%;
  }

  /* The row runs edge to edge so the card being scrolled past is cut by the
     screen, not by the gutter. Padding + scroll-padding keep a 20px gutter at
     the two ends and at every snap position. */
  .m-promise__list {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 24px;
    margin-inline: -20px;
    padding-inline: 20px;
    scroll-padding-inline: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .m-promise__list::-webkit-scrollbar {
    display: none;
  }

  /* Keeps the design's 203px; snapping puts a card on the start gutter. */
  .m-promise__card {
    scroll-snap-align: start;
  }
}
/* END_SECTION:m-promise */

/* START_SECTION:m-promo-cards (INDEX:40) */
.m-promo-cards {
  /* Unified homepage container: 1336 content + 88px min gutters, matching the
     header/logo — max(88px, (100% - 1336px)/2). */
  padding-inline: max(var(--og-gutter), calc((100% - 1336px) / 2));
}

/* H3 token: 34/45 Playfair 400, ls 0 */
.m-promo-cards__heading { /* type + spacing via .og-h3 */
}

.m-promo-cards__grid {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 56px;
  max-width: 1336px;
  margin-inline: auto;
}
.m-promo-cards__card {
  flex: 1 1 0;
  max-width: 640px;
  min-width: 0;
}

.m-promo-cards__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  padding: 0 0 40px;
  background: var(--m-promo-cards-card-bg, #FFFFFF);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 3px 20px 0 rgba(0, 0, 0, 0.1);
}

.m-promo-cards__media {
  width: 100%;
  height: 364px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.04);
}

.m-promo-cards__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

/* Hover zoom (same as shop-by-category); media has overflow:hidden so it clips. */
@media (hover: hover) {
  .m-promo-cards__card:hover .m-promo-cards__image {
    transform: scale(1.04);
  }
}

.m-promo-cards__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 0;
  text-align: center;
  width: 100%;
}

/* H4 token: 24/31 Playfair 500, ls 0 */
.m-promo-cards__title {
  margin: 0;
  font-family: 'Playfair Display', serif;
  font-weight: 500;
  font-size: 24px;
  line-height: 31px;
  letter-spacing: 0;
  color: #4d5848;
}

/* Paragraph token: 15/20, ls -3%, color #868D87 */
.m-promo-cards__description {
  margin: 0;
  padding-inline: 24px;
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.03em;
  text-align: center;
  color: #868D87;
}

.m-promo-cards__cta {
  margin-top: 8px;
}

/* Button text-big token: Instrument Sans 500, 12/100%, ls 22%, UPPERCASE */
.m-promo-cards__cta .button.button {
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 100%;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 17px 32px 16px;
  border-radius: 50px;
  border: 1px solid transparent;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.m-promo-cards__cta .link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 100%;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #4d5848;
  text-decoration: none;
  padding: 17px 32px 16px;
  border-radius: 50px;
  background: transparent;
  transition: background 0.2s ease;
}

.m-promo-cards__cta .link:hover,
.m-promo-cards__cta .link:focus-visible {
  background: #f8f9f8;
}

/* Override the theme's hover that turns text into the (light) background color,
   which makes the label invisible on light-gray pills. Use brand green border + keep dark text. */
.m-promo-cards__cta .button:hover,
.m-promo-cards__cta .button:focus-visible {
  color: rgb(var(--button-text-color, 77 88 72)) !important;
  background: rgb(var(--button-background, 248 249 248)) !important;
  border-color: #4d5848 !important;
  background-image: none !important;
  background-size: auto !important;
}

@media (max-width: 999px) {
  .m-promo-cards__grid {
    gap: 24px;
  }

  .m-promo-cards__card {
    flex: 1 1 0;
    max-width: 50%;
  }

  .m-promo-cards__body {
    padding: 36px 24px;
    gap: 16px;
  }

  .m-promo-cards__title {
    font-size: 28px;
  }
}

@media (max-width: 699px) {
  .m-promo-cards {
    padding-inline: 20px;
    padding-block: 20px;
  }

  .m-promo-cards__grid {
    flex-direction: column;
    gap: 32px;
  }

  .m-promo-cards__card {
    flex: 1 1 auto;
    max-width: 100%;
    width: 100%;
    gap: 32px;
    padding: 0 0 32px;
  }

  /* heading spacing via .og-h3 */

  .m-promo-cards__media {
    height: 213px;
  }

  .m-promo-cards__body {
    padding: 0 24px;
    gap: 16px;
  }

  /* Mob-H4 token: 22/28 Playfair weight 600 */
  .m-promo-cards__title {
    font-size: 22px;
    line-height: 28px;
    font-weight: 600;
  }

  /* Mob-paragraph token: 16/24 ls 0 */
  .m-promo-cards__description {
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0;
  }

  .m-promo-cards__cta {
    margin-top: 8px;
  }
  .m-promo-cards__cta .button,
  .m-promo-cards__cta .link {
    border: 1px solid #f8f9f8 !important;
    color: #4d5848 !important;
    padding: 17px 32px 16px !important;
    border-radius: 50px !important;
    min-height: 48px;
    font-size: 12px;
    letter-spacing: 0.22em;
  }
}
/* END_SECTION:m-promo-cards */

/* START_SECTION:m-quiz (INDEX:41) */
.m-quiz {
  width: 100%;
}

.m-quiz__inner {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 40px;
  padding-inline: clamp(24px, 5.8vw, 88px);
}

/* --qs scales the whole arrangement on narrower desktops; every desktop size
   below is the design's own, multiplied by it. */
.m-quiz__photos {
  --qs: 1;
  position: relative;
  flex: none;
}
.m-quiz__photos--left {
  width: calc(229.33px * var(--qs));
  height: calc(280.31px * var(--qs));
}
.m-quiz__photos--right {
  width: calc(229.33px * var(--qs));
  height: calc(283.76px * var(--qs));
}

/* Slot = the rotated footprint, photo centred in it. */
.m-quiz__slot {
  display: flex;
  align-items: center;
  justify-content: center;
}
.m-quiz__slot--1 {
  width: calc(229.33px * var(--qs));
  height: calc(280.31px * var(--qs));
}
.m-quiz__slot--2,
.m-quiz__slot--3 {
  position: absolute;
}
.m-quiz__slot--2 {
  width: calc(175.21px * var(--qs));
  height: calc(175.21px * var(--qs));
  inset-inline-start: 0;
  top: 0;
}
.m-quiz__slot--3 {
  width: calc(156.84px * var(--qs));
  height: calc(156.84px * var(--qs));
  inset-inline-start: calc(72.49px * var(--qs));
  top: calc(126.92px * var(--qs));
}

.m-quiz__img {
  display: block;
  flex: none;
  box-sizing: border-box;
  border: calc(4px * var(--qs)) solid #fff;
  border-radius: calc(12px * var(--qs));
  overflow: hidden;
}
.m-quiz__img > img,
.m-quiz__img > svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.m-quiz__img--1 {
  width: calc(204.27px * var(--qs));
  height: calc(261.22px * var(--qs));
  transform: rotate(5.73deg);
}
.m-quiz__img--2 {
  width: calc(160px * var(--qs));
  height: calc(160px * var(--qs));
  transform: rotate(-5.74deg);
}
.m-quiz__img--3 {
  width: calc(140px * var(--qs));
  height: calc(140px * var(--qs));
  transform: rotate(7.39deg);
}

.m-quiz__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  width: 680px;
  max-width: 100%;
  text-align: center;
}

/* The row bottom-aligns so the photo columns line up; without a button the text
   column is short, so centre it to keep equal space above and below. */
.m-quiz--no-button .m-quiz__content {
  align-self: center;
}

/* Type comes from the shared .og-h3 class; the column already carries the padding. */
.m-quiz__heading {
  margin: 0;
}
.m-quiz__heading.og-h3 {
  padding: 0;
}

.m-quiz__text > * {
  margin: 0;
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 24px;
  letter-spacing: -0.45px;
}

/* Button big token: Instrument Sans Medium 12, ls 2.64px, uppercase pill */
.m-quiz__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 17px 32px 16px;
  border-radius: 50px;
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 2.64px;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  background: var(--wf);
  color: var(--wt);
}

/* 680 of copy plus two 229 photo columns and the gaps needs ~1400px; below that
   the photos shrink rather than squeezing the copy. At 0.78 the row still needs
   ~1270, which is where the stacked layout below takes over. */
@media (max-width: 1399px) {
  .m-quiz__photos {
    --qs: 0.78;
  }
}

/* Tablet keeps the desktop row: smaller photos, and the copy takes what is left. */
@media (min-width: 700px) and (max-width: 1279px) {
  .m-quiz__inner {
    gap: 24px;
    padding-inline: var(--og-gutter);
  }
  .m-quiz__photos {
    --qs: 0.7;
  }
  .m-quiz__content {
    flex: 1 1 0;
    min-width: 0;
    gap: 24px;
  }
}
@media (min-width: 700px) and (max-width: 999px) {
  .m-quiz__photos {
    --qs: 0.55;
  }
}

/* Mobile: one column, the first photo above the copy and the other two side by
   side under it, overlapping by 40px. The photos do not shrink at one rate
   between the two layouts, so these are the mobile design's own sizes. */
@media (max-width: 699px) {
  .m-quiz__inner {
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding-inline: 20px;
  }

  .m-quiz__photos {
    --qs: 1;
  }
  .m-quiz__photos--left,
  .m-quiz__slot--1 {
    width: 123.1px;
    height: 150.46px;
  }
  .m-quiz__img--1 {
    width: 109.65px;
    height: 140.21px;
  }

  .m-quiz__photos--right {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: auto;
    height: auto;
  }
  .m-quiz__slot--2,
  .m-quiz__slot--3 {
    position: static;
  }
  .m-quiz__slot--2 {
    width: 157.59px;
    height: 157.59px;
    margin-inline-end: -40px;
  }
  .m-quiz__slot--3 {
    width: 141.07px;
    height: 141.07px;
  }
  .m-quiz__img--2 {
    width: 143.91px;
    height: 143.91px;
  }
  .m-quiz__img--3 {
    width: 125.92px;
    height: 125.92px;
  }

  .m-quiz__content {
    gap: 24px;
    width: 100%;
  }
  /* Mob-paragraph drops the desktop tracking. */
  .m-quiz__text > * {
    letter-spacing: 0;
  }
}
/* END_SECTION:m-quiz */

/* START_SECTION:m-reasons (INDEX:42) */
.m-reasons {
  padding-inline: 20px;
}

.m-reasons__inner {
  max-width: 680px;
  margin-inline: auto;
}

/* Heading = H3: Playfair Regular 34/45, centred. */
.m-reasons__heading {
  margin: 0 0 40px;
  text-align: center;
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  font-size: 34px;
  line-height: 45px;
  color: #4d5848;
}

.m-reasons__item {
  border-top: 1px solid #e6e6e0;
}
.m-reasons__item:last-child {
  border-bottom: 1px solid #e6e6e0;
}

.m-reasons__summary {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 20px 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  color: inherit;
}

.m-reasons__tick {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
}

/* H5: Instrument Sans Regular 20/26. */
.m-reasons__title {
  flex: 1 1 auto;
  min-width: 0;
  font-family: 'Instrument Sans', system-ui, sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 26px;
  color: #4d5848;
}

.m-reasons__chevron {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: #4d5848;
  transition: transform 0.25s ease;
}
.m-reasons__summary[aria-expanded='true'] .m-reasons__chevron {
  transform: rotate(180deg);
}

/* Grid-rows reveal so the body animates open/closed. */
.m-reasons__body-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}
.m-reasons__summary[aria-expanded='true'] + .m-reasons__body-wrap {
  grid-template-rows: 1fr;
}
.m-reasons__body {
  overflow: hidden;
}

/* Body = Paragraph: Instrument Sans 15/24, grey; indented under the title. */
.m-reasons__body-inner {
  padding: 0 0 20px 40px;
  font-family: 'Instrument Sans', system-ui, sans-serif;
  font-size: 15px;
  line-height: 24px;
  letter-spacing: -0.45px;
  color: #868d87;
}
.m-reasons__body-inner p {
  margin: 0 0 8px;
}
.m-reasons__body-inner p:last-child {
  margin-bottom: 0;
}

@media (max-width: 699px) {
  .m-reasons__heading {
    font-size: 26px;
    line-height: 32px;
    margin-bottom: 24px;
  }
  .m-reasons__title {
    font-size: 18px;
    line-height: 24px;
  }
  .m-reasons__body-inner {
    padding-left: 0;
  }
}
/* END_SECTION:m-reasons */

/* START_SECTION:m-reviews-widget (INDEX:43) */
.m-reviews-widget .elfsight-wrap {
  padding: 0;
}

.m-reviews-widget__heading {
  margin: 0 0 24px;
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  font-size: 34px;
  line-height: 45px;
  letter-spacing: 0;
  text-transform: none;
  color: #4d5848;
}

.m-reviews-widget__button {
  margin-top: 32px;
}

@media (max-width: 699px) {
  .m-reviews-widget__heading {
    margin-bottom: 16px;
    font-size: 26px;
    line-height: 32px;
    font-weight: 500;
  }

  .m-reviews-widget__button {
    margin-top: 16px;
  }
}
/* END_SECTION:m-reviews-widget */

/* START_SECTION:m-shop-by-category (INDEX:44) */
.m-shop-by-category {
  /* Unified homepage container (matches header/logo gutter). */
  padding-inline: max(var(--og-gutter), calc((100% - 1336px) / 2));
  box-sizing: border-box;
}

.m-shop-by-category__carousel {
  position: relative;
}

button.m-shop-by-category__arrow {
  display: none;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: var(--sbc-arrow-top, 41%);
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 0;
  background: #ffffff;
  color: #868D87;
  cursor: pointer;
  padding: 0;
  z-index: 2;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  /* Queensmith-measured fade: 0.25s standard ease, flipped at click */
  transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

button.m-shop-by-category__arrow svg {
  width: 20px;
  height: 20px;
}

/* Desktop: 16px clear of the cards, in the page gutter. */
button.m-shop-by-category__arrow--next {
  right: -64px;
}
button.m-shop-by-category__arrow--prev {
  left: -64px;
}
/* Boundary: fade then disappear. Class, not [hidden] — theme.css [hidden]
   display:none!important kills the transition. */
button.m-shop-by-category__arrow.is-gone {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s 0.25s;
}

button.m-shop-by-category__arrow:hover,
button.m-shop-by-category__arrow:focus-visible {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16);
  outline: none;
}
.is-scroller button.m-shop-by-category__arrow {
  display: inline-flex;
}

.m-shop-by-category__heading { /* type + spacing via .og-h3 */
}

.m-shop-by-category__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 60px;
  /* Slide timing = 500ms (arrow scroll animated over 500ms in JS; declared here
     so getComputedStyle().transitionDuration also reports it). */
  transition: transform 0.5s ease;
}

.m-shop-by-category__grid[data-count='1'] { grid-template-columns: minmax(0, 1fr); }
.m-shop-by-category__grid[data-count='2'] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.is-scroller .m-shop-by-category__grid {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 120px) / 3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.is-scroller .m-shop-by-category__grid::-webkit-scrollbar {
  display: none;
}
@media (min-width: 700px) {
  .is-scroller .m-shop-by-category__card {
    scroll-snap-align: start;
  }
}

.m-shop-by-category__card {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding-bottom: 40px;
  text-decoration: none;
  color: inherit;
}

.m-shop-by-category__media {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.04);
}

.m-shop-by-category__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.m-shop-by-category__image--placeholder {
  background: linear-gradient(135deg, #efebe7, #d8d0c8);
}

.m-shop-by-category__card:hover .m-shop-by-category__image,
.m-shop-by-category__card:focus-visible .m-shop-by-category__image {
  transform: scale(1.04);
}

/* H4 token: 24/31 Playfair 500, ls 0 */
.m-shop-by-category__title {
  margin: 0;
  width: fit-content;
  margin-inline: auto;
  text-align: center;
  font-family: 'Playfair Display', serif;
  font-weight: 500;
  font-size: 24px;
  line-height: 31px;
  letter-spacing: 0;
  color: #4d5848;
  /* underline draws in on hover (same as announcement bar) */
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (hover: hover) {
  .m-shop-by-category__card:hover .m-shop-by-category__title {
    background-size: 100% 1px;
  }
}

@media (max-width: 699px) {
  /* No inner padding-block: vertical spacing is the wrapper's padding_*_mobile
     (settings) + .og-h3's 40px top. An inner value here would double them. */
  .m-shop-by-category {
    padding-inline: 20px;
  }

  /* heading spacing via .og-h3 */

  .m-shop-by-category__grid,
  .m-shop-by-category__grid[data-count='1'],
  .m-shop-by-category__grid[data-count='2'],
  .is-scroller .m-shop-by-category__grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    grid-template-columns: none;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    /* 48px inline padding = the centring margin, so the active card (incl. the
       first/last) sits centred with a symmetric peek — and the seam between
       active card and peek lands at the same x for every card. */
    padding-inline: 48px;
    margin-inline: -20px;
    padding-bottom: 8px;
    scrollbar-width: none;
  }

  .m-shop-by-category__grid::-webkit-scrollbar {
    display: none;
  }

  .m-shop-by-category__card {
    gap: 24px;
    padding: 0 0 32px;
    scroll-snap-align: center;
  }

  .m-shop-by-category__title {
    font-size: 22px;
    line-height: 28px;
    font-weight: 600;
  }

  button.m-shop-by-category__arrow {
    display: inline-flex;
  }
  /* 48px peek each side: arrows sit in the gap between card and peek. */
  button.m-shop-by-category__arrow--next {
    right: -2px;
  }
  button.m-shop-by-category__arrow--prev {
    left: -2px;
  }
}
/* END_SECTION:m-shop-by-category */

/* START_SECTION:m-shop-by-style (INDEX:45) */
.m-shop-by-style {
  padding-inline: 3vw;
  max-width: 1600px;
  margin-inline: auto;
}

/* H2 token: 44 / 58 */
.m-shop-by-style__heading {
  margin: 0 0 48px;
  text-align: center;
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  font-size: 44px;
  line-height: 58px;
  letter-spacing: -0.03em;
}

.m-shop-by-style__carousel-wrapper {
  position: relative;
}

.m-shop-by-style__list {
  display: flex;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.m-shop-by-style__list:not(scroll-carousel) {
  flex-wrap: wrap;
  justify-content: center;
}

scroll-carousel.m-shop-by-style__list {
  scroll-snap-type: x mandatory;
}

.m-shop-by-style__item {
  position: relative;
  flex: 0 0 440px;
  max-width: 100%;
  aspect-ratio: 440 / 400;
  border-radius: 14px;
  overflow: hidden;
  display: block;
  text-decoration: none;
  scroll-snap-align: start;
  isolation: isolate;
}

.m-shop-by-style__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.m-shop-by-style__item:hover .m-shop-by-style__image {
  transform: scale(1.04);
}

.m-shop-by-style__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: end;
  justify-content: center;
  padding: 32px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.35) 100%);
  pointer-events: none;
}

.m-shop-by-style__label {
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  font-size: 34px;
  line-height: 100%;
  letter-spacing: -0.03em;
  text-align: center;
  text-transform: capitalize;
  color: #fff;
}

@media (max-width: 999px) {
  .m-shop-by-style__item {
    flex: 0 0 360px;
  }

  .m-shop-by-style__label {
    font-size: 28px;
  }
}

@media (max-width: 699px) {
  .m-shop-by-style__heading {
    margin-bottom: 24px;
  }

  .m-shop-by-style__item {
    flex: 0 0 75vw;
  }

  .m-shop-by-style__label {
    font-size: 22px;
  }

  .m-shop-by-style__overlay {
    padding: 20px;
  }
}
/* END_SECTION:m-shop-by-style */

/* START_SECTION:m-slideshow (INDEX:46) */
.m-slideshow {
  position: relative;
  display: block;
  overflow: hidden;
  width: 100%;
}

.m-slideshow .content-over-media {
  --content-over-media-height: 560px;
  min-height: 560px;
}

@media (max-width: 699px) {
  /* Capped so the features bar under the hero shows on the first screen (32px
     tall); never below the 520px the hero content needs. */
  .m-slideshow .content-over-media {
    aspect-ratio: 414 / 736;
    --content-over-media-height: auto;
    height: auto;
    min-height: 0;
    max-height: max(520px, calc(100svh - var(--announcement-bar-height, 0px) - var(--header-height, 0px) - 32px));
    width: 100%;
  }

  /* The theme sets `height: var(--content-over-media-height)` on inline media — force fill */
  .m-slideshow .content-over-media > picture img,
  .m-slideshow .content-over-media > img,
  .m-slideshow .content-over-media > video,
  .m-slideshow .content-over-media > iframe {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
}

.m-slideshow .content-over-media {
  width: 100%;
}

.m-slideshow__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 0;
}

.m-slideshow__video--embed {
  border: 0;
  pointer-events: none;
  /* keep iframe cover-fit even when video aspect differs */
  min-width: 100%;
  min-height: 100%;
}

@media (max-aspect-ratio: 16/9) {
  .m-slideshow__video--embed {
    width: 177.78vh;
    height: 100%;
    left: 50%;
    transform: translateX(-50%);
  }
}

.m-slideshow__slide-content {
  color: var(--m-slideshow-text-color, #fff);
  margin-block-start: clamp(32px, 7vw, 80px);
  /* Respect the per-slide content_max_width setting (overrides theme's 80% cap) */
  max-width: min(100%, var(--content-over-media-content-max-width, 640px)) !important;
  min-width: 0;
}

.m-slideshow__text {
  display: flex;
  flex-direction: column;
  gap: 24px;
  /* Inherit max-width from --content-over-media-content-max-width (section setting) */
  max-width: 100%;
  min-width: 0;
}

/* Button text-big token: Instrument Sans 500, 12/100%, ls 22% UPPER */
.m-slideshow__subheading {
  margin: 0;
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 100%;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* H1 token desktop: Playfair 400, 60/70, ls -2%.
   `font-style: normal` so the merchant can italicise individual words
   via the inline-richtext <em> toolbar in the editor; the browser's
   default <em> rule gives those words italic. */
.m-slideshow__heading {
  overflow-wrap: anywhere;
}

.m-slideshow__heading em,
.m-slideshow__heading i {
  font-style: italic;
}

.m-slideshow__heading-break {
  display: inline;
}

@media (max-width: 699px) {
  .m-slideshow__description {
    font-size: 16px;
    line-height: 24px;
  }
}

/* Paragraph token: Instrument Sans 400, 15/20, ls -3% */
.m-slideshow__description,
.m-slideshow__description > *,
.m-slideshow__description p,
.m-slideshow__description li,
.m-slideshow__description a {
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.03em;
}

.m-slideshow__description {
  max-width: 42ch;
}

.m-slideshow__description > * {
  margin: 0;
}

.m-slideshow__description > * + * {
  margin-top: 0.5rem;
}

.m-slideshow__buttons-wrapper {
  margin-block-start: 56px;
  max-width: 100%;
  min-width: 0;
}

@media (max-width: 999px) {
  .m-slideshow__buttons-wrapper {
    margin-block-start: clamp(48px, 14vw, 138px);
  }
}

.m-slideshow__buttons {
  gap: 24px;
}

/* Desktop: both pills on one row. Compound selector (.button-group) is needed to
   beat the theme's .button-group { flex-wrap: wrap } at equal specificity. */
.m-slideshow__buttons.button-group {
  flex-wrap: nowrap;
}

/* Keep each pill's label on one line so they sit side by side, not shrink/wrap. */
.shopify-section--m-slideshow .m-slideshow__buttons .button {
  white-space: nowrap;
  flex: 0 0 auto;
}

.shopify-section--m-slideshow .m-slideshow__buttons .button,
.m-slideshow__buttons .button {
  font-family: 'Instrument Sans', sans-serif !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  line-height: 1 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  padding: 16px 32px !important;
  min-height: 48px !important;
  border-radius: 50px !important;
}

@media (max-width: 699px) {
  .m-slideshow__buttons {
    gap: 20px;
  }
  .m-slideshow__buttons.button-group {
    flex-wrap: wrap;
  }
}

.m-slideshow__dots {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}

/* Awards row: bottom left, on the logo gutter, at every width. */
.m-slideshow > .m-slideshow__awards {
  position: absolute;
  inset-inline: 0;
  bottom: 40px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  padding-inline: max(var(--og-gutter), calc((100% - 1336px) / 2)); /* on the logo gutter */
  z-index: 3;
  pointer-events: none;
}

.m-slideshow > .m-slideshow__awards .m-slideshow__award {
  height: 88px;
  width: auto;
  display: block;
}

@media (max-width: 999px) {
  .m-slideshow > .m-slideshow__awards {
    bottom: 60px;
    display: flex;
    align-items: center;
    gap: 16px;
    padding-inline: 20px;
    max-width: none;
    margin-inline: 0;
  }
  .m-slideshow > .m-slideshow__awards .m-slideshow__award {
    height: auto;
    max-height: 80px;
    width: auto;
    max-width: 47%;   /* keep both badges on one row on narrow phones */
    object-fit: contain;
  }
  .m-slideshow > .m-slideshow__awards .m-slideshow__award--desktop {
    display: none;
  }

  /* Reserve room at the bottom for the awards so buttons don't overlap.
     slide-content sits at place-self-end-* on mobile (bottom-aligned). */
  .m-slideshow .m-slideshow__slide-content {
    margin-block-end: 120px;
  }
}

/* Tablet: badges on the same 32px line as the hero text. */
@media (min-width: 700px) and (max-width: 999px) {
  .m-slideshow > .m-slideshow__awards {
    padding-inline: var(--og-gutter);
  }
}

/* Desktop: content centered vertically with a fixed 139px top/bottom inset
   (per client). Fill the slide height, drop the off-centre margin nudge. */
@media (min-width: 1000px) {
  /* Align the hero content column to the header gutter so the text starts on the
     logo's line at every width. Header uses max(88px, (100% - 1336px)/2); the
     content-over-media grid reproduces that with these two vars. */
  .m-slideshow .content-over-media {
    --container-max-width: 1336px;
    --content-over-media-column-gap: var(--og-gutter);
  }

  .m-slideshow .m-slideshow__slide-content {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: 139px;
    margin-block-start: 0;
  }
}

/* Client spec (mobile): 60px between the heading and the buttons, and 60px between
   the buttons and the award badges. Badges are pinned at bottom:24px and are ~80px
   tall, so the bottom-aligned content must sit 24 + 80 + 60 = 164px above the slide
   bottom for a 60px buttons→badges gap. */
@media (max-width: 699px) {
  .m-slideshow__buttons-wrapper {
    margin-block-start: 60px;
  }
  .m-slideshow .m-slideshow__slide-content {
    margin-block-end: 164px;
  }
}
/* Short phones (iPhone SE): 20px off each gap so the hero fits above the features bar. */
@media (max-width: 699px) and (max-height: 700px) {
  .m-slideshow__buttons-wrapper {
    margin-block-start: 40px;
  }
  .m-slideshow .m-slideshow__slide-content {
    margin-block-end: 144px;
  }
  .m-slideshow > .m-slideshow__awards {
    bottom: 40px;
  }
}
/* END_SECTION:m-slideshow */

/* START_SECTION:m-star-features (INDEX:47) */
.m-star-features {
  background-color: var(--m-star-bg);
  color: var(--m-star-color);
  padding: var(--m-star-padding-top) 16px var(--m-star-padding-bottom);
}

.m-star-features__list {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-around;
  /* Cap gap on narrow viewports so the last item never crops.
     Scales 16px → merchant setting (default 80px) as viewport grows. */
  gap: clamp(12px, 2.4vw, var(--m-star-gap));
  margin: 0;
  padding: 0;
  list-style: none;
}

.m-star-features__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.m-star-features__icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

/* Button text-big token: Instrument Sans 500, 12/100%, ls 22%, UPPER */
.m-star-features__text {
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 100%;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin: 0;
  white-space: nowrap;
}

/* Desktop: keep the green bar full-bleed, but inset its content to the header's
   container (max(88px, (100% - 1336px)/2)) so the features align with the logo —
   first item on the logo's left edge, last at the right gutter. */
@media (min-width: 1000px) {
  .m-star-features {
    padding-inline: max(var(--og-gutter), calc((100% - 1336px) / 2));
  }
  .m-star-features__list {
    justify-content: space-between;
  }
}

/* Tablet: six items need ~1070px at full size, so they tighten to stay on
   one line. */
@media (min-width: 1000px) and (max-width: 1279px) {
  .m-star-features__list {
    gap: 16px;
  }
  .m-star-features__text {
    font-size: 11px;
    letter-spacing: 0.12em;
  }
}
@media (min-width: 700px) and (max-width: 999px) {
  .m-star-features__list {
    gap: 8px;
  }
  .m-star-features__item {
    gap: 4px;
  }
  .m-star-features__icon {
    width: 14px;
    height: 14px;
  }
  .m-star-features__text {
    font-size: 10px;
    letter-spacing: 0.08em;
  }
}

/* Mobile (≤699px): show ONE item at a time, fade-cycle every cycle_ms.
   Items overlap absolutely so the bar has a fixed height tracking the tallest item. */
@media (max-width: 699px) {
  .m-star-features__list {
    position: relative;
    justify-content: center;
    min-height: 16px;
  }

  .m-star-features__item {
    position: absolute;
    inset: 0;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
  }

  .m-star-features__item.is-active {
    opacity: 1;
    pointer-events: auto;
  }

  @media (prefers-reduced-motion: reduce) {
    .m-star-features__item { transition: none; }
  }
}
/* END_SECTION:m-star-features */

/* START_SECTION:m-stats (INDEX:48) */
.m-stats {
    padding-inline: max(var(--og-gutter), calc((100% - 1336px) / 2));
    box-sizing: border-box;
  }

  .m-stats__inner {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: clamp(48px, 9vw, 120px);
    flex-wrap: wrap;
    color: var(--m-stats-color, #868d87);
  }

  .m-stats__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
  }

  /* Reviews stat: number+stars grouped (16px), then 8px to the label. */
  .m-stats__item--reviews {
    gap: 8px;
  }
  .m-stats__group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }

  /* H1 token: Playfair 400 60/70, -1.2px. tabular-nums keeps width steady while counting. */
  .m-stats__value {
    margin: 0;
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-size: 60px;
    line-height: 70px;
    letter-spacing: -1.2px;
    color: inherit;
    font-variant-numeric: tabular-nums;
  }

  /* H2 token: Playfair 400 44/58 (the reviews number is smaller, with stars below). */
  .m-stats__value--sm {
    font-size: 44px;
    line-height: 58px;
    letter-spacing: -0.44px;
  }

  /* H4 token: Playfair Medium 24/31. */
  .m-stats__label {
    margin: 0;
    font-family: 'Playfair Display', serif;
    font-weight: 500;
    font-size: 24px;
    line-height: 31px;
    color: inherit;
  }

  .m-stats__stars {
    display: flex;
    gap: 0;
    color: inherit;
  }
  .m-stats__stars svg {
    width: 24px;
    height: 24px;
    display: block;
  }

  /* Mobile: show ONE stat at a time, auto fade-cycle (same behaviour as the
   star-features bar). Items overlap absolutely; the container min-height tracks
   the tallest stat (the reviews one, whose label can wrap to two lines). */
  @media (max-width: 699px) {
    .m-stats {
      padding-inline: 20px;
    }

    .m-stats__value,
    .m-stats__value--sm {
      font-size: 38px;
      line-height: 44px;
      letter-spacing: -1px;
      font-weight: 500;
    }
    .m-stats__label {
      font-size: 18px;
      line-height: 24px;
      font-weight: 600;
    }
    /* Smaller stars to match the smaller mobile number. */
    .m-stats__stars svg {
      width: 20px;
      height: 20px;
    }
    .m-stats__group {
      gap: 8px;
    }
    .m-stats__stars {
      margin-top: -2px;
      margin-bottom: -3.5px;
    }
    .m-stats__inner {
      position: relative;
      flex-direction: row;
      justify-content: center;
      gap: 0;
      min-height: 165px;
    }
    .m-stats__item {
      position: absolute;
      inset: 0;
      justify-content: center;
      opacity: 0;
      transition: opacity 0.5s ease;
      pointer-events: none;
    }
    .m-stats__item.is-active {
      opacity: 1;
      pointer-events: auto;
    }
  }
  @media (max-width: 699px) and (prefers-reduced-motion: reduce) {
    .m-stats__item {
      transition: none;
    }
  }

  /* Reviews stat: make the 16px number→stars gap the TRUE visual gap. The number's
   tall line-height (70/44) leaves half-leading below the digits, so the flex gap
   reads larger than 16px. Trim the number's line-box to hug the glyph. Placed
   last so it wins over the mobile line-height override on every breakpoint. */
  .m-stats__group .m-stats__value {
    line-height: 1;
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
  }
/* END_SECTION:m-stats */

/* START_SECTION:m-stories-slider (INDEX:49) */
.m-stories {
  padding-block: 16px 64px;
}

.m-stories__container {
  position: relative;
}

/* Align with the header logo (header.liquid: 1336px cap, 88px gutters) */
@media screen and (min-width: 1000px) {
  .m-stories__container {
    --container-max-width: 1336px;
    --container-gutter: var(--og-gutter);
  }
}

.m-stories__track {
  display: flex;
  gap: 24px;
  margin: 0;
  padding: 0 0 8px;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.m-stories__track::-webkit-scrollbar {
  display: none;
}

.m-stories__slide {
  flex: 0 0 calc((100% - 48px) / 3);
  scroll-snap-align: start;
}

.m-stories__empty {
  color: #868d87;
}

/* Arrow = homepage m-shop-by-category component: 48px white circle, grey
   chevron, vertically centred on the IMAGE (JS sets --m-stories-arrow-top to
   half the media height; 41% fallback before JS runs). */
/* Qualified with `button` (0,1,1) so the white background beats the UA reset
   `[type="button"] { background-color: #0000 }` (0,1,0) — same trick as homepage. */
button.m-stories__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: var(--m-stories-arrow-top, 41%);
  transform: translateY(-50%);
  z-index: 2;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: #868d87;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.m-stories__arrow svg {
  width: 20px;
  height: 20px;
}

.m-stories__arrow:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16);
}

/* Boundary fade — class, not [hidden] (theme.css [hidden] is display:none!important
   and would kill the transition). */
.m-stories__arrow.is-gone {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s 0.25s;
}

/* Desktop: 48px arrow centred on the row edge — half on the first/last card,
   half into the 88px gutter (matches m-featured-collections). */
.m-stories__arrow--prev {
  left: -1.5rem;
}

.m-stories__arrow--next {
  right: -1.5rem;
}

@media screen and (max-width: 1000px) {
  .m-stories__slide {
    flex-basis: calc((100% - 24px) / 2);
  }
}

@media screen and (max-width: 740px) {
  .m-stories__container {
    --container-gutter: 20px;
  }

  .m-stories__track {
    margin-inline: -20px;
    padding-inline: 48px;
    gap: 12px;
  }

  .m-stories__slide {
    flex: 0 0 100%;
    scroll-snap-align: center;
  }

  /* Seat the arrow on the seam between the centred card and its peek. */
  button.m-stories__arrow--prev {
    left: -2px;
  }

  button.m-stories__arrow--next {
    right: -2px;
  }
}
/* END_SECTION:m-stories-slider */

/* START_SECTION:m-text-block (INDEX:50) */
.m-text-block {
  padding-inline: max(var(--og-gutter), calc((100% - 1336px) / 2));
}

.m-text-block__inner {
  max-width: 680px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  text-align: center;
}

.m-text-block .m-text-block__subheading {
  margin: 0 0 -16px;
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 100%;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--m-text-block-heading, #4d5848);
}

/* Type via .og-h3; override its header padding for this centered, gap-based
   layout, and respect the heading colour setting. */
.m-text-block .m-text-block__heading {
  margin: 0;
  padding: 0;
  text-align: inherit;
  color: var(--m-text-block-heading, #4d5848);
}

/* Paragraph token: Instrument Sans 400, 15/24, -0.45px. Type on the <p> too so it
   beats the theme's global `p { font-size: var(--text-base) }`. */
.m-text-block__body,
.m-text-block__body p {
  margin: 0;
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 24px;
  letter-spacing: -0.45px;
  color: var(--m-text-block-text, #868d87);
}

.m-text-block__body p + p {
  margin-top: 16px;
}

.m-text-block__body :is(ul, ol) {
  margin: 16px 0 0;
  padding-inline-start: 20px;
}

.m-text-block__body > :first-child {
  margin-top: 0;
}

.m-text-block--center .m-text-block__body :is(ul, ol) {
  padding-inline-start: 0;
  list-style-position: inside;
}

.m-text-block--left .m-text-block__inner {
  align-items: flex-start;
  text-align: left;
}

.m-text-block--right .m-text-block__inner {
  align-items: flex-end;
  text-align: right;
}

.m-text-block__body a {
  color: var(--m-text-block-heading, #4d5848);
  font-weight: 400;
  text-decoration: none;
}

@media (max-width: 699px) {
  .m-text-block {
    padding-inline: 20px;
  }
  .m-text-block__inner {
    gap: 20px;
  }
  .m-text-block .m-text-block__subheading {
    margin-bottom: -8px;
  }
}
/* END_SECTION:m-text-block */

/* START_SECTION:m-visit-studio (INDEX:51) */
.m-visit-studio {
  padding-inline: max(var(--og-gutter), calc((100% - 1336px) / 2));
}

.m-visit-studio__inner {
  display: flex;
  align-items: stretch;
  gap: clamp(40px, 5.8vw, 88px);
}

.m-visit-studio__text {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 56px;
}

.m-visit-studio__head {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.m-visit-studio__eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-family: "Instrument Sans", system-ui, sans-serif;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 2.64px;
  text-transform: uppercase;
  color: #4d5848;
}

.m-visit-studio__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4d5848;
}

/* Open = brand green (the default above); closed = the theme's error red. */
.m-visit-studio__eyebrow.is-closed .m-visit-studio__dot {
  background: rgb(var(--error-text, 203 43 43));
}

.m-visit-studio__heading {
  margin: 0;
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 400;
  font-size: 34px;
  line-height: 45px;
  color: #4d5848;
}

.m-visit-studio__columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}

.m-visit-studio__col-title {
  margin: 0 0 16px;
  font-family: "Instrument Sans", system-ui, sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 26px;
  color: #4d5848;
}

.m-visit-studio__col-body,
.m-visit-studio__col-body p {
  margin: 0;
  font-family: "Instrument Sans", system-ui, sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 24px;
  letter-spacing: -0.45px;
  color: #4d5848;
}

.m-visit-studio__col-body a {
  color: #4d5848;
  text-decoration: underline;
  text-underline-position: from-font;
}

.m-visit-studio__pairs {
  margin: 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 32px;
}

.m-visit-studio__pairs dt,
.m-visit-studio__pairs dd {
  margin: 0;
  font-family: "Instrument Sans", system-ui, sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 24px;
  letter-spacing: -0.45px;
  color: #4d5848;
}

.m-visit-studio__btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 17px 32px 16px;
  border-radius: 50px;
  background: #4d5848;
  font-family: "Instrument Sans", system-ui, sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 2.64px;
  text-transform: uppercase;
  color: #ffffff;
  text-decoration: none;
}

.m-visit-studio__map {
  flex: 1 1 0;
  min-width: 0;
  display: block;
  height: 560px;
  border-radius: 14px;
  overflow: hidden;
  background: #f1ede8;
}

.m-visit-studio__map-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 699px) {
  .m-visit-studio {
    padding-inline: 20px;
  }
  .m-visit-studio__inner {
    flex-direction: column;
    gap: 48px;
  }
  .m-visit-studio__text {
    gap: 40px;
  }
  .m-visit-studio__heading {
    font-size: 26px;
    line-height: 32px;
  }
  .m-visit-studio__col-title {
    font-size: 18px;
    line-height: 24px;
  }
  .m-visit-studio__columns {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .m-visit-studio__map {
    flex: none; /* column flow: let height win (flex-basis:0 would squash it to 0) */
    width: auto;
    height: 314px;
    margin-inline: -20px;
    border-radius: 0;
  }
}
/* END_SECTION:m-visit-studio */

/* START_SECTION:main-product-v2 (INDEX:69) */
/* Sticky bar price, same treatment as the buy box CTA. */
.product-sticky-bar__price {
  letter-spacing: 1.2px;
}
.product-sticky-bar__price::before {
  content: '•';
  margin: 0 8px 0 7px;
  letter-spacing: 0;
}

/* The flex gap sat on top of the bullet's own margin. */
.product-sticky-bar .button {
  padding-inline: 24px;
  column-gap: 0;
}

.pdp-v2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 531px;
  gap: 60px;
  align-items: start;
}

.pdp-v2__buybox {
  position: sticky;
  top: 100px;
}

@media (max-width: 999px) {
  .pdp-v2 {
    /* minmax(0,…): the thumbnail strip's min-content width blows out a bare 1fr. */
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  .pdp-v2__buybox {
    position: static;
  }
}
/* END_SECTION:main-product-v2 */

/* START_SECTION:multiple-media-with-text (INDEX:74) */
/* Type (all sizes) — heading 44/58, body 15/24, 16px between paragraphs. */
.mmwt--about .prose :is(.h1, .h2, .h3, .h4, .h5, .h6) {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.44px;
  margin: 0 0 24px;
}
.mmwt--about .prose .h1 { font-size: 56px; line-height: 70px; }
.mmwt--about .prose .h2 { font-size: 44px; line-height: 58px; }
.mmwt--about .prose .h3 { font-size: 34px; line-height: 45px; }
.mmwt--about .prose .h4 { font-size: 27px; line-height: 36px; }
.mmwt--about .prose .h5 { font-size: 21px; line-height: 29px; }
.mmwt--about .prose .h6 { font-size: 17px; line-height: 24px; }
.mmwt--about .prose p:not(.h1, .h2, .h3, .h4, .h5, .h6) {
  font-family: "Instrument Sans", system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 24px;
  letter-spacing: -0.45px;
  margin: 0;
}
/* No fixed gap between paragraphs — spacing comes from blank lines the merchant
   adds in the editor (empty paragraphs render as a real line). */
.mmwt--about .prose p:empty {
  min-height: 24px;
}

.mmwt--about .multiple-media-with-text__media-wrapper video {
  object-fit: cover;
}

/* Desktop (>=700px): 1336 cap / 88px gutters, flush 50/50, image fills its half
   (668x560), text vertically centred and padded toward the image. */
@media screen and (min-width: 700px) {
  .container.mmwt--about {
    --container-max-width: 1336px;
    --container-gutter: var(--og-gutter);
  }
  .mmwt--about .multiple-media-with-text {
    --multiple-media-with-text-gap: 0;
  }
  .mmwt--about .multiple-media-with-text__content-wrapper {
    align-self: center;
  }
  .mmwt--about .multiple-media-with-text__media-wrapper :is(img, video-media) {
    width: 100%;
    height: 560px;
    object-fit: cover;
    border-radius: 14px;
  }
  .mmwt--about .multiple-media-with-text--reverse .multiple-media-with-text__content-wrapper {
    padding-inline-end: clamp(40px, 5.8vw, 88px);
  }
  .mmwt--about .multiple-media-with-text:not(.multiple-media-with-text--reverse) .multiple-media-with-text__content-wrapper {
    padding-inline-start: clamp(40px, 5.8vw, 88px);
  }
}

/* Mobile (<700px): stacked. Image is full-bleed edge-to-edge (theme's 100vw
   breakout) with square corners, then a 24px gap down to the text. */
@media screen and (max-width: 699px) {
  .mmwt--about .multiple-media-with-text__media-wrapper :is(img, video-media) {
    width: 100%;
    aspect-ratio: 1;
    height: auto;
    object-fit: cover;
    border-radius: 0;
  }
  .mmwt--about .multiple-media-with-text {
    --multiple-media-with-text-gap: 24px;
  }
  .mmwt--about .prose .h1 { font-size: 40px; line-height: 50px; }
  .mmwt--about .prose .h2 { font-size: 32px; line-height: 40px; }
  .mmwt--about .prose .h3 { font-size: 26px; line-height: 32px; }
  .mmwt--about .prose .h4 { font-size: 22px; line-height: 29px; }
  .mmwt--about .prose .h5 { font-size: 18px; line-height: 25px; }
  .mmwt--about .prose .h6 { font-size: 15px; line-height: 22px; }
}
/* END_SECTION:multiple-media-with-text */

/* START_SECTION:pdp-diamond (INDEX:77) */
.pdpd {
    color: #4d5848;
    /* Clears the sticky header + product bar so the heading stays visible. */
    scroll-margin-top: 180px;
  }
  .pdpd__inner {
    display: grid;
    grid-template-columns: 375px minmax(0, 580px);
    gap: 80px;
    align-items: start;
    justify-content: center;
  }
  .pdpd__media {
    position: relative;
    aspect-ratio: 1;
    border-radius: 14px;
    overflow: hidden;
    background: #f8f9f8;
  }
  .pdpd__badge {
    position: absolute;
    inset-block-end: 14px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    opacity: 0;
    transition: opacity 0.2s ease;
  }
  .pdpd__media.is-loaded .pdpd__badge {
    opacity: 1;
  }
  @media (prefers-reduced-motion: reduce) {
    .pdpd__badge {
      transition: none;
    }
  }

  .pdpd__img,
  .pdpd__frame {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border: 0;
    border-radius: inherit;
  }
  /* Head, specs and button are one 40px rhythm. */
  .pdpd__body {
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: flex-start;
  }
  .pdpd__title {
    margin: 0;
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-size: 44px;
    line-height: 58px;
    letter-spacing: -0.44px;
    color: #4d5848;
  }
  .pdpd__sub {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-family: 'Instrument Sans', sans-serif;
    font-size: 15px;
    line-height: 24px;
    letter-spacing: -0.45px;
    color: #868d87;
  }
  .pdpd__lab {
    width: 49px;
    height: auto;
    display: block;
  }
  .pdpd__specs {
    display: grid;
    grid-template-rows: repeat(var(--rows, 7), auto);
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    gap: 16px 48px;
    margin: 0;
  }
  .pdpd__row {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .pdpd__label {
    margin: 0;
    font-family: 'Instrument Sans', sans-serif;
    font-size: 20px;
    line-height: 26px;
    color: #4d5848;
    white-space: nowrap;
  }
  .pdpd__value {
    margin: 0;
    padding-top: 2px;
    font-family: 'Instrument Sans', sans-serif;
    font-size: 15px;
    line-height: 24px;
    letter-spacing: -0.45px;
    color: #868d87;
    white-space: nowrap;
  }
  .pdpd__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 32px;
    border: 1px solid #4d5848;
    border-radius: 50px;
    font-family: 'Instrument Sans', sans-serif;
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 2.64px;
    text-transform: uppercase;
    text-decoration: none;
    color: #4d5848;
    transition: background 0.15s ease, color 0.15s ease;
  }
  button.pdpd__btn:hover,
  .pdpd__btn:hover {
    background: #4d5848;
    color: #fff;
  }

  /* Certificate modal */
  .pdpd__modal {
    width: min(920px, 94vw);
    height: min(88vh, 1100px);
    padding: 0;
    border: 0;
    border-radius: 14px;
    background: #fff;
    color: #4d5848;
    overflow: hidden;
  }
  .pdpd__modal::backdrop {
    background: rgba(31, 36, 29, 0.55);
  }
  .pdpd__modal[open] {
    display: flex;
    flex-direction: column;
  }
  .pdpd__modal-head {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    border-bottom: 1px solid #e6e6e0;
    font-family: 'Instrument Sans', sans-serif;
  }
  .pdpd__modal-title {
    font-size: 15px;
    line-height: 24px;
    letter-spacing: -0.45px;
  }
  .pdpd__modal-link {
    margin-inline-start: auto;
    font-size: 11px;
    line-height: 18px;
    color: #868d87;
  }
  button.pdpd__modal-close {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: #4d5848;
    cursor: pointer;
  }
  button.pdpd__modal-close:hover {
    background: #f1efe9;
  }
  .pdpd__cert {
    flex: 1;
    width: 100%;
    border: 0;
    display: block;
  }

  /* The pair needs 502 + 67 + 580 = 1149px; below that, stack. */
  /* Two-column layout only. The heading's leading sits its glyphs ~20px below
     its own box top, so the media lines up with the text you can see rather
     than with an invisible box edge. */
  @media (min-width: 700px) {
    .pdpd__media {
      margin-block-start: 20px;
    }
  }

  /* Tablets keep the desktop pair, the photo giving up width first. */
  @media (min-width: 700px) and (max-width: 1279px) {
    .pdpd__inner {
      grid-template-columns: minmax(0, 375px) minmax(0, 580px);
      gap: 40px;
    }
  }
  /* Two spec columns need ~540px; beside the photo a tablet has less. */
  .pdpd__body {
    container-type: inline-size;
  }
  @container (max-width: 539px) {
    .pdpd__specs {
      grid-auto-flow: row;
      grid-template-rows: none;
      grid-auto-columns: auto;
    }
  }

  @media (max-width: 699px) {
    .pdpd__inner {
      grid-template-columns: minmax(0, 1fr);
      gap: 40px;
    }
    .pdpd__media {
      /* width:100% or the auto margins make it shrink-to-fit, and it would then
         size itself from the iframe's own width, which is derived from this box. */
      width: 100%;
      max-width: 375px;
      margin-inline: auto;
    }
  }

  @media (max-width: 999px) {
    .pdpd {
      scroll-margin-top: 120px;
    }
    .pdpd__inner {
      gap: 32px;
    }
    .pdpd__body {
      gap: 32px;
      align-items: stretch;
    }
    .pdpd__title {
      font-size: 32px;
      line-height: 42px;
    }
  }

  /* Phones only: two spec columns still fit on a tablet. */
  @media (max-width: 699px) {
    /* 56px gutter each side, measured from the screen edge, not the container. */
    .pdpd__media {
      width: min(100%, calc(100vw - 112px));
      max-width: none;
    }
    .pdpd__specs {
      grid-auto-flow: row;
      grid-template-rows: none;
      grid-auto-columns: auto;
      gap: 12px;
    }
    .pdpd__row {
      flex-wrap: wrap;
      gap: 4px 8px;
    }
    .pdpd__label,
    .pdpd__value {
      white-space: normal;
    }
    .pdpd__btn {
      width: 100%;
    }
    .pdpd__modal {
      width: 100vw;
      height: 100dvh;
      max-width: none;
      border-radius: 0;
    }
  }
/* END_SECTION:pdp-diamond */

/* CSS from snippet stylesheet tags */
/* START_SNIPPET:bb-band-profile (INDEX:98) */
/* 32px icons on a 16px rhythm; the selected one gets the same 40px white disc
   the shape, band style and metal swatches use. */
.bb__profiles {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 16px;
  padding: 8px 12px;
}
.bb__profile {
  position: relative;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
}
.bb__profile img {
  position: relative;
  display: block;
  width: 32px;
  height: 32px;
  object-fit: contain;
}
.bb__profile.is-active::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 3px 20px 4px rgba(0, 0, 0, 0.1);
}
a.bb__profile {
  border-radius: 50%;
  transition: box-shadow 0.15s ease;
}
a.bb__profile:hover {
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px #a0a599;
}
/* END_SNIPPET:bb-band-profile */

/* START_SNIPPET:bb-band-style (INDEX:99) */
.bb__bands {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}
.bb__band {
  position: relative;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
}
.bb__band img {
  position: relative;
  display: block;
  width: 32px;
  height: 32px;
  object-fit: contain;
}
/* Selected band sits on a white disc, same treatment as shapes and metals. */
.bb__band.is-active::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 3px 20px 4px rgba(0, 0, 0, 0.1);
}
a.bb__band {
  border-radius: 50%;
  transition: box-shadow 0.15s ease;
}
a.bb__band:hover {
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px #a0a599;
}
/* END_SNIPPET:bb-band-style */

/* START_SNIPPET:bb-band-width (INDEX:100) */
/* A band family runs from 1.5mm to 8mm, more than fits on one line. */
.bb__pills--wrap {
  flex-wrap: wrap;
}
/* END_SNIPPET:bb-band-width */

/* START_SNIPPET:bb-rating (INDEX:102) */
.bb__rating {
  margin-top: 8px;
}
/* The whole row is the hit area when it links out; the design underlines only
   the count, so the rule below puts it back on that span alone. */
.bb__rating-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 20px;
  text-decoration: none;
}
.bb__stars {
  display: inline-flex;
  align-items: center;
  /* 2px, tighter than the 4px the design specifies: the client wanted them closer. */
  gap: 2px;
  color: #4d5848;
}
/* This row outlines the unfilled star in the same green rather than greying it,
   unlike the reviews section. Stroke doubled because star-icon draws on a 24
   viewBox: 2 there renders as the design's 1px hairline at 12px. */
.bb__stars .star-icon--empty {
  color: #4d5848;
}
.bb__stars .star-icon--empty path {
  stroke-width: 2;
}
.bb__rating-count {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0;
  color: #868d87;
}
a.bb__rating-row .bb__rating-count {
  text-decoration: underline;
  text-underline-position: from-font;
}
a.bb__rating-row:hover .bb__rating-count {
  color: #4d5848;
}
/* END_SNIPPET:bb-rating */

/* START_SNIPPET:bb-tooltip (INDEX:105) */
.bb__info {
  position: relative;
  cursor: help;
  outline: none;
}

.bb__info::after {
  content: attr(data-bb-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: max-content;
  max-width: 260px;
  padding: 10px 14px;
  border-radius: 10px;
  background: #4d5848;
  color: #f1f3f1;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0;
  text-transform: none;
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 5;
  pointer-events: none;
}

.bb__info:hover::after,
.bb__info:focus-visible::after {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
/* END_SNIPPET:bb-tooltip */

/* START_SNIPPET:delivery-date (INDEX:120) */
.delivery-date {
    display: block;
  }
  .delivery-date[hidden],
  .delivery-date__note[hidden] {
    display: none;
  }
  /* Take the text style of where it sits, not the theme's p size. */
  .delivery-date p {
    margin: 0;
    font: inherit;
    letter-spacing: inherit;
  }
  .delivery-date__note a {
    color: inherit;
    text-decoration: underline;
  }
/* END_SNIPPET:delivery-date */

/* START_SNIPPET:in-york (INDEX:135) */
.in-york {
    position: absolute;
    z-index: 2;
  }
/* END_SNIPPET:in-york */

/* START_SNIPPET:line-item-addon (INDEX:140) */
/* Aligns with .line-item text column: media width + 1.5rem gap */
.cart-addon {
  display: flex;
  align-items: first baseline;
  gap: 12px;
  padding-inline-start: calc(4.375rem + 1.5rem);
  margin-top: -10px;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: rgb(var(--text-color) / 0.75);
}

.cart-addon + .cart-addon {
  margin-top: 2px;
}

@media screen and (min-width: 700px) {
  .cart-addon {
    padding-inline-start: calc(7.5rem + 1.5rem);
  }
}

/* Cart page table: no media column to align to; the table's Total column already shows the price */
.order-summary .cart-addon {
  padding-inline-start: 0;
  margin-top: 0;
}

/* The ring line shows the combined price, so the rows do not repeat it. */
.cart-addon__price {
  display: none;
}

.cart-addon__label {
  flex: 1 1 auto;
  min-width: 0;
}

.cart-addon__label::before {
  content: '+ ';
}

.cart-addon__sub {
  display: block;
  font-size: 0.6875rem;
  color: rgb(var(--text-color) / 0.5);
}

.cart-addon__price {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.cart-addon__remove a {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  font-size: 1rem;
  line-height: 1;
  color: rgb(var(--text-color) / 0.45);
  text-decoration: none;
  transition: color 0.15s ease;
}

.cart-addon__remove a:hover {
  color: rgb(var(--text-color));
}
/* END_SNIPPET:line-item-addon */

/* START_SNIPPET:product-buybox-v2 (INDEX:171) */
/* Buy box component. Section layout (.pdp-v2) lives in main-product-v2. */
  .bb {
    display: block;
    color: #4d5848;
  }
  .bb__head {
    margin-bottom: 0;
  }
  .bb__title {
    margin: 0;
    font-family: 'Playfair Display', serif;
    font-weight: 500;
    font-size: 24px;
    line-height: 31px;
    letter-spacing: 0;
    color: #4d5848;
  }
  .bb__subtitle {
    margin: 8px 0 0;
    font-family: 'Instrument Sans', sans-serif;
    font-size: 15px;
    line-height: 24px;
    letter-spacing: -0.45px;
    color: #868d87;
  }
  .bb__price {
    margin: 32px 0 0;
    font-family: 'Playfair Display', serif;
    font-weight: 500;
    font-size: 24px;
    line-height: 31px;
    letter-spacing: 0;
    color: #4d5848;
  }

  /* Shop Pay installments: its shadow text inherits size from here. */
  .bb .payment-terms {
    display: block;
    margin-top: 8px;
    font-size: 11px;
    line-height: 16px;
  }

  .bb__group {
    margin-top: 40px;
  }
  .bb__label {
    margin: 0;
    font-family: 'Instrument Sans', sans-serif;
    font-size: 20px;
    line-height: 26px;
    color: #4d5848;
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
  }
  .bb__value {
    font-size: 15px;
    line-height: 24px;
    letter-spacing: -0.45px;
    color: #868d87;
  }
  .bb__info {
    color: #a0a599;
    font-size: 12px;
    line-height: 1;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.1));
  }
  /* The link sits straight under the label, no gap of its own. */
  .bb__link {
    display: inline-block;
    margin-top: 0;
    font-family: 'Instrument Sans', sans-serif;
    font-size: 15px;
    line-height: 24px;
    letter-spacing: -0.45px;
    color: #4d5848;
    text-decoration: underline;
    text-underline-position: from-font;
  }

  /* Shape row */
  .bb__shape-img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    display: block;
  }
  .bb__shapes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
    color: #a0a599;
  }
  .bb__shape {
    position: relative;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    cursor: pointer;
    transition: color 0.15s ease;
  }
  .bb__shape > * {
    position: relative;
  }
  .bb__shape.is-active {
    color: #4d5848;
  }
  /* Selected shape sits on a white disc, same treatment as the metal swatches.
     inset 0, not -4px: the disc is 40x40 everywhere, and this slot is already 40
     where the band and metal swatches are 32 inside a 4px ring. */
  .bb__shape.is-active::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 3px 20px 4px rgba(0, 0, 0, 0.1);
  }
  .bb__shape.is-active svg path {
    stroke-width: 1.8;
  }
  a.bb__shape {
    transition: color 0.15s ease;
  }
  a.bb__shape:hover {
    color: #4d5848;
  }

  /* Weight pills — 40px row, the selected carat on a white
     pill with a soft shadow rather than the others' plain text. */
  .bb__pills {
    display: flex;
    gap: 8px;
    margin-top: 16px;
  }
  .bb__pill input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }
  .bb__pill span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 4px;
    font-family: 'Instrument Sans', sans-serif;
    font-size: 15px;
    line-height: 24px;
    letter-spacing: -0.45px;
    color: #868d87;
    cursor: pointer;
    border-bottom: 1.5px solid transparent;
  }
  .bb__pill input:checked + span {
    color: #4d5848;
  }
  /* Carat pills are sibling-product links, so they carry the type themselves. */
  .bb__pill--static {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border-radius: 32px;
    font-family: 'Instrument Sans', sans-serif;
    font-size: 15px;
    line-height: 24px;
    letter-spacing: -0.45px;
    text-align: center;
    color: #868d87;
    text-decoration: none;
    transition: background-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
  }
  .bb__pill--static.is-active {
    background: #fff;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    color: #4d5848;
  }
  a.bb__pill--static:hover {
    color: #4d5848;
  }

  /* Metal swatches */
  .bb__metals {
    display: flex;
    gap: 16px;
    margin-top: 16px;
  }
  .bb__metal {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
  }
  .bb__metal--gold {
    background: linear-gradient(120.5deg, #ffefc2 -8%, #e7c054 69%);
  }
  .bb__metal--white {
    background: linear-gradient(180deg, #dedede, #a4a4a4);
  }
  .bb__metal.is-active {
    box-shadow: 0 0 0 4px #fff, 0 3px 20px 4px rgba(0, 0, 0, 0.1);
  }
  a.bb__metal {
    display: inline-block;
    transition: box-shadow 0.15s ease;
  }
  a.bb__metal:hover {
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px #a0a599;
  }

  /* Ring size — accordion row, 54px chips, whole list on show.
     Rules live here rather than with the accordions below because this row is a
     block of its own and carries both dividers itself. */
  /* Doubled class: .bb__acc and .bb__acc-body are declared further down, so the
     shared rules would otherwise win on source order. */
  .bb__acc.bb__size {
    margin-top: 40px;
    /* #f4efea, not the #e6e6e0 the accordions below still use: this row's
       dividers are the Secondary BG token. */
    border-top: 1px solid #f4efea;
    border-bottom: 1px solid #f4efea;
  }
  /* 16px above and below a 48px row, against the accordions' 24px. */
  .bb__size .bb__acc-summary {
    padding: 16px 0;
  }
  .bb__size .bb__label {
    flex: 1;
  }
  .bb__size-caret {
    display: grid;
    place-items: center;
    flex: none;
    width: 48px;
    height: 48px;
    color: #868d87;
    /* Same 250ms/cubic-bezier(.4,0,.2,1) as the panel, so caret and list move together. */
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .bb__size[open] .bb__size-caret {
    transform: rotate(180deg);
  }
  /* The body's height is animated in JS: clip it while that runs, and turn the
     caret back on the click rather than when the collapse finishes. */
  .bb__size.is-animating .bb__size-body {
    overflow: hidden;
  }
  .bb__size .bb__size-body > :last-child {
    margin-bottom: 16px;
  }
  .bb__size.is-collapsing .bb__size-caret {
    transform: none;
  }
  .bb__size .bb__size-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    /* Carried by the last child, not the animated box: padding would floor the
       height at 16px and clip the first frames of the collapse. */
    padding-bottom: 0;
    color: #4d5848;
  }
  .bb__sizes {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 16px;
    margin: 0;
    padding: 0;
    border: 0;
  }
  .bb__size-chip {
    position: relative;
  }
  .bb__size-chip span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    padding: 4px 12px;
    border: 1px solid #f4efea;
    border-radius: 16px;
    font-family: 'Instrument Sans', sans-serif;
    font-size: 15px;
    line-height: 24px;
    letter-spacing: -0.45px;
    color: #4d5848;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  }
  .bb__size-chip:hover input:not(:checked) + span {
    border-color: #a0a599;
  }
  .bb__size-chip input:checked + span {
    background: #4d5848;
    border-color: #4d5848;
    color: #fff;
  }
  .bb__size-chip input:focus-visible + span {
    outline: 2px solid #4d5848;
    outline-offset: 2px;
  }
  /* Marks the size the ring was made at, the way Cullen labels it. */
  .bb__size-chip.is-original::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    width: 4px;
    height: 4px;
    margin-left: -2px;
    border-radius: 50%;
    background: #a0a599;
  }
  .bb__size-original {
    margin: 16px 0 0;
    font-family: 'Instrument Sans', sans-serif;
    font-size: 13px;
    line-height: 20px;
    color: #868d87;
  }
  .bb__size-confirm-title {
    margin: 0;
    font-family: 'Instrument Sans', sans-serif;
    font-size: 20px;
    line-height: 26px;
    color: #4d5848;
  }
  /* Sized here: theme.css drops loose <p> to 14px. The <p> is the rich text
     setting's own wrapper, so both carry it. */
  .bb__size-confirm,
  .bb__size-confirm p {
    margin: 0;
    font-size: 15px;
    line-height: 24px;
    letter-spacing: -0.45px;
  }
  .bb__size-confirm p + p {
    margin-top: 16px;
  }
  .bb__size-confirm a {
    color: inherit;
    text-decoration: underline;
    text-underline-position: from-font;
  }

  /* button. prefix beats theme.css's button reset. #eaeaea matches the photo. */
  button.bb__customise,
  .bb__customise {
    margin-top: 40px;
    position: relative;
    display: flex;
    align-items: stretch;
    background: #eaeaea;
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    height: 128px;
    cursor: pointer;
    border: 0;
    padding: 0;
    text-align: start;
    width: 100%;
  }
  .bb__customise-text {
    position: relative;
    z-index: 2;
    flex: 1 1 auto;
    min-width: 0;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    justify-content: center;
  }
  .bb__customise-eyebrow {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 10px;
    line-height: 1;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: #4d5848;
  }
  .bb__customise-title {
    font-family: 'Playfair Display', serif;
    font-weight: 500;
    font-size: 24px;
    line-height: 31px;
    color: #4d5848;
    white-space: nowrap;
  }
  .bb__customise-sub {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 15px;
    line-height: 24px;
    letter-spacing: -0.45px;
    color: #4d5848;
  }
  .bb__customise-chevron {
    position: absolute;
    inset-inline-end: 4px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    color: #fff;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.25));
  }
  /* Photo is the card background, anchored right. */
  .bb__customise-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /* cover, so the photo fills the card height instead of leaving bands of
       background above and below it on narrow screens. */
    object-fit: cover;
    object-position: 100% 50%;
    z-index: 0;
  }
  .bb__customise::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
      90deg,
      #eaeaea 0%,
      #eaeaea 44%,
      rgba(234, 234, 234, 0.92) 56%,
      rgba(234, 234, 234, 0) 76%
    );
  }

  /* Saved customisations summary */
  .bb__cust {
    list-style: none;
    margin: 24px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .bb__cust:empty {
    display: none;
    margin: 0;
  }
  .bb__cust li {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 16px;
    align-items: baseline;
    font-family: 'Instrument Sans', sans-serif;
    font-size: 15px;
    color: #4d5848;
  }
  .bb__cust .bb__cust-sub {
    grid-column: 1 / -1;
    font-size: 13px;
    color: #868d87;
    margin-top: -12px;
  }
  .bb__cust .bb__cust-remove {
    background: none;
    border: 0;
    color: #868d87;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    padding: 0;
  }

  .bb__cta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    margin-top: 40px;
  }
  .bb__price--cta {
    margin-top: 40px;
  }
  .bb__buy--price-above .bb__cta {
    margin-top: 16px;
  }
  /* Numbers do not take the button's wide tracking well, so ease it off. */
  .bb__btn-price {
    letter-spacing: 1.2px;
  }
  .bb__btn-price::before {
    content: '•';
    margin: 0 8px 0 7px;
    letter-spacing: 0;
  }
  .bb__btn-price[hidden] {
    display: none;
  }
  .bb__cta-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
  }
  .bb__form {
    width: 100%;
  }
  .bb__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 48px;
    padding: 0 12px;
    border-radius: 50px;
    font-family: 'Instrument Sans', sans-serif;
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 2.64px;
    white-space: nowrap;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.15s ease;
  }
  /* button. prefix beats theme.css `button, [type="submit"] { background-color: transparent }`,
     which otherwise ties on specificity and wins on source order. */
  button.bb__btn--buy {
    background: var(--bb-buy-bg, #4d5848);
    color: var(--bb-buy-text, #f1f3f1);
    border: 0;
  }
  .bb__btn--buy:hover {
    opacity: 0.9;
  }
  .bb__btn--buy[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
  }
  .bb__btn--book {
    background: var(--bb-book-bg, rgba(0, 0, 0, 0));
    color: var(--bb-book-text, #4d5848);
    border: 1px solid var(--bb-book-border, #4d5848);
  }
  .bb__btn--book:hover {
    background: var(--bb-book-border, #4d5848);
    color: #fff;
  }
  .bb__cta-sub {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 11px;
    line-height: 18px;
    color: #4d5848;
  }

  /* Accordions */
  .bb__accordions {
    margin-top: 40px;
  }
  .bb__acc {
    border-top: 1px solid #e6e6e0;
  }
  .bb__acc:last-child {
    border-bottom: 1px solid #e6e6e0;
  }
  .bb__acc-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 24px 0;
    cursor: pointer;
    list-style: none;
    font-family: 'Instrument Sans', sans-serif;
    font-size: 20px;
    line-height: 26px;
    color: #4d5848;
  }
  .bb__acc-summary::-webkit-details-marker {
    display: none;
  }
  .bb__acc[open] .bb__acc-summary .bb-chevron {
    transform: rotate(180deg);
  }
  .bb-chevron {
    color: #4d5848;
    transition: transform 0.2s ease;
    flex: none;
  }
  /* Progressive enhancement: browsers without ::details-content still snap.
     Text panels only: the ring-size card holds a tooltip that overflow would
     clip. */
  .bb__accordions .bb__acc::details-content {
    height: 0;
    overflow: hidden;
    transition: height 0.3s ease, content-visibility 0.3s ease allow-discrete;
  }
  .bb__accordions .bb__acc[open]::details-content {
    height: auto;
  }
  .bb__acc-body {
    padding: 0 0 24px;
    font-family: 'Instrument Sans', sans-serif;
    font-size: 15px;
    line-height: 24px;
    color: #868d87;
  }

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

  /* Mobile: the customise card text zone is ~190px — drop the title a size and let nothing clip. */
  @media (max-width: 699px) {
    .bb__customise-title {
      font-size: 19px;
      line-height: 25px;
    }
    .bb__customise-sub {
      font-size: 13px;
      line-height: 19px;
    }
    .bb__customise-eyebrow {
      white-space: nowrap;
    }
  }
/* END_SNIPPET:product-buybox-v2 */

/* START_SNIPPET:star-icon (INDEX:203) */
.star-icon {
  display: block;
}
/* END_SNIPPET:star-icon */