:root {
    --ink: #000000;
    --stone: #BEAD9D;
    --bone: #DDD6CE;
    --porcelain: #F6F6F4;
    --white: #FFFFFF;
    --ink-soft: rgba(0, 0, 0, .62);
    --ink-faint: rgba(0, 0, 0, .55);
    --stone-text: #7D6E52;
    --hairline: rgba(0, 0, 0, .12);
    --serif: "Fraunces", Georgia, serif;
    --sans: "Instrument Sans", -apple-system, BlinkMacSystemFont, sans-serif;
    --script: "Nothing You Could Do", cursive;
    --tp: #00B67A;
    --r-img: 18px;
    --r-card: 14px;
    --r-btn: 10px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%
}

body {
    font-family: var(--sans);
    background: var(--porcelain);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    line-height: 1.5;
}

img {
    display: block;
    max-width: 100%
}

button {
    font-family: inherit;
    cursor: pointer
}

a {
    color: inherit
}

@media (prefers-reduced-motion:reduce) {
    * {
        animation: none !important;
        transition: none !important
    }
}

/* ---------- shared foil script ---------- */
.foil {
    font-family: var(--script);
    font-weight: 400;
    background: linear-gradient(100deg, #7d7263 0%, #bead9d 28%, #efe6d6 46%, #f6f1e6 50%, #efe6d6 54%, #bead9d 72%, #7d7263 100%);
    background-size: 250% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: foil 7s ease-in-out infinite;
}

@keyframes foil {

    0%,
    100% {
        background-position: 0% 50%
    }

    50% {
        background-position: 100% 50%
    }
}

/* ---------- reusable CTA pill (label + arrow-in-square) ---------- */
.cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: var(--white);
  color: var(--ink);
  border: none;
  border-radius: var(--r-btn);
  font-family: var(--sans);
  font-weight: 500;
  font-size: 15px;
  padding: 7px 7px 7px 18px;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, background .25s ease, color .25s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
}

.cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .12)
}

/* white button reverses to black on hover */
.cta:hover {
  background: var(--ink);
  color: var(--white)
}

.cta .sq {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  background: var(--stone);
  border-radius: 7px;
  display: grid;
  place-items: center;
}

.cta .sq svg {
  width: 14px;
  height: 14px;
  stroke: var(--ink);
  stroke-width: 2;
  fill: none
}

.cta.dark {
  background: var(--ink);
  color: var(--white);
  box-shadow: 0 0 0 2px var(--ink), 0 1px 2px rgba(0, 0, 0, .06);
}

.cta.dark .sq {
  background: var(--stone)
}

.cta.dark .sq svg {
  stroke: var(--ink)
}

.nav.cta {
  font-size: 14px;
  padding: 4px 4px 4px 14px;
}

.nav.cta .sq {
  width: 28px;
  height: 28px;
}

/* dark button reverses to white on hover */
.cta.dark:hover {
  background: var(--white);
  color: var(--ink);
}

/* white CTAs sitting on dark surfaces get a 2px white stroke so the boundary stays visible at rest and on hover */
.cta.on-dark {
  box-shadow: 0 0 0 2px var(--white), 0 1px 2px rgba(0, 0, 0, .06)
}

.cta.on-dark:hover {
  box-shadow: 0 0 0 2px var(--white), 0 6px 18px rgba(0, 0, 0, .28)
}

/* ================= HEADER ================= */
.announce {
    background: var(--ink);
    color: var(--white);
    font-family: "Figtree", -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 500;
    font-size: 14px;
    text-align: center;
    
    display: flex;
    justify-content: center;
    align-items: center;
}
/* Three statements stacked in the same box, crossfading. Absolute positioning
   keeps the bar a fixed height so a longer statement cannot shift the page as it
   fades in. Pure CSS - see scripts/build-announce.js for why this must never
   become a JS text swap. */
.announce {
    position: relative;
    min-height: 44px;
    padding: 0 16px
}

.announce-item {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 16px;
    opacity: 0;
    animation: announce-cycle 28s infinite
}

.announce-item:nth-child(2) {
    animation-delay: 7s
}

.announce-item:nth-child(3) {
    animation-delay: 14s
}

.announce-item:nth-child(4) {
    animation-delay: 21s
}

/* One flex item, so the container's gap can only ever fall between the image
   and the text - never between words. Without this, flexbox splits
   `Rated <b>Excellent</b> on Trustpilot` into three anonymous flex items and
   adds the 8px gap on top of each ordinary word space. */
.announce-text {
    display: inline
}

/* 28s for four statements: each holds ~5s and fades over ~0.6s. */
@keyframes announce-cycle {
    0%, .5% { opacity: 0 }
    2%, 22% { opacity: 1 }
    24%, 100% { opacity: 0 }
}

/* Reduced motion: no cycling at all, just the first statement. The other two
   stay in the markup, so nothing is lost for crawlers. */
@media (prefers-reduced-motion: reduce) {
    .announce-item {
        animation: none;
        opacity: 0
    }
    .announce-item:first-child {
        opacity: 1
    }
}

@media (max-width: 420px) {
    .announce {
        font-size: 12.5px
    }
    .announce-item {
        gap: 6px;
        padding: 0 10px
    }
}

.announce img {
    height: 18px;
    width: auto;
    display: block;
    margin-right: 8px
}

.announce b {
    font-weight: 600
}

header {
    position: absolute;
    top: 44px;
    left: 0;
    right: 0;
    z-index: 20;
    padding: 16px 0;
    transition: transform .55s cubic-bezier(.22, 1, .36, 1), background .45s ease, box-shadow .45s ease;
}

/* once scrolled past the hero top: becomes a fixed frosted-glass bar */
header.scrolled {
    position: fixed;
    top: 0;
    padding: 16px 0;
    padding-top: calc(16px + env(safe-area-inset-top));
    background: rgba(240, 239, 236, .62);
    -webkit-backdrop-filter: saturate(150%) blur(22px);
    backdrop-filter: saturate(150%) blur(22px);
    border-bottom: 1px solid rgba(0, 0, 0, .08);
    box-shadow: 0 8px 28px -16px rgba(0, 0, 0, .28);
}

/* hidden when scrolling down */
header.header-hidden {
    transform: translateY(-100%)
}

/* in the glass state, logo + icons flip back to dark */
header.scrolled .logotype img {
    filter: none
}

header.scrolled .cart-btn {
    color: var(--ink)
}

@media (prefers-reduced-motion:reduce) {
    header {
        transition: background .3s ease, box-shadow .3s ease
    }

    header.header-hidden {
        transform: none
    }
}

.nav-row {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    align-items: center;
    gap: 24px;
    position: relative;
}

.logotype img {
    height: 22px;
    width: auto
}

/* on the dark hero the logo needs to read white */
.hero-scope .logotype img {
    filter: brightness(0) invert(1)
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 16px
}

.cart-btn {
    position: relative;
    background: none;
    border: none;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    color: var(--white);
}

/* mobile cart icon reads white on the dark hero, dark in the glass state */
.hero-scope header.scrolled .cart-btn {
    color: var(--ink)
}

.cart-btn svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    stroke-width: 1.6;
    fill: none
}

.cta .lbl-short {
    display: none
}

.cart-count {
    position: absolute;
    top: -2px;
    right: -2px;
    background: var(--stone);
    color: var(--ink);
    font-size: 10px;
    font-weight: 600;
    min-width: 15px;
    height: 15px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    padding: 0 3px;
}

.burger {
    background: var(--white);
    border: none;
    border-radius: 10px;
    width: 44px;
    height: 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
}

.burger span {
    display: block;
    width: 18px;
    height: 1.6px;
    background: var(--ink);
    border-radius: 2px
}

.nav-cta {
    padding-top: 7px;
    padding-bottom: 7px
}

/* ================= HERO ================= */
.hero {
    position: relative;
    min-height: 640px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: #2a2724;
}

.hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
}

.hero-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(20, 18, 16, .72) 0%, rgba(20, 18, 16, .45) 45%, rgba(20, 18, 16, .12) 100%);
}

.hero-inner {
    position: relative;
    z-index: 2;
    max-width: 1280px;
    margin: 0 auto;
    padding: 120px 40px 108px;
    width: 100%;
}

.hero-copy {
    max-width: 540px;
    color: var(--white)
}

.hero-pill {
    display: inline-block;
    background: rgba(190, 173, 157, .9);
    color: var(--ink);
    border-radius: 100px;
    font-size: 13px;
    font-weight: 500;
    padding: 8px 18px;
    margin-bottom: 26px;
}

.hero h1 {
    font-family: var(--serif);
    font-weight: 340;
    font-size: clamp(34px, 5.4vw, 62px);
    line-height: 1.04;
    letter-spacing: -.02em;
}

.hero h1 .h1-line2 {
    white-space: nowrap
}

.hero h1 .foil {
    font-size: .9em
}

.hero-sub {
    font-size: clamp(14px, 1vw + 12px, 16px);
    line-height: 1.55;
    color: rgba(255, 255, 255, .82);
    max-width: 42ch;
    margin: 22px 0 0;
}

.hero-sub b {
    color: var(--white);
    font-weight: 600
}

.hero-actions {
    margin-top: 32px
}

.hero-proof {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 26px;
    font-size: 14px;
    color: rgba(255, 255, 255, .82);
}
/* Etsy figure beside the hero Trustpilot line. Sits INSIDE .tp-jump, so it
   inherits the link's colour but is muted - the Trustpilot half is the linked,
   verifiable claim and should stay the louder of the two.

   `flex-wrap` on .tp-line lets this drop to a second line on a narrow phone
   rather than squeezing the hero. */
.tp-line {
    flex-wrap: wrap
}

.tp-etsy {
    color: var(--ink-soft);
    white-space: nowrap
}

.tp-etsy b {
    color: var(--ink);
    font-weight: 600
}

/* Mid-page line under the testimonial cards. Its own line, not inline, because
   .kb-tp is a centred sentence and a second clause would double its length. */
.kb-etsy {
    display: block;
    margin-top: 6px;
    font-size: .92em;
    color: var(--ink-soft)
}

.kb-etsy b {
    color: var(--ink);
    font-weight: 600
}

.hero-proof img {
    height: 16px;
    width: auto
}

/* ================= FEATURE STRIP ================= */
.features-wrap {
    max-width: 1280px;
    margin: -56px auto 0;
    /* overlap up into the hero, but clear of the Trustpilot proof line */
    padding: 0 40px;
    position: relative;
    z-index: 5;
}

.features {
    background: var(--bone);
    border-radius: var(--r-card);
    padding: 36px 40px;
    display: grid;
    grid-template-columns: minmax(200px, 1fr) repeat(4, minmax(0, 1fr));
    gap: 32px;
    align-items: start;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .14);
}

.features-head {
    font-family: var(--serif);
    font-weight: 420;
    font-size: 23px;
    line-height: 1.2;
    letter-spacing: -.01em;
    align-self: center;
    max-width: 14ch;
}

.feature {
    text-align: center
}

.feature .ic {
    width: 52px;
    height: 52px;
    margin: 0 auto 14px;
    display: block;
}

.feature .ic img {
    width: 52px;
    height: 52px;
    display: block;
    margin: 0 auto
}

.feature p {
    font-size: 13.5px;
    line-height: 1.4;
    color: var(--ink);
    max-width: 16ch;
    margin: 0 auto;
}


/* ================= PRODUCT / ORDER SECTION ================= */
.order {
    max-width: 1280px;
    margin: 0 auto;
    padding: 96px 40px 40px;
    display: grid;
    gap: 48px;
    align-items: start;
}

.order-media {
    position: static;
    border-radius: var(--r-img);
    overflow: hidden;
    background: var(--bone);
    aspect-ratio: 1/1;
}

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

.order-eyebrow {
    font-family: var(--script);
    font-size: 22px;
    color: var(--stone-text);
    margin-bottom: 6px;
}

.order-title {
    font-family: var(--serif);
    font-weight: 340;
    font-size: clamp(30px, 4vw, 40px);
    line-height: 1.08;
    letter-spacing: -.015em;
    margin-bottom: 14px;
}

.order-intro {
    font-size: 15px;
    color: var(--ink-soft);
    line-height: 1.6;
    max-width: 46ch;
    margin-bottom: 26px;
}

/* kit selector - lifted from kit page */
.kits {
    display: grid;
    gap: 10px
}

.kit {
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    color: var(--ink);
    background: var(--white);
    border: 1px solid var(--hairline);
    border-radius: var(--r-card);
    padding: 20px 22px;
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 4px 16px;
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
    -webkit-text-fill-color: currentColor;
}

.kit .name,
.kit .price {
    color: var(--ink);
    -webkit-text-fill-color: var(--ink)
}

.kit .radio {
    grid-row: 1 / span 3;
    grid-column: 3;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    border: 1.5px solid var(--hairline);
    align-self: center;
    position: relative;
    transition: border-color .2s ease
}

.kit .radio::after {
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: var(--ink);
    transform: scale(0);
    transition: transform .2s cubic-bezier(.34, 1.4, .64, 1)
}

.kit:hover .radio {
    border-color: var(--stone)
}

.kit[aria-pressed="true"] .radio {
    border-color: var(--ink)
}

.kit[aria-pressed="true"] .radio::after {
    transform: scale(1)
}

.kit:hover {
    border-color: var(--stone)
}

.kit[aria-pressed="true"] {
    border-color: var(--ink);
    box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .35)
}

.kit .name {
    font-family: var(--serif);
    font-weight: 420;
    font-size: 19px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap
}

.badge {
    font-family: var(--sans);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    background: var(--ink);
    color: var(--white);
    -webkit-text-fill-color: var(--white);
    padding: 4px 10px;
    border-radius: 100px
}

.badge.soft {
    color: var(--ink);
    -webkit-text-fill-color: var(--ink)
}

.badge.soft {
    background: var(--bone);
    color: var(--ink)
}

.kit .desc {
    grid-column: 1;
    font-size: 13px;
    color: var(--ink-soft);
    line-height: 1.5;
    max-width: 34ch
}

.kit .more {
    grid-column: 1;
    margin-top: 8px;
    font-size: 12px;
    font-weight: 500;
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: var(--stone);
    background: none;
    border: 0;
    padding: 0;
    justify-self: start
}

.kit .more:hover {
    text-decoration-color: var(--ink)
}

.kit .price {
    grid-row: 1 / span 3;
    grid-column: 2;
    font-family: var(--serif);
    font-weight: 420;
    font-size: 20px;
    align-self: center
}

/* add to cart - home teaser uses cart, not express checkout */
/* express checkout - lifted from kit page */
.express {
    margin-top: 16px;
    display: grid;
    gap: 10px
}

.pay-btn {
    height: 52px;
    border: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: .01em;
    transition: opacity .2s ease, transform .15s ease;
    font-family: var(--sans);
    cursor: pointer;
}

.pay-btn:active {
    transform: scale(.995)
}

.apple {
    background: var(--ink);
    color: var(--white);
    border-radius: var(--r-btn)
}

.apple svg {
    height: 20px;
    fill: #fff
}

.card-btn {
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--ink);
    border-radius: var(--r-btn);
}

.express-note {
    text-align: center;
    font-size: 12px;
    color: var(--ink-faint);
    margin-top: 2px;
}

/* what's included lightbox - lifted from kit page */
dialog.inc {
    border: 0;
    padding: 0;
    margin: auto;
    background: var(--porcelain);
    border-radius: var(--r-img);
    max-width: 820px;
    width: calc(100% - 32px);
    max-height: calc(100dvh - 48px);
    overflow: auto
}

dialog.inc::backdrop {
    background: rgba(0, 0, 0, .55);
    backdrop-filter: blur(2px)
}

.inc-wrap {
    display: grid;
    gap: 0;
    position: relative
}

.inc-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: var(--white);
    font-size: 17px;
    line-height: 1;
    display: grid;
    place-items: center;
    box-shadow: 0 4px 14px -6px rgba(0, 0, 0, .25);
    z-index: 2
}

.inc-close:focus:not(:focus-visible) {
    outline: none
}

.inc-close:focus-visible {
    outline: 2px solid var(--stone);
    outline-offset: 2px
}

.inc-photo {
    padding: 20px 20px 0
}


.inc-photo img {
    width: 100%;
    height: auto;
    aspect-ratio: 2/1;
    max-height: 26vh;
    object-fit: cover;
    border-radius: var(--r-card)
}


.inc-body {
    padding: 24px 24px 28px;
    align-self: center
}

.inc-body h2 {
    font-family: var(--serif);
    font-weight: 420;
    font-size: clamp(26px, 4vw, 34px);
    letter-spacing: -.01em
}

.inc-price {
    font-family: var(--serif);
    font-size: 22px;
    color: var(--stone-text);
    margin: 6px 0 20px
}

.inc-h {
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: 12px
}

.inc-list {
    list-style: none;
    display: grid;
    gap: 9px;
    margin-bottom: 20px
}

.inc-list li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 14.5px;
    line-height: 1.45
}

.inc-list .tick {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: var(--stone);
    display: grid;
    place-items: center;
    margin-top: 2px
}

.inc-list .tick svg {
    width: 9px;
    height: 9px;
    stroke: var(--white);
    stroke-width: 3;
    fill: none
}

.inc-list.not li {
    color: var(--ink-faint)
}

.inc-list.not .tick {
    background: var(--bone)
}

.inc-list.not .tick svg {
    stroke: var(--ink-faint);
    stroke-width: 2.5
}

.inc-choose {
    width: 100%;
    height: 50px;
    background: var(--ink);
    color: var(--white);
    border: 0;
    border-radius: var(--r-btn);
    font-size: 15px;
    font-weight: 500;
    margin-top: 4px
}

/* reassurance + payments + timeline - lifted from kit page */
.reassure {
    display: flex;
    justify-content: center;
    gap: 18px;
    font-size: 12px;
    color: var(--ink-soft);
    margin-top: 16px;
    flex-wrap: wrap
}

.reassure span {
    display: flex;
    align-items: center;
    gap: 6px
}

.reassure svg {
    width: 13px;
    height: 13px;
    stroke: var(--stone);
    fill: none;
    stroke-width: 2
}

.paymethods {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-top: 14px
}

.paymethods img {
    height: 31px;
    width: auto;
    background: var(--white);
    border-radius: 3px
}

.timeline {
    margin-top: 28px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    text-align: center;
    position: relative
}

.timeline::before {
    content: "";
    position: absolute;
    top: 21px;
    left: 16.66%;
    right: 16.66%;
    height: 1px;
    background: var(--stone);
    opacity: .45
}

.tl-step {
    position: relative;
    font-size: 12px;
    color: var(--ink-soft)
}

.tl-step .node {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--bone);
    margin: 0 auto 12px;
    position: relative;
    z-index: 1;
    outline: 6px solid var(--porcelain);
    display: grid;
    place-items: center
}

.tl-step .node svg {
    width: 20px;
    height: 20px;
    stroke: var(--ink);
    fill: none;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round
}

.tl-step .lab {
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: 3px
}

.tl-step b {
    color: var(--ink);
    font-weight: 600;
    font-size: 14px
}

/* ================= STEPS: from kit to keepsake (lifted from kit page) ================= */
.steps {
    /* Single source for the carousel gutter. .steps-head centres itself
       with these; .steps-track reproduces the same offset with padding.
       Derived from one pair of numbers so the two cannot drift apart -
       which is exactly what happened when a fixed pixel offset was copied
       here from a page with a different container. */
    --steps-max: 1280px;
    --steps-pad: 40px;
    background: var(--white);
    border-top: 1px solid var(--hairline);
    padding: 72px 0 80px;
    margin-top: 64px
}

.steps-head {
    max-width: var(--steps-max);
    margin: 0 auto;
    padding: 0 var(--steps-pad);
    display: grid;
    gap: 28px
}

.steps .pill {
    display: inline-block;
    background: var(--bone);
    border-radius: 100px;
    font-size: 12px;
    letter-spacing: .06em;
    padding: 8px 16px;
    margin-bottom: 20px
}

.steps h2 {
    font-family: var(--serif);
    font-weight: 340;
    font-size: clamp(34px, 5vw, 52px);
    line-height: 1.06;
    letter-spacing: -.015em
}

.steps h2 .mins {
    font-family: var(--script);
    font-size: .85em;
    color: var(--stone-text);
    white-space: nowrap
}

.steps-intro {
    font-size: 15.5px;
    color: var(--ink-soft);
    line-height: 1.65;
    max-width: 46ch;
    margin-top: 18px
}

.steps-nav {
    display: flex;
    gap: 10px;
    justify-self: start;
    margin-bottom: 6px
}

.s-nav {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--hairline);
    background: var(--white);
    font-size: 16px;
    display: grid;
    place-items: center;
    transition: background .2s ease, border-color .2s ease;
    color: var(--ink);
    -webkit-tap-highlight-color: transparent
}

.s-nav:hover {
    background: var(--porcelain);
    border-color: var(--stone)
}

.s-nav:focus {
    outline: none
}

.s-nav:focus:not(:focus-visible) {
    outline: none
}

.s-nav:focus-visible {
    outline: 2px solid var(--stone);
    outline-offset: 2px
}

.steps-track {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-top: 36px;
    padding-bottom: 8px;
    padding-left: max(var(--steps-pad), calc(50% - var(--steps-max) / 2 + var(--steps-pad)));
    padding-right: 24px;
    scroll-padding-left: max(var(--steps-pad), calc(50% - var(--steps-max) / 2 + var(--steps-pad)));
    scrollbar-width: none
}

.steps-track::-webkit-scrollbar {
    display: none
}

.step-card {
    position: relative;
    flex: 0 0 min(400px, 82vw);
    aspect-ratio: 4/5;
    border-radius: var(--r-img);
    overflow: hidden;
    scroll-snap-align: start;
    background: var(--bone)
}

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

.step-card .scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .28) 45%, rgba(0, 0, 0, .08) 70%, rgba(0, 0, 0, 0) 100%)
}

.step-card.placeholder .num-big {
    position: absolute;
    top: 24px;
    right: 28px;
    font-family: var(--serif);
    font-size: 88px;
    font-weight: 340;
    color: rgba(0, 0, 0, .14);
    line-height: 1
}

.step-card.placeholder .scrim {
    background: linear-gradient(to top, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .12) 50%, rgba(0, 0, 0, 0) 100%)
}

.step-chip {
    position: absolute;
    top: 20px;
    left: 20px;
    background: rgba(255, 255, 255, .88);
    backdrop-filter: blur(4px);
    border-radius: 10px;
    font-family: var(--serif);
    font-size: 17px;
    padding: 8px 12px
}

.step-body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 22px 24px 24px
}

.step-body h3 {
    font-family: var(--serif);
    font-weight: 420;
    font-size: 23px;
    color: var(--bone);
    margin-bottom: 8px
}

.step-body p {
    font-size: 14px;
    line-height: 1.55;
    color: rgba(255, 255, 255, .92);
    max-width: 36ch
}

/* ================= FOIL FUSION BAND (lifted from kit page) ================= */
.fusion {
    position: relative;
    min-height: 520px;
    display: grid;
    place-items: center;
    text-align: center;
    overflow: hidden;
    isolation: isolate;
    margin-top: 0;
}

.fusion img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 40%;
    z-index: -2;
}

.fusion::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .52);
    z-index: -1
}

.fusion-inner {
    padding: 88px 24px;
    max-width: 640px
}

.fusion .fin {
    font-family: var(--script);
    font-size: 26px;
    color: var(--stone);
    display: block;
    margin-bottom: -6px;
    /* slight overlap into the heading, per home screenshot */
    position: relative;
    z-index: 1;
}

.fusion h2 {
    font-family: var(--serif);
    font-weight: 340;
    font-size: clamp(34px, 5vw, 52px);
    letter-spacing: -.015em;
    color: var(--white);
    margin-bottom: 20px;
}

.fusion p {
    font-size: 15.5px;
    line-height: 1.7;
    color: rgba(255, 255, 255, .88)
}

.fusion .fusion-cta {
    margin-top: 30px
}

/* ================= ECO: KINDER TO THE PLANET ================= */
.eco {
    background: var(--porcelain);
    text-align: center;
    padding: 88px 24px;
}

.eco-inner {
    max-width: 640px;
    margin: 0 auto
}

.eco .mark {
    width: 56px;
    height: 56px;
    margin: 0 auto 22px;
    display: grid;
    place-items: center;
}

.eco .mark img {
    width: 56px;
    height: 56px;
    display: block;
    margin: 0 auto
}

.eco p.eco-eyebrow {
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: 16px;
}

.eco h2 {
    font-family: var(--serif);
    font-weight: 340;
    font-size: clamp(28px, 4vw, 40px);
    line-height: 1.12;
    letter-spacing: -.015em;
    margin-bottom: 20px;
}

.eco p {
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--ink-soft);
    max-width: 52ch;
    margin: 0 auto 30px;
}

/* ================= CHARITY BAND ================= */
.charity {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 40px 88px;
}

.charity-card {
    position: relative;
    border-radius: var(--r-img);
    overflow: hidden;
    min-height: 440px;
    display: flex;
    align-items: center;
}

.charity-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left center;
}

.charity-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(20, 18, 16, .15) 0%, rgba(20, 18, 16, .4) 45%, rgba(20, 18, 16, .72) 100%);
}

.charity-body {
    position: relative;
    z-index: 2;
    margin-left: auto;
    width: min(460px, 90%);
    padding: 44px 44px 44px 0;
    color: var(--white);
}

.charity-body p.charity-eyebrow {
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .8);
    margin-bottom: 14px;
}

.charity-body h2 {
    font-family: var(--serif);
    font-weight: 340;
    font-size: clamp(28px, 4vw, 40px);
    line-height: 1.1;
    letter-spacing: -.015em;
    margin-bottom: 16px;
}

.charity-body p {
    font-size: 15px;
    line-height: 1.65;
    color: rgba(255, 255, 255, .85);
    margin-bottom: 26px;
    max-width: 40ch;
}

/* ================= REVIEWS (lifted from kit page) ================= */
.reviews {
    padding: 80px 0 88px;
    background: var(--porcelain);
    border-top: 1px solid var(--hairline)
}

.reviews-head {
    max-width: 1600px;
    margin: 0 auto 44px;
    padding: 0 40px;
    text-align: center
}
/* Subordinate to the Trustpilot lockup above it, deliberately: one claim is
   linked and verified, the other is not, so they should not read as equals. */
.reviews-etsy {
    margin: 14px auto 0;
    max-width: 46ch;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--ink-soft);
    text-align: center
}

.reviews-etsy b {
    color: var(--ink);
    font-weight: 600
}

.review-track {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 4px 40px 8px;
    scroll-padding-left: 40px;
    scrollbar-width: none
}

.reviews-head .tp-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px
}

.reviews-head .tp-row img {
    height: 22px;
    width: auto
}

.reviews-head h2 {
    font-family: var(--serif);
    font-weight: 340;
    font-size: clamp(30px, 4.5vw, 44px);
    letter-spacing: -.015em
}

.reviews-head a {
    display: flex;
    width: fit-content;
    margin: 14px auto 0;
    align-items: center;
    gap: 7px;
    font-size: 13.5px;
    color: var(--ink-soft);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: var(--stone)
}

.reviews-head a img {
    height: 15px;
    width: auto
}

.review-track::-webkit-scrollbar {
    display: none
}

.reviews-nav {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 28px
}

.review-card {
    flex: 0 0 min(380px, 84vw);
    scroll-snap-align: start;
    background: var(--white);
    border: 1px solid var(--hairline);
    border-radius: var(--r-card);
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 12px
}

.review-card .stars {
    height: 17px;
    width: auto;
    align-self: flex-start
}

.review-card h3 {
    font-family: var(--serif);
    font-weight: 420;
    font-size: 19px
}

.review-card p {
    font-size: 14px;
    line-height: 1.65;
    color: var(--ink-soft);
    flex: 1
}

.review-card .who {
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink-faint)
}

/* ================= FOUNDERS STORY ================= */
.founders {
    max-width: 1280px;
    margin: 0 auto;
    padding: 64px 40px 88px;
    display: grid;
    gap: 56px;
    align-items: center;
}

.founders-inner {
    max-width: 560px
}

.founders h2 {
    font-family: var(--serif);
    font-weight: 340;
    font-size: clamp(28px, 4vw, 42px);
    letter-spacing: -.015em;
    margin-bottom: 22px;
}

.founders p {
    font-size: 15.5px;
    line-height: 1.75;
    color: var(--ink-soft);
    margin-bottom: 18px;
    max-width: 52ch;
}

.founders .sign-off {
    font-size: 15px;
    color: var(--ink);
    margin-bottom: 2px
}

.founders .signature {
    font-family: var(--script);
    font-size: 34px;
    color: var(--stone-text);
    line-height: 1;
    margin: 6px 0 6px;
}

.founders .sign-role {
    font-size: 12.5px;
    letter-spacing: .04em;
    color: var(--ink-faint)
}

.founders-media {
    border-radius: var(--r-img);
    overflow: hidden;
    aspect-ratio: 5/4;
    background: var(--bone);
}

.founders-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center
}

/* ================= COMMUNITY SIGN-UP ================= */
.community {
    background: var(--stone);
    color: var(--ink);
}

.community-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 56px 40px;
    display: grid;
    gap: 28px;
    align-items: center;
}

.community h2 {
    font-family: var(--serif);
    font-weight: 340;
    font-size: clamp(26px, 3.5vw, 36px);
    letter-spacing: -.015em;
    margin-bottom: 10px;
}

.community p {
    font-size: 15px;
    line-height: 1.6;
    color: rgba(0, 0, 0, .7);
    max-width: 44ch
}

.community-form {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    min-width: min(420px, 90vw)
}

/* Status line under the community sign-up. home.html has no inline <style>
   at all, so everything for it lives here. */
.community-msg {
    font-size: 13.5px;
    line-height: 1.5;
    margin: 10px 0 0;
    min-height: 1.3em
}

.community-msg.is-ok {
    color: #7bd7ab
}

.community-msg.is-bad {
    color: #ffb4ab
}

.community-form input {
    flex: 1;
    min-width: 200px;
    padding: 15px 18px;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: var(--r-btn);
    font-family: var(--sans);
    font-size: 15px;
    background: var(--white);
    color: var(--ink);
}

.community-form input:focus {
    outline: none;
    border-color: var(--ink)
}

.community-form button {
    background: var(--ink);
    color: var(--white);
    border: 0;
    border-radius: var(--r-btn);
    padding: 0 30px;
    height: 52px;
    font-size: 15px;
    font-weight: 500;
}

/* ================= LIGHT-PAGE HEADER ================= */
/* The header is transparent until `.scrolled` adds a background, a hairline and a
   shadow. Correct on a dark-hero page: there is nothing to separate from at the top.
   On a light page the header and the page beneath are near-identical tones, so at
   scroll position 0 it has no edge at all. This settles it at rest. Deliberately
   softer than the scrolled state so it reads as a separator, not a solid bar. */
.light-scope header {
    background: rgba(240, 239, 236, .72);
    -webkit-backdrop-filter: saturate(140%) blur(14px);
    backdrop-filter: saturate(140%) blur(14px);
    box-shadow: 0 1px 0 rgba(16, 14, 12, .07), 0 2px 14px -8px rgba(16, 14, 12, .16)
}

/* Scrolled state wins: it is the stronger treatment and already declares its own. */
.light-scope header.scrolled {
    background: rgba(240, 239, 236, .62)
}

/* ================= HERO CROSSFADE (home) =================
   Scoped to .hero-fade, never bare .hero-bg: a single-image hero must not
   inherit opacity:0 and disappear. Eight slides are stacked and only the one
   carrying .on is visible; 1.6s is deliberately slow, so it reads as a film
   dissolve rather than a slideshow. */
.hero-fade img {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1.6s ease-in-out;
    will-change: opacity
}

.hero-fade img.on {
    opacity: 1
}

@media(prefers-reduced-motion:reduce) {
    .hero-fade img {
        transition: none
    }
}

/* ---- UGC reel ----
       Same pattern as .mc-videos on /franchise: an infinite marquee of portrait
       tiles, edges masked so items enter and leave rather than popping. The
       track is duplicated in the markup so the loop is seamless at -50%.
       Every tile is lazy: videos carry data-src and only load once observed,
       photos are loading="lazy", so this section costs nothing until scrolled to. */
    .ugc {
      background: var(--porcelain);
      padding: 72px 0;
      overflow: hidden
    }

    .ugc h2 {
      font-family: var(--serif);
      font-weight: 340;
      font-size: clamp(26px, 3.6vw, 38px);
      letter-spacing: -.015em;
      text-align: center;
      /* The lede has had `padding: 0 24px` all along; the h2 had nothing, so on
         a narrow phone the accent could run to the very edge. Matching gutter -
         cheap insurance rather than shrinking type that is already correct. */
      padding: 0 24px
    }

    /* Handwritten accent inside the reel heading. The build wraps `{braces}` in
       the heading copy with this class.

       word-spacing: the script face carries a 0.515em word space against
       Fraunces' 0.233em, so "forever keepsakes" had a visible hole in it while
       the space before it looked tight. Measured off a render and halved, which
       lands at 0.257em - near enough the serif space that the line reads evenly.

       The foil gradient is lifted verbatim from `h1 .kept` on the product page
       hero, so the accent shimmers the same way the hero does. `color` is a
       fallback for anything that lacks -webkit-text-fill-color. */
    .ugc h2 .ugc-accent {
      font-family: var(--script);
      font-size: 1.22em;
      font-weight: 400;
      letter-spacing: 0;
      word-spacing: -.26em;
      line-height: 1.05;
      /* Block, not inline-block: drops the accent onto its own line without a
         <br> in the copy, so it holds at every breakpoint and on every page that
         carries this component. The h2 is centred, so the block centres too.
         translateY is gone with it - that nudge existed to sit a script baseline
         next to a serif one ON THE SAME LINE. On its own line it just lifts the
         whole word off centre. */
      display: block;
      margin-top: .12em;
      color: var(--stone);
      background: linear-gradient(100deg, #7d7263 0%, #bead9d 28%, #efe6d6 46%, #f6f1e6 50%, #efe6d6 54%, #bead9d 72%, #7d7263 100%);
      background-size: 250% 100%;
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: foil 7s ease-in-out infinite
    }

    .ugc .lede {
      text-align: center;
      font-size: 15.5px;
      line-height: 1.6;
      color: var(--ink-soft);
      max-width: 56ch;
      margin: 10px auto 40px;
      padding: 0 24px
    }

    .ugc-viewport {
      width: 100%;
      overflow: hidden;
      -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
      mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent)
    }

    .ugc-track {
      display: flex;
      gap: 20px;
      width: max-content;
      animation: ugc-scroll 90s linear infinite
    }

    .ugc:hover .ugc-track {
      animation-play-state: paused
    }

    .ugc-item {
      flex: 0 0 auto;
      width: 248px;
      aspect-ratio: 9/16;
      border-radius: var(--r-card);
      overflow: hidden;
      background: var(--bone)
    }

    .ugc-item video,
    .ugc-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block
    }

    .ugc-cta {
      display: flex;
      justify-content: center;
      margin-top: 40px
    }

    @keyframes ugc-scroll {
      from {
        transform: translateX(0)
      }

      to {
        transform: translateX(-50%)
      }
    }

    /* Anyone who has asked for less motion gets a static, swipeable rail. */
    @media(prefers-reduced-motion:reduce) {
      .ugc-track {
        animation: none;
        overflow-x: auto
      }
    }

    @media(max-width:600px) {
      .ugc {
        padding: 48px 0
      }

      .ugc-item {
        width: 176px
      }
    }

/* ================= FOOTER (fresh build - four columns + watermark) ================= */
footer {
    background: var(--ink);
    color: rgba(255, 255, 255, .7);
    font-size: 13px;
    padding: 64px 40px 0
}

.foot-top {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    gap: 40px;
    grid-template-columns: repeat(4, 1fr);
}

.foot-col h4 {
    font-family: var(--sans);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--white);
    margin-bottom: 16px;
}

.foot-col h4:not(:first-child) {
    margin-top: 26px
}

.foot-col ul {
    list-style: none;
    display: grid;
    gap: 10px
}

.foot-col a {
    color: rgba(255, 255, 255, .7);
    text-decoration: none;
    transition: color .15s
}

.foot-col a:hover {
    color: var(--white)
}

.foot-contact p {
    margin-bottom: 8px;
    line-height: 1.6
}

.foot-contact .f-label {
    color: var(--white);
    font-weight: 600;
    margin-top: 18px;
    margin-bottom: 6px
}

.foot-social {
    display: flex;
    gap: 14px;
    margin: 16px 0
}

.foot-social a {
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 50%;
    display: grid;
    place-items: center
}

.foot-social svg {
    width: 16px;
    height: 16px;
    fill: rgba(255, 255, 255, .8)
}

.foot-right {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start
}

.foot-order {
    display: inline-flex
}

.foot-col .foot-order,
.foot-right .foot-order {
    color: var(--ink)
}

.foot-col .foot-order:hover,
.foot-right .foot-order:hover {
    color: var(--white)
}

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

.foot-pay .pay-chip {
    display: inline-flex;
    width: 39px;
    height: 26px;
    border-radius: 5px;
    overflow: hidden;
    background: var(--white);
}

/* Klarna ships as a badge: black wordmark on Klarna Pink (#FFA8CD). Set on the
   img via the src, so one rule covers all three chip components - no :has(),
   no markup change. The SVG interior is transparent so this paints through it.
   Amex needs no rule: it paints its own full-bleed blue card, so whatever is
   behind it never shows.

   07/08: this was originally scoped to `.foot-pay .pay-chip img` alone, which
   meant the chips under the buy button were never pink on any page using this
   stylesheet. Caught by the preview's own self-check, not by eye. */
.foot-pay .pay-chip img[src*="klarna"],
.f-pay-chip img[src*="klarna"],
.paymethods img[src*="klarna"] {
    background: #FFA8CD;
}

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

.foot-tp {
    display: flex;
    flex-direction: column;
    gap: 4px
}

.foot-tp .tp-stars {
    height: 26px;
    width: auto
}

.foot-tp .tp-meta {
    font-size: 12px;
    color: rgba(255, 255, 255, .6)
}

/* Sits directly under the TrustBox, matching .tp-meta so the two read as one
   block rather than two separate claims. */
.foot-etsy {
    font-size: 12px;
    color: rgba(255, 255, 255, .6);
    margin: 2px 0 0
}

/* The official TrustBox renders an iframe in here. Constrain it so it does not
   stretch the whole footer column; the height comes from Trustpilot's own
   data-style-height. The `> a` rule styles the no-JS fallback so it still
   reads like the badge it replaced. */
/* TrustBox iframes centre their content in whatever width they are given, so a
   wide container floats the logo into the middle of the column. Shrink the box
   to its content and it has nowhere to drift. Deliberately NOT a negative-offset
   nudge, which breaks on resize. */
/* The iframe now carries a definite pixel width from data-style-width, set in
   scripts/build-trustpilot.js. `fit-content` is gone deliberately: it could not
   work here, because the iframe's own width was a percentage resolving against
   the very container fit-content was trying to size. A definite width removes
   the slack the widget was centring itself in.

   align-self stays - it pins the box to the column's left edge. Width controls
   where the CONTENT sits inside that box. */
.foot-tp .trustpilot-widget {
    align-self: flex-start;
    max-width: 100%
}

/* Pins the CTA/payment/Trustpilot block to the bottom of the grid row, so its
   base stays level with the last franchise link even if links are added later.
   Self-correcting rather than tuned to today's content. */
.foot-col {
    display: flex;
    flex-direction: column
}

.foot-right {
    margin-top: auto
}

.foot-tp .trustpilot-widget>a {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-decoration: none
}


.foot-legal {
    max-width: 1280px;
    margin: 48px auto 0;
    padding: 24px 0 0;
    border-top: 1px solid rgba(255, 255, 255, .14);
    font-size: 12px;
    line-height: 1.7;
    color: rgba(255, 255, 255, .55);
}

.foot-legal a {
    color: rgba(255, 255, 255, .7);
    text-underline-offset: 3px
}

.foot-watermark {
    width: calc(100% + 80px);
    margin: 24px -40px 0;
    padding: 0 0 8px;
    line-height: 0;
}

.foot-watermark img {
    width: 100%;
    height: auto;
    opacity: .08;
    filter: brightness(0) invert(1);
    pointer-events: none;
    display: block;
}


/* ============ INTERIM NAV MENU (hamburger overlay) ============ */
.nav-menu {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(18, 16, 14, .98);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    padding: calc(24px + env(safe-area-inset-top)) 28px 40px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .32s ease, transform .32s ease, visibility .32s;
    overflow-y: auto;
}

/* defensive: no icon inside the menu can ever exceed its slot, even if a
   specific size rule fails to load. Specific rules below still set exact sizes. */
.nav-menu svg {
    max-width: 26px;
    max-height: 26px;
    width: 100%;
    height: 100%
}

.nav-menu.open {
    opacity: 1;
    visibility: visible;
    transform: none
}

.nav-menu-inner {
    max-width: 1180px;
    margin: 0 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    min-height: 100%
}

/* top bar: logo + close */
.nav-menu-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 36px;
    gap: 20px
}
/* 08/08: the wordmark is 9.89:1 (viewBox 184.5 x 18.65), so at 16px it is 158px
   wide. The row is CTA 205 + logo 158 + close 44 + gaps 40 = 447px, against
   354px available on a 390px phone. It overflowed by 93px, which is why the
   close button landed on top of it - and even at an illegible 8px the row is
   still 14px too wide. Hidden below 600px, where "Home" one row down does the
   same job. Above 600px there is room and it stays. */
@media (max-width: 600px) {
    .nav-menu-top .mlogo{display: block}
}

/* CTA and logo together on the left, close pushed right. */
.nav-menu-top {
    justify-content: flex-start;
    gap: 14px
}

.nav-menu-top .nav-menu-close {
    margin-left: auto
}

/* Two 1px rules were stacking above the Memory Catcher block: the last link's
   border-bottom and .nav-menu-cta's border-top. The divider belongs to the
   section, so the link loses its rule. */
.nav-menu-links a:last-child {
    border-bottom: 0
}

/* Cards sat flush to the bottom edge. safe-area-inset clears the iOS home
   indicator on top of the padding. */
.nav-menu-cards {
    /* 08/08: 28px -> 48px. With the .nav-menu 40px bottom padding that gives
   88px of clearance plus the safe-area inset, so the cards no longer read
   as sitting on the base of the screen. */
  padding-bottom: calc(48px + env(safe-area-inset-bottom))
}

.nav-menu-top .mlogo-img {
    height: 16px;
    width: auto;
    filter: brightness(0) invert(1)
}
@media (max-width:600px){
  /* AFTER the base rule on purpose - media queries add no specificity,
     so a 12px override written earlier loses to a 16px base rule below
     it. our-kit.html carries the base rule TWICE, in two <style> blocks,
     so this must follow the LAST one. */
  .nav-menu-top .mlogo-img{height: 12px}
}

.nav-menu-close {
    background: none;
    border: 0;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    cursor: pointer;
    flex: 0 0 44px;
    border-radius: 50%;
    transition: background .2s ease
}

.nav-menu-close:hover {
    background: rgba(255, 255, 255, .08)
}

.nav-menu-close svg {
    width: 26px;
    height: 26px;
    stroke: #fff;
    stroke-width: 1.7;
    fill: none
}

/* order kit button - matches the site-wide .cta style (corner radius, square arrow) */
.nav-menu-order {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: var(--white);
    color: var(--ink);
    font-family: var(--sans);
    font-weight: 500;
    font-size: 14px;
    line-height: 1;
    padding: 7px 7px 7px 16px;
    border-radius: var(--r-btn);
    text-decoration: none;
    transition: background .2s ease, color .2s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
}

.nav-menu-order:hover {
    background: var(--stone)
}

.nav-menu-order .sq {
    width: 30px;
    height: 30px;
    border-radius: var(--r-btn);
    background: var(--stone);
    display: grid;
    place-items: center;
    flex: 0 0 30px
}

.nav-menu-order .sq svg {
    width: 15px;
    height: 15px;
    stroke: var(--ink);
    stroke-width: 2;
    fill: none
}

/* two-column link grid */
.nav-menu-links {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    margin-bottom: 36px
}

.nav-menu-links a {
    font-family: var(--serif);
    font-weight: 340;
    font-size: clamp(20px, 4.8vw, 25px);
    color: #fff;
    text-decoration: none;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    transition: color .2s ease, padding-left .2s ease;
    letter-spacing: -.01em;
}

.nav-menu-links a:hover,
.nav-menu-links a.current {
    color: var(--stone);
    padding-left: 8px
}

/* bottom image cards */
.nav-menu-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: auto
}

.nav-menu-card {
    position: relative;
    display: block;
    border-radius: var(--r-img);
    overflow: hidden;
    min-height: 180px;
    text-decoration: none;
}

.nav-menu-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease
}

.nav-menu-card:hover img {
    transform: scale(1.05)
}

.nav-menu-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .05) 0%, rgba(0, 0, 0, .55) 100%)
}

.nav-menu-card-label {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 18px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px
}

.nav-menu-card-label span {
    font-family: var(--serif);
    font-weight: 420;
    font-size: 20px;
    color: #fff;
    letter-spacing: -.01em
}

.nav-menu-card-label .arw {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--stone);
    display: grid;
    place-items: center;
    flex: 0 0 30px
}

.nav-menu-card-label .arw svg {
    width: 15px;
    height: 15px;
    stroke: var(--ink);
    stroke-width: 2;
    fill: none
}

.nav-menu-note {
    margin-top: 24px;
    font-size: 12px;
    color: rgba(255, 255, 255, .4);
    letter-spacing: .02em;
    text-align: center
}

/* Franchise callout: a distinct labelled section above the two image cards,
   so the Memory Catcher world stands out from the plain nav links. */
.nav-menu-cta {
    margin-top: auto;
    padding-top: 26px;
    border-top: 1px solid rgba(255, 255, 255, .12)
}

.nav-menu-cta-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 16px
}

.nav-menu-cta-eyebrow {
    font-family: var(--sans);
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--stone)
}

.nav-menu-cta-sub {
    font-family: var(--sans);
    font-size: 13px;
    color: rgba(255, 255, 255, .55)
}

body.menu-open {
    overflow: hidden
}


/* galley page */
.gallery {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(3, 1fr);
}
.gallery .bbg-item {
    margin: 0;
}
/* galley page */


/* Media */
@media (min-width:1600px) {
    .review-track {
        padding-left: calc((100% - 1520px) / 2);
        padding-right: calc((100% - 1520px) / 2);
        scroll-padding-left: calc((100% - 1520px) / 2)
    }
}

@media (min-width:1280px) {
}

@media (max-width: 1000px) {

    /* footer */
    .foot-top {
        grid-template-columns: repeat(2, 1fr);
    }

    /* footer */
}

@media (min-width:920px) {
    .order {
        grid-template-columns: 1fr 1fr;
        gap: 56px
    }

    .order-media {
        position: sticky;
        top: 24px
    }

    .steps-head {
        grid-template-columns: minmax(0, 420px) 1fr;
        align-items: end;
        gap: 64px
    }

    .steps-nav {
        justify-self: end
    }

    .founders {
        grid-template-columns: 1fr 1fr;
        gap: 72px
    }
}

@media (max-width:919px) {
    .founders-media {
        aspect-ratio: 4/3;
        order: -1
    }
}

@media (max-width:900px) {
    .features {
        grid-template-columns: repeat(2, 1fr);
        gap: 28px 20px;
        padding: 32px 28px;
    }

    .features-head {
        grid-column: 1 / -1;
        text-align: center;
        max-width: none;
        margin-bottom: 4px;
    }
}

@media (min-width:840px) {
    .community-inner {
        grid-template-columns: 1fr auto;
        gap: 48px
    }
}

@media (max-width: 768px) {

    /* buttons */
    .cta {
        gap: 10px;
        border-radius: 8px;
        font-size: 13px;
        padding: 4px 4px 4px 12px;
    }

    .cta .sq {
        width: 26px;
        height: 26px;
        border-radius: 5px;
    }

    /* buttons */
    /* galley page */
    .gallery {
        gap: 10px;
        grid-template-columns: repeat(2, 1fr);
    }

    /* galley page */
}

@media (min-width:720px) {
    .inc-wrap {
        grid-template-columns: 1fr 1.05fr;
        align-items: stretch
    }

    .inc-photo {
        padding: 24px 0 24px 24px
    }

    .inc-photo img {
        height: 100%;
        aspect-ratio: auto;
        max-height: none
    }

    .inc-body {
        padding: 40px 40px
    }
}

@media (max-width:720px) {
    .charity-card::after {
        background: linear-gradient(180deg, rgba(20, 18, 16, .25) 0%, rgba(20, 18, 16, .72) 65%)
    }

    .charity-body {
        margin: 0;
        width: 100%;
        padding: 40px 28px
    }
}

@media(min-width:680px) {
    .nav-menu-links {
        grid-template-columns: 1fr 1fr;
        column-gap: 56px
    }

    .nav-menu-cards {
        grid-template-columns: 1fr 1fr
    }
}

@media (min-width:601px) {
    .nav-row .logotype {
        margin-right: auto
    }

    /* pushes everything else right */
    .nav-row .burger {
        order: 3
    }

    /* burger sits after the nav-right group */
    .nav-right {
        order: 2
    }
}

@media (max-width:600px) {
    header {
        padding: 16px 0
    }

    .nav-row {
        padding: 0 18px;
        gap: 12px
    }

    /* burger: plain lines, no white box, reads white on the dark hero */
    .nav-row .burger {
        order: 0;
        background: none;
        box-shadow: none;
        border-radius: 0;
        width: 30px;
        height: 30px;
        align-items: flex-start;
        padding: 0;
    }

    .nav-row .burger span {
        width: 26px;
        height: 2px;
        background: var(--white)
    }

    header.scrolled .burger span {
        background: var(--ink)
    }

    /* logo centred */
    .nav-row .logotype {
        margin: 0 auto;
        min-width: 0
    }

    .nav-row .logotype img {
        height: 18px;
        max-width: 100%;
        object-fit: contain
    }

    /* right group: order pill + cart */
    .nav-right {
        order: 1;
        margin-left: auto;
        gap: 12px
    }

    /* Order Kit becomes an outlined pill on the hero.
     Mobile-only: sized ~20% smaller than the desktop pill so it stays
     refined in the compact header. Desktop keeps the full .cta size. */
    .cta.nav-cta {
        background: transparent;
        border: 1.5px solid var(--white);
        color: var(--white);
        box-shadow: none;
        font-size: 11px;
        line-height: 1;
        padding: 4.5px 11px;
    }

    .cta.nav-cta .lbl-short {
        line-height: 1;
        white-space: nowrap
    }

    .cta.nav-cta .sq {
        display: none
    }

    .cta.nav-cta .lbl {
        display: none
    }

    .cta.nav-cta .lbl-short {
        display: inline
    }

    /* in the glass state, flip the outlined pill to dark */
    header.scrolled .cta.nav-cta {
        border-color: var(--ink);
        color: var(--ink)
    }

    .cta.nav-cta:hover {
        background: transparent;
        color: var(--white)
    }

    header.scrolled .cta.nav-cta:hover {
        color: var(--ink)
    }

    .hero {
        min-height: 560px
    }

    .hero-inner {
        padding: 104px 20px 56px
    }

    .hero-bg::after {
        background: linear-gradient(180deg, rgba(20, 18, 16, .55) 0%, rgba(20, 18, 16, .55) 60%, rgba(20, 18, 16, .75) 100%)
    }

    .features-wrap {
        margin-top: -40px;
        padding: 0 18px
    }

    .features {
        padding: 28px 22px
    }

    .hero-inner {
        padding: 96px 18px 72px
    }

    .order {
        padding: 48px 18px 32px
    }

    .steps {
        padding: 48px 0 48px;
        margin-top: 0
    }

    .steps-head {
        padding: 0 18px
    }

    .fusion {
        min-height: auto
    }

    .fusion-inner {
        padding: 56px 18px
    }

    .eco {
        padding: 48px 18px
    }

    .charity {
        padding: 0 18px 48px
    }

    .reviews {
        padding: 48px 0 48px
    }

    .reviews-head {
        padding: 0 18px;
        margin-bottom: 28px
    }

    .review-track {
        padding-left: 18px;
        padding-right: 18px;
        scroll-padding-left: 18px
    }

    .founders {
        padding: 32px 18px 48px;
        gap: 28px
    }

    .community-inner {
        padding: 40px 18px
    }

    footer {
        padding: 48px 18px 0
    }

    .foot-watermark {
        width: calc(100% + 36px);
        margin: 20px -18px 0
    }

    .nav-menu-cta {
        padding-top: 20px
    }

    .nav-menu-cta-head {
        margin-bottom: 12px;
        flex-wrap: wrap;
        gap: 2px 10px
    }

    .nav-menu-cta-sub {
        font-size: 12px
    }

    .nav-menu {
        padding: calc(20px + env(safe-area-inset-top)) 20px 28px
    }

    .nav-menu-top{margin-bottom: 22px; gap: 12px}

    /* close stays pinned top-right; order button drops to its own full-width row below */

    .nav-menu-close{position: static; margin-left: auto}

    .nav-menu-order {
        margin-bottom: 0;
        font-size: 13px;
        padding: 6px 6px 6px 15px
    }

    .nav-menu-order .sq {
        width: 28px;
        height: 28px;
        flex-basis: 28px
    }

    .nav-menu-order .sq svg {
        width: 14px;
        height: 14px
    }

    .nav-menu-links {
        margin-bottom: 22px
    }

    .nav-menu-links a {
        font-size: 18px;
        padding: 11px 0
    }

    .nav-menu-cards {
        grid-template-columns: 1fr 1fr;
        gap: 12px
    }

    .nav-menu-card {
        min-height: 120px
    }

    .nav-menu-card-label {
        left: 13px;
        right: 13px;
        bottom: 13px
    }

    .nav-menu-card-label span {
        font-size: 14px
    }

    .nav-menu-card-label .arw {
        width: 24px;
        height: 24px;
        flex-basis: 24px
    }
}

@media (max-width: 479px) {
    /* footer */
    .foot-top {
        grid-template-columns: repeat(1, 1fr);
    }
    /* footer */
}
@media (max-width:600px){
  /* The head's own 18px rule lives with the other mobile gutters;
     this keeps the track in step with it from the same variable. */
  .steps{--steps-pad: 18px}
}