:root {
  --cream: #f7f2e8;
  --paper: #fffdf8;
  --ink: #18352f;
  --forest: #183b34;
  --moss: #6c7c51;
  --clay: #bb6846;
  --line: rgba(24, 53, 47, .16);
  --serif: "Fraunces", Georgia, serif;
  --sans: "DM Sans", sans-serif;
  --ease: cubic-bezier(.32,.72,0,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--cream); font-family: var(--sans); font-size: 16px; line-height: 1.5; }
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input { font: inherit; }

.grain { position: fixed; z-index: 20; inset: 0; pointer-events: none; opacity: .2; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.11'/%3E%3C/svg%3E"); }
.skip-link { position: fixed; z-index: 30; top: 1rem; left: 1rem; transform: translateY(-200%); padding: .75rem 1rem; background: var(--ink); color: white; transition: transform .3s var(--ease); }
.skip-link:focus { transform: translateY(0); }

.site-header { position: relative; z-index: 10; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; width: min(100% - 3rem, 1400px); margin: 0 auto; padding: 1.5rem 0; }
.brand { display: flex; align-items: center; width: 9.8rem; height: 5.8rem; }
.brand img { width: 6.2rem; height: 100%; object-fit: contain; object-position: left center; content: url("assets/folefac-logo-transparent.png"); }
.desktop-nav { display: flex; gap: 2rem; font-size: .78rem; font-weight: 600; letter-spacing: .04em; }
.desktop-nav a, .nav-note { position: relative; }
.desktop-nav a::after, .nav-note::after { content: ""; position: absolute; height: 1px; background: currentColor; bottom: -.35rem; left: 0; right: 100%; transition: right .35s var(--ease); }
.desktop-nav a:hover::after, .nav-note:hover::after { right: 0; }
.nav-note { justify-self: end; font-size: .78rem; font-weight: 700; letter-spacing: .04em; }
.nav-note span { margin-left: .25rem; color: var(--clay); }
.menu-button { display: none; }

.hero { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(3rem, 7vw, 8rem); align-items: center; width: min(100% - 6rem, 1400px); min-height: calc(100dvh - 88px); margin: 0 auto; padding: 2rem 0 6.5rem; }
.hero-copy { max-width: 40rem; padding-left: clamp(0rem, 3vw, 4rem); }
.eyebrow { display: flex; align-items: center; gap: .55rem; margin: 0 0 1.25rem; color: var(--moss); font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.eyebrow span { display: inline-block; width: 1.75rem; height: 1px; background: var(--clay); }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { text-wrap: balance; }
h1 { max-width: 8.5ch; margin-bottom: 1.65rem; font-family: var(--serif); font-size: clamp(3.7rem, 6.5vw, 7.3rem); font-weight: 600; letter-spacing: -.075em; line-height: .92; }
.intro { max-width: 34rem; color: rgba(24, 53, 47, .76); font-size: clamp(1rem, 1.2vw, 1.16rem); line-height: 1.7; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.6rem; margin-top: 2.3rem; }
.button { display: inline-flex; align-items: center; gap: .9rem; padding: .38rem .4rem .38rem 1.2rem; border-radius: 99px; font-size: .83rem; font-weight: 700; transition: transform .45s var(--ease), background .45s var(--ease); }
.button span { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: rgba(255,255,255,.16); font-size: 1rem; transition: transform .45s var(--ease); }
.button:hover { transform: translateY(-3px); }
.button:hover span { transform: translate(2px, -2px) scale(1.06); }
.button:active { transform: scale(.98); }
.button-dark { background: var(--ink); color: white; }
.text-link { display: inline-flex; align-items: center; gap: .5rem; border-bottom: 1px solid currentColor; padding-bottom: .18rem; font-size: .86rem; font-weight: 700; transition: color .3s var(--ease), transform .3s var(--ease); }
.text-link:hover { color: var(--clay); transform: translateX(3px); }

.hero-art { position: relative; width: min(100%, 46rem); justify-self: end; }
.hero-shell { padding: .55rem; background: rgba(24,53,47,.1); border-radius: 14rem 14rem 1.2rem 1.2rem; }
.hero-shell img { width: 100%; aspect-ratio: .88; border-radius: calc(14rem - .55rem) calc(14rem - .55rem) .7rem .7rem; object-fit: cover; object-position: center; }
.image-caption { display: flex; align-items: center; gap: .7rem; margin: 1rem 0 0 1rem; font-family: var(--serif); font-size: .9rem; font-style: italic; }
.image-caption span { color: var(--clay); font-family: var(--sans); font-size: .65rem; font-style: normal; font-weight: 700; letter-spacing: .1em; }
.hero-stamp { position: absolute; right: -2.2rem; bottom: 3rem; display: grid; place-content: center; width: 9.5rem; height: 9.5rem; padding: .45rem; border-radius: 50%; background: var(--cream); transform: rotate(7deg); }
.hero-stamp img { width: 100%; height: 100%; object-fit: contain; }

.welcome { display: grid; grid-template-columns: .6fr 1.1fr 1fr; gap: clamp(2rem, 5vw, 6rem); align-items: start; max-width: 1400px; margin: 0 auto; padding: clamp(6rem, 12vw, 12rem) 3rem; border-top: 1px solid var(--line); }
.section-label { padding-top: .8rem; color: var(--moss); font-size: .72rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.script { margin-bottom: .4rem; color: var(--clay); font-family: var(--serif); font-size: clamp(1.65rem, 2.2vw, 2.3rem); font-style: italic; }
h2 { margin-bottom: 1.5rem; font-family: var(--serif); font-size: clamp(2.55rem, 4vw, 5rem); font-weight: 600; letter-spacing: -.065em; line-height: .96; }
.welcome-copy > p:not(.script) { max-width: 34rem; color: rgba(24,53,47,.76); line-height: 1.75; }
.warm-link { margin-top: .8rem; color: var(--clay); }
.welcome-image { margin: 0; transform: translateY(5.5rem); }
.welcome-image img { width: 100%; aspect-ratio: .83; border-radius: 12rem 12rem .7rem .7rem; object-fit: cover; }
.welcome-image figcaption { margin-top: .85rem; color: var(--moss); font-family: var(--serif); font-size: .9rem; font-style: italic; }

.collection { margin-top: clamp(7rem, 15vw, 15rem); padding: clamp(6rem, 10vw, 10rem) max(1.5rem, calc((100vw - 1320px) / 2)); background: var(--forest); color: var(--cream); }
.section-heading { display: flex; justify-content: space-between; gap: 3rem; align-items: end; margin: 0 auto 4rem; max-width: 1280px; }
.section-heading .eyebrow { color: #b6c096; }
.section-heading .eyebrow span { background: #d8a276; }
.section-heading h2 { margin: 0; }
.section-heading h2 em, .connect h2 em { color: #d8a276; font-weight: 500; }
.section-heading > p { max-width: 22rem; margin: 0 2rem .4rem 0; color: rgba(247,242,232,.72); line-height: 1.75; }
.product-grid { display: grid; grid-template-columns: 1.1fr .8fr .7fr; gap: clamp(1.2rem, 2.4vw, 2.8rem); max-width: 1280px; margin: 0 auto; align-items: end; }
.product { min-width: 0; }
.product-image { position: relative; padding: .5rem; border-radius: 12rem 12rem .65rem .65rem; overflow: hidden; }
.product-image img { width: 100%; height: 100%; object-fit: cover; border-radius: calc(12rem - .5rem) calc(12rem - .5rem) .35rem .35rem; transition: transform 1s var(--ease); }
.product:hover .product-image img { transform: scale(1.04); }
.product-large .product-image { height: 35rem; }
.product:not(.product-large) .product-image { height: 26rem; }
.product-portrait .product-image { height: 20rem; border-radius: 8rem 8rem .65rem .65rem; }
.product-portrait .product-image img { border-radius: calc(8rem - .5rem) calc(8rem - .5rem) .35rem .35rem; object-fit: contain; }
.image-dark { background: rgba(255,255,255,.15); }
.image-sage { background: #7c8b64; }
.image-clay { background: #bf7354; }
.number { position: absolute; top: 1.25rem; left: 1.25rem; display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--cream); color: var(--ink); font-size: .65rem; font-weight: 700; }
.product-copy { padding: 1.25rem .25rem 0; }
.product-type { margin-bottom: .5rem; color: #b6c096; font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.product h3 { max-width: 15ch; margin-bottom: .55rem; font-family: var(--serif); font-size: clamp(1.5rem, 2vw, 2.15rem); font-weight: 500; letter-spacing: -.045em; line-height: 1.05; }
.product-copy > p:last-child { max-width: 19rem; margin: 0; color: rgba(247,242,232,.7); font-size: .9rem; }
.collection-note { max-width: 32rem; margin: 5rem auto 0; padding-top: 1.5rem; border-top: 1px solid rgba(247,242,232,.25); color: #d8a276; font-family: var(--serif); font-size: 1.1rem; font-style: italic; text-align: center; }

.values { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(3rem, 8vw, 10rem); align-items: center; max-width: 1400px; margin: 0 auto; padding: clamp(7rem, 13vw, 13rem) 3rem; }
.values-photo { position: relative; }
.values-photo img { width: 100%; aspect-ratio: 1; border-radius: .65rem 11rem 11rem .65rem; object-fit: cover; }
.photo-note { position: absolute; right: -2rem; bottom: 2.5rem; display: grid; place-content: center; width: 9rem; height: 9rem; border-radius: 50%; background: var(--clay); color: var(--paper); font-family: var(--serif); font-size: 1.05rem; font-style: italic; line-height: 1.05; text-align: center; transform: rotate(-10deg); }
.values-copy h2 { max-width: 10ch; }
.values-list { border-top: 1px solid var(--line); }
.values-list > div { display: grid; grid-template-columns: 2rem 1fr; gap: 1rem; padding: 1.25rem 0; border-bottom: 1px solid var(--line); }
.values-list span { padding-top: .18rem; color: var(--clay); font-size: .7rem; font-weight: 700; }
.values-list p { max-width: 25rem; margin: 0; color: rgba(24,53,47,.75); font-size: .92rem; line-height: 1.65; }
.values-list strong { display: block; color: var(--ink); font-size: 1rem; }

.gathering { position: relative; overflow: hidden; width: min(100% - 3rem, 1400px); height: clamp(24rem, 53vw, 45rem); margin: 0 auto; border-radius: .75rem; }
.gathering::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(19,40,35,.67), rgba(19,40,35,.02) 68%); }
.gathering img { width: 100%; height: 100%; object-fit: cover; }
.gathering-overlay { position: absolute; z-index: 1; inset: 0; display: flex; align-items: end; padding: clamp(1.75rem, 6vw, 6rem); color: var(--paper); }
.gathering-overlay p { max-width: 17ch; margin: 0; font-family: var(--serif); font-size: clamp(2.3rem, 4.3vw, 5.2rem); font-weight: 500; letter-spacing: -.06em; line-height: .95; }

.connect { display: grid; grid-template-columns: 1fr .8fr; gap: 6rem; align-items: center; max-width: 1280px; margin: 0 auto; padding: clamp(7rem, 13vw, 13rem) 3rem; }
.connect-copy h2 { margin-bottom: 1rem; }
.connect-copy > p:last-child { max-width: 25rem; color: rgba(24,53,47,.72); line-height: 1.75; }
.signup { padding: .5rem; border-radius: 1.25rem; background: rgba(24,53,47,.1); }
.signup { position: relative; min-height: 18rem; padding: 2rem; overflow: hidden; background: var(--paper); }
.signup-kicker { margin-bottom: 2.5rem; color: var(--moss); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.signup-title { position: relative; z-index: 1; max-width: 12ch; margin-bottom: 1rem; font-family: var(--serif); font-size: clamp(1.7rem, 2.4vw, 2.5rem); font-weight: 500; letter-spacing: -.05em; line-height: 1.04; }
.form-message { position: relative; z-index: 1; max-width: 25rem; margin: 0; color: rgba(24,53,47,.65); font-size: .86rem; line-height: 1.6; }
.round-button { position: absolute; right: 1.5rem; bottom: 1.5rem; display: grid; place-items: center; width: 4.5rem; height: 4.5rem; border-radius: 50%; background: var(--clay); color: white; font-size: 1.6rem; transform: rotate(-10deg); }

.site-footer { display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: center; padding: 1.4rem max(1.5rem, calc((100vw - 1400px) / 2)); background: #193630; color: var(--cream); }
.footer-brand-lockup { width: min(100%, 19rem); }
.site-footer a { justify-self: end; font-size: .78rem; font-weight: 700; }
.site-footer nav { display: flex; justify-self: end; gap: 1.5rem; font-size: .78rem; font-weight: 700; }
.site-footer nav a { justify-self: unset; }
.desktop-nav a.active { color: var(--clay); }
.desktop-nav a.active::after { right: 0; background: var(--clay); }
.honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; opacity: 0; }

.newsletter-form { position: relative; padding: 1.6rem; border-radius: 1.25rem; background: rgba(24,53,47,.1); }
.newsletter-form > label { display: block; margin-bottom: .8rem; color: var(--moss); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.email-row { display: flex; align-items: center; gap: .5rem; padding: .45rem .45rem .45rem 1.1rem; border-radius: .9rem; background: var(--paper); }
.email-row input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); }
.email-row input::placeholder { color: rgba(24,53,47,.44); }
.round-button { display: grid; flex: 0 0 auto; place-items: center; width: 3rem; height: 3rem; border: 0; border-radius: 50%; background: var(--clay); color: white; cursor: pointer; font-size: 1.15rem; transition: transform .4s var(--ease), background .4s var(--ease); }
.round-button:hover { background: var(--ink); transform: rotate(45deg) scale(1.06); }
.round-button:active { transform: scale(.94); }
.round-button:disabled { cursor: wait; opacity: .65; }
.form-feedback { margin: .85rem 0 0; color: rgba(24,53,47,.65); font-size: .78rem; line-height: 1.5; }
.form-feedback.success { color: var(--forest); font-weight: 700; }
.collection-action { display: flex; align-items: center; justify-content: space-between; gap: 2rem; max-width: 920px; margin: 5rem auto 0; padding: 1.5rem 0 0; border-top: 1px solid rgba(247,242,232,.25); }
.collection-action p { max-width: 33rem; margin: 0; color: rgba(247,242,232,.77); }
.button-light { background: var(--cream); color: var(--ink); }
.button-light span { background: rgba(24,53,47,.1); }

.page-hero { display: grid; grid-template-columns: 1fr .72fr; gap: clamp(3rem, 8vw, 10rem); align-items: center; max-width: 1320px; min-height: 34rem; margin: 0 auto; padding: 5rem 3rem 7rem; }
.page-hero-copy h1, .contact-hero h1 { max-width: 9ch; font-size: clamp(3.4rem, 6vw, 6.8rem); }
.page-hero-copy > p:last-child, .contact-hero-copy > p:last-child { max-width: 35rem; color: rgba(24,53,47,.75); font-size: 1.05rem; line-height: 1.75; }
.page-hero-image { padding: .5rem; border-radius: 12rem 12rem .8rem .8rem; background: rgba(24,53,47,.1); }
.page-hero-image img { width: 100%; aspect-ratio: .76; border-radius: calc(12rem - .5rem) calc(12rem - .5rem) .4rem .4rem; object-fit: cover; }
.products-layout { max-width: 1320px; margin: 0 auto; padding: 0 3rem 8rem; }
.products-intro { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 3rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.products-intro p { margin: 0; color: var(--moss); font-family: var(--serif); font-size: 1.1rem; font-style: italic; }
.selection-link { color: var(--clay); font-size: .78rem; font-weight: 700; }
.selection-link [data-selection-count] { display: inline-grid; place-items: center; width: 1.45rem; height: 1.45rem; margin-right: .3rem; border-radius: 50%; background: var(--clay); color: white; font-size: .66rem; }
.catalogue { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.5rem; align-items: start; }
.catalogue-card { position: relative; display: grid; overflow: hidden; min-height: 29rem; background: var(--paper); }
.catalogue-card:nth-child(1), .catalogue-card:nth-child(4) { grid-column: span 7; grid-template-columns: 1.1fr .9fr; }
.catalogue-card:nth-child(2), .catalogue-card:nth-child(3), .catalogue-card:nth-child(5), .catalogue-card:nth-child(6) { grid-column: span 5; }
.catalogue-card:nth-child(3) { margin-top: 4rem; }
.catalogue-card:nth-child(5) { margin-top: -4rem; }
.catalogue-photo { min-height: 17rem; overflow: hidden; background: #d9cfbf; }
.catalogue-card:nth-child(1) .catalogue-photo, .catalogue-card:nth-child(4) .catalogue-photo { min-height: 100%; }
.catalogue-photo img { width: 100%; height: 100%; min-height: 17rem; object-fit: cover; transition: transform .8s var(--ease); }
.card-beans .catalogue-photo { background: #c47858; }
.card-beans .catalogue-photo img { object-fit: contain; }
.card-spice .catalogue-photo { background: #778863; }
.card-njangsang .catalogue-photo { background: #d29c70; }
.catalogue-card:hover .catalogue-photo img { transform: scale(1.04); }
.range-selector { grid-column: 1 / -1; display: grid; grid-template-columns: .75fr 1.25fr; gap: clamp(2rem, 5vw, 6rem); margin-top: 4rem; padding: clamp(2rem, 5vw, 5rem); background: #e5d7c7; }
.range-heading h2 { max-width: 10ch; margin-bottom: 1rem; font-size: clamp(2.3rem, 3.7vw, 4.3rem); }
.range-heading > p:last-child { max-width: 28rem; color: rgba(24,53,47,.72); line-height: 1.7; }
.range-groups { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.range-groups h3 { margin-bottom: .75rem; color: var(--moss); font-family: var(--sans); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.product-option { display: flex; gap: .6rem; align-items: center; padding: .65rem 0; border-bottom: 1px solid rgba(24,53,47,.16); cursor: pointer; font-size: .86rem; font-weight: 600; }
.product-option input { width: 1rem; height: 1rem; accent-color: var(--clay); }
.catalogue-body { display: flex; flex-direction: column; align-items: start; padding: 1.8rem; }
.catalogue-body h2 { margin: 0 0 .75rem; font-size: clamp(2rem, 3vw, 3.4rem); }
.catalogue-body > p:not(.product-type) { max-width: 28rem; margin-bottom: 1.6rem; color: rgba(24,53,47,.72); font-size: .92rem; line-height: 1.65; }
.select-product { display: inline-flex; align-items: center; gap: .65rem; margin-top: auto; border-bottom: 1px solid var(--ink); padding-bottom: .25rem; cursor: pointer; font-size: .77rem; font-weight: 700; }
.select-product input { position: absolute; opacity: 0; pointer-events: none; }
.select-product i { display: grid; place-items: center; width: 1.35rem; height: 1.35rem; border: 1px solid var(--ink); border-radius: 50%; font-size: 1rem; font-style: normal; transition: color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease); }
.select-product input:checked + span + i { background: var(--ink); color: white; transform: rotate(45deg); }
.select-product input:focus-visible + span { outline: 2px solid var(--clay); outline-offset: 4px; }
.selection-tray { display: flex; align-items: end; justify-content: space-between; gap: 3rem; max-width: 1250px; margin: 0 auto 9rem; padding: clamp(2rem, 5vw, 5rem); border-radius: .8rem 8rem .8rem .8rem; background: #e5d7c7; }
.selection-tray h2 { max-width: 13ch; margin-bottom: .8rem; font-size: clamp(2.3rem, 3.7vw, 4.3rem); }
.selection-empty { margin: 0; color: rgba(24,53,47,.7); font-size: .9rem; }
.selection-list, .selected-products-field ul { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.selection-list li, .selected-products-field li { padding: .35rem .65rem; border-radius: 99px; background: rgba(24,53,47,.1); font-size: .76rem; font-weight: 700; }
.mini-connect { max-width: 1320px; margin: 0 auto; padding: 0 3rem 9rem; }
.mini-connect h2 { max-width: 24ch; margin-bottom: 1.25rem; }
.mini-connect em { color: var(--clay); font-weight: 500; }

.contact-hero { display: grid; grid-template-columns: 1fr .8fr; gap: clamp(3rem, 8vw, 9rem); align-items: center; max-width: 1320px; margin: 0 auto; padding: 4.5rem 3rem 7rem; }
.contact-hero-image { margin: 0; }
.contact-hero-image img { width: 100%; aspect-ratio: .9; border-radius: 10rem .7rem 10rem .7rem; object-fit: cover; }
.contact-hero-image figcaption { margin: .8rem 0 0 1rem; color: var(--moss); font-family: var(--serif); font-size: .9rem; font-style: italic; }
.enquiry-section { display: grid; grid-template-columns: .8fr 1.1fr; gap: clamp(3rem, 8vw, 10rem); max-width: 1320px; margin: 0 auto; padding: 7rem 3rem; border-top: 1px solid var(--line); }
.enquiry-intro h2, .mailing-copy h2 { max-width: 12ch; }
.enquiry-intro > p:not(.eyebrow) { max-width: 27rem; color: rgba(24,53,47,.72); line-height: 1.7; }
.enquiry-intro > p a { color: var(--clay); text-decoration: underline; text-underline-offset: .2rem; }
.enquiry-visual { margin-top: 3rem; padding: .45rem; border-radius: 9rem 9rem .6rem .6rem; background: rgba(24,53,47,.1); }
.enquiry-visual img { width: 100%; aspect-ratio: .83; border-radius: calc(9rem - .45rem) calc(9rem - .45rem) .35rem .35rem; object-fit: cover; }
.enquiry-form { display: grid; gap: 1.4rem; padding: clamp(1.5rem, 4vw, 3rem); border-radius: .8rem; background: var(--paper); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.enquiry-form label { display: grid; gap: .5rem; color: var(--ink); font-size: .77rem; font-weight: 700; }
.enquiry-form label span { color: var(--moss); font-weight: 500; }
.enquiry-form input, .enquiry-form select, .enquiry-form textarea { width: 100%; border: 1px solid rgba(24,53,47,.2); border-radius: .35rem; outline: 0; background: transparent; padding: .85rem .9rem; color: var(--ink); transition: border-color .25s var(--ease), box-shadow .25s var(--ease); }
.enquiry-form textarea { resize: vertical; min-height: 8rem; }
.enquiry-form input:focus, .enquiry-form select:focus, .enquiry-form textarea:focus { border-color: var(--clay); box-shadow: 0 0 0 3px rgba(187,104,70,.15); }
.selected-products-field { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem; border-radius: .4rem; background: rgba(24,53,47,.06); }
.selected-products-field .field-label { margin: 0; font-size: .77rem; font-weight: 700; }
.selected-products-field ul { margin-top: .65rem; }
.selected-products-field a { flex: 0 0 auto; align-self: start; color: var(--clay); font-size: .76rem; font-weight: 700; text-decoration: underline; text-underline-offset: .25rem; }
.enquiry-form > .button { justify-self: start; border: 0; cursor: pointer; }
.mailing-section { display: grid; grid-template-columns: .9fr 1fr; min-height: 35rem; background: var(--forest); color: var(--cream); }
.mailing-photo img { width: 100%; height: 100%; min-height: 28rem; object-fit: cover; }
.mailing-copy { align-self: center; max-width: 38rem; padding: clamp(3rem, 7vw, 8rem); }
.mailing-copy .eyebrow { color: #b6c096; }
.mailing-copy .eyebrow span { background: #d8a276; }
.mailing-copy h2 { margin-bottom: 1rem; }
.mailing-copy > p:not(.eyebrow) { color: rgba(247,242,232,.73); }
.newsletter-inline { margin-top: 2rem; background: rgba(255,255,255,.12); }
.newsletter-inline > label { color: #d8a276; }
.newsletter-inline .email-row { background: var(--cream); }
.newsletter-inline .form-feedback { color: rgba(247,242,232,.75); }
.newsletter-inline .form-feedback.success { color: #d8e2b8; }

/* Home collection — packaging-led teaser */
.home-collection { margin-top: clamp(6rem, 13vw, 13rem); padding: 0 1.5rem; background: transparent; color: var(--ink); }
.home-collection-frame { max-width: 1320px; margin: 0 auto; padding: clamp(3rem, 7vw, 7rem); border-radius: .75rem 9rem .75rem .75rem; background: #e8daca; }
.home-collection-intro { display: grid; grid-template-columns: .68fr 1.25fr .72fr; gap: 2rem; align-items: end; padding-bottom: clamp(3rem, 6vw, 6rem); }
.home-collection-intro .eyebrow { margin: 0 0 .6rem; }
.home-collection-intro h2 { max-width: 12ch; margin: 0; font-size: clamp(2.9rem, 4.8vw, 5.6rem); }
.home-collection-intro h2 em { color: var(--clay); font-weight: 500; }
.home-collection-intro > p:last-child { max-width: 20rem; margin: 0 0 .5rem; color: rgba(24,53,47,.7); line-height: 1.7; }
.home-collection-content { display: grid; grid-template-columns: minmax(0, .94fr) minmax(18rem, 1fr); gap: clamp(2rem, 6vw, 7rem); align-items: center; }
.collection-collage { position: relative; min-height: 34rem; overflow: hidden; border-radius: 8rem .55rem 8rem .55rem; background: #657652; }
.collection-collage::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(21,51,45,.23), rgba(21,51,45,.03) 58%); }
.collection-collage figure { position: absolute; z-index: 1; margin: 0; overflow: hidden; }
.collage-making { inset: 0; opacity: .82; }
.collage-making img { width: 100%; height: 100%; object-fit: cover; }
.collage-garri { top: 1.8rem; right: 1.6rem; width: 48%; padding: .35rem; border-radius: 5.5rem 5.5rem .4rem .4rem; background: #f6efe4; transform: rotate(4deg); box-shadow: 0 1.2rem 3rem rgba(24,53,47,.2); }
.collage-garri img { width: 100%; aspect-ratio: .82; border-radius: calc(5.5rem - .35rem) calc(5.5rem - .35rem) .2rem .2rem; object-fit: cover; }
.collage-beans { bottom: 1.5rem; left: 1.5rem; width: 32%; padding: .35rem; border-radius: 4rem 4rem .4rem .4rem; background: #d4936d; transform: rotate(-5deg); box-shadow: 0 1.2rem 3rem rgba(24,53,47,.2); }
.collage-beans img { width: 100%; aspect-ratio: .9; border-radius: calc(4rem - .35rem) calc(4rem - .35rem) .2rem .2rem; object-fit: cover; background: #f7f2e8; }
.collection-collage > p { position: absolute; z-index: 2; right: 2rem; bottom: 1.8rem; margin: 0; color: white; font-family: var(--serif); font-size: 1.3rem; font-style: italic; line-height: 1.02; }
.collection-collage > p span { color: #eac59a; font-family: var(--sans); font-size: .65rem; font-style: normal; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.collection-paths { display: grid; }
.collection-paths > a { display: grid; grid-template-columns: 2.4rem 1fr auto; gap: .9rem; align-items: center; padding: 1.3rem 0; border-top: 1px solid rgba(24,53,47,.18); transition: transform .35s var(--ease), color .35s var(--ease); }
.collection-paths > a:hover { color: var(--clay); transform: translateX(5px); }
.collection-paths > a:last-of-type { border-bottom: 1px solid rgba(24,53,47,.18); }
.path-number { color: var(--clay); font-size: .68rem; font-weight: 700; letter-spacing: .1em; }
.collection-paths strong { display: block; font-family: var(--serif); font-size: clamp(1.45rem, 2vw, 2rem); font-weight: 500; letter-spacing: -.04em; }
.collection-paths small { display: block; margin-top: .18rem; color: rgba(24,53,47,.68); font-size: .8rem; }
.collection-paths b { display: grid; place-items: center; width: 2rem; height: 2rem; border: 1px solid rgba(24,53,47,.28); border-radius: 50%; font-size: .9rem; font-weight: 500; }
.collection-cta { display: grid; grid-template-columns: 1fr auto; gap: 1.4rem; align-items: center; margin-top: 2rem; }
.collection-cta p { max-width: 21rem; margin: 0; color: rgba(24,53,47,.7); font-size: .85rem; line-height: 1.55; }

/* Ehsey Farms — featured brand */
.featured-brand { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(2rem, 7vw, 9rem); align-items: center; max-width: 1320px; margin: clamp(6rem, 12vw, 12rem) auto 0; padding: clamp(3rem, 7vw, 7rem); overflow: hidden; border-radius: .65rem 9rem .65rem .65rem; background: #d49a23; color: #18352f; }
.featured-brand-copy { max-width: 32rem; }
.featured-brand-copy .eyebrow { margin: 0 0 1rem; }
.featured-brand-copy .eyebrow span { background: #a93e2a; }
.ehsey-logo { width: 9rem; margin-bottom: 1rem; mix-blend-mode: multiply; }
.featured-brand h2 { max-width: 10ch; margin: 0; font-size: clamp(3rem, 5vw, 5.5rem); }
.featured-brand h2 em { color: #a93e2a; font-weight: 500; }
.featured-brand-copy > p:not(.eyebrow) { max-width: 29rem; margin: 1.3rem 0 2rem; line-height: 1.72; }
.featured-brand-packs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem; align-items: end; padding: 0; }
.featured-brand-packs figure { height: clamp(21rem, 33vw, 29rem); margin: 0; overflow: hidden; border: 1px solid rgba(24,53,47,.12); border-radius: 7rem 7rem .45rem .45rem; background: #fff; box-shadow: 0 1.2rem 2.5rem rgba(24,53,47,.12); }
.featured-brand-packs figure:last-child { height: clamp(17rem, 27vw, 23rem); margin-bottom: 2.2rem; }
.featured-brand-packs img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* Our brands page */
.brands-hero { display: grid; grid-template-columns: 1fr .82fr; gap: clamp(3rem, 8vw, 10rem); align-items: center; max-width: 1320px; min-height: 38rem; margin: 0 auto; padding: 4.5rem 3rem 7rem; }
.brands-hero-copy h1 { max-width: 10ch; margin-bottom: 1.5rem; font-size: clamp(3.5rem, 6.2vw, 7rem); }
.brands-hero-copy h1 em { color: var(--clay); font-weight: 500; }
.brands-hero-copy > p:last-child { max-width: 32rem; color: rgba(24,53,47,.72); font-size: 1.05rem; line-height: 1.75; }
.brands-hero-art { display: grid; place-items: center; align-self: stretch; overflow: hidden; border-radius: 12rem 12rem .6rem .6rem; background: #d49a23; }
.brands-hero-art img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.ehsey-feature { display: grid; grid-template-columns: .84fr 1.16fr; gap: clamp(3rem, 8vw, 10rem); align-items: center; padding: clamp(5rem, 10vw, 10rem) max(1.5rem, calc((100vw - 1320px) / 2)); background: #f0dfba; }
.ehsey-story { max-width: 33rem; }
.ehsey-story .eyebrow { margin-bottom: 1.2rem; }
.ehsey-story .eyebrow span { background: #bb4630; }
.ehsey-feature-logo { width: 9rem; margin-bottom: 1.2rem; mix-blend-mode: multiply; }
.ehsey-story h2 { max-width: 10ch; margin: 0; font-size: clamp(3rem, 4.8vw, 5.6rem); }
.ehsey-story h2 em { color: #bb4630; font-weight: 500; }
.ehsey-story > p:not(.eyebrow) { margin: 1.4rem 0 2rem; line-height: 1.75; }
.ehsey-products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: end; }
.ehsey-products figure { position: relative; min-height: 17rem; margin: 0; padding: 1.2rem 1.2rem 2.8rem; overflow: hidden; border: 1px solid rgba(24,53,47,.08); border-radius: 6rem 6rem .5rem .5rem; background: #fff; }
.ehsey-products .ehsey-product-large { min-height: 26rem; }
.ehsey-products img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.ehsey-products figcaption { position: absolute; right: 0; bottom: 0; left: 0; padding: .85rem 1rem; border-top: 1px solid rgba(24,53,47,.08); background: rgba(255,255,255,.93); font-family: var(--serif); font-size: .9rem; font-style: italic; }
.kontri-feature { display: grid; grid-template-columns: 1fr .55fr; gap: clamp(3rem, 8vw, 10rem); align-items: center; max-width: 1180px; margin: 0 auto; padding: clamp(6rem, 12vw, 12rem) 3rem; }
.kontri-feature h2 { max-width: 11ch; margin: 0; font-size: clamp(2.8rem, 4.3vw, 5rem); }
.kontri-feature h2 em { color: var(--clay); font-weight: 500; }
.kontri-feature p:not(.eyebrow) { max-width: 33rem; margin: 1.3rem 0 1.7rem; color: rgba(24,53,47,.72); line-height: 1.75; }
.kontri-feature figure { margin: 0; padding: 1.5rem; border-radius: 8rem 8rem .6rem .6rem; background: #d7e0c8; }
.kontri-feature img { width: 100%; aspect-ratio: .7; object-fit: contain; }

/* Products page — editorial product board */
.product-stage { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(3rem, 8vw, 10rem); align-items: center; min-height: 43rem; margin-top: .5rem; padding: clamp(4rem, 8vw, 8rem) max(1.5rem, calc((100vw - 1320px) / 2)); background: var(--forest); color: var(--cream); }
.product-stage .eyebrow { color: #bdc89e; }
.product-stage .eyebrow span { background: #df9b77; }
.stage-copy { max-width: 39rem; padding-left: clamp(0rem, 3vw, 3rem); }
.stage-copy h1 { max-width: 8.5ch; margin-bottom: 1.5rem; font-size: clamp(3.9rem, 6.8vw, 7.4rem); color: var(--cream); }
.stage-copy h1 em { color: #df9b77; font-weight: 500; }
.stage-copy > p:last-of-type { max-width: 32rem; margin-bottom: 2rem; color: rgba(247,242,232,.74); font-size: 1.04rem; line-height: 1.75; }
.stage-link { display: inline-flex; gap: .65rem; align-items: center; border-bottom: 1px solid #df9b77; padding-bottom: .3rem; color: #df9b77; font-size: .83rem; font-weight: 700; transition: transform .35s var(--ease); }
.stage-link:hover { transform: translateX(4px); }
.stage-gallery { position: relative; width: min(100%, 42rem); min-height: 31rem; justify-self: end; }
.stage-main-image { position: absolute; top: 0; right: 0; width: 78%; margin: 0; padding: .5rem; border-radius: 13rem 13rem .7rem .7rem; background: rgba(255,255,255,.14); }
.stage-main-image img { width: 100%; aspect-ratio: .8; border-radius: calc(13rem - .5rem) calc(13rem - .5rem) .4rem .4rem; object-fit: cover; }
.stage-small-image { position: absolute; z-index: 1; bottom: 0; left: 0; width: 43%; margin: 0; padding: .4rem; border-radius: 6rem 6rem .5rem .5rem; background: #df9b77; transform: rotate(-5deg); }
.stage-small-image img { width: 100%; aspect-ratio: .79; border-radius: calc(6rem - .4rem) calc(6rem - .4rem) .25rem .25rem; object-fit: cover; }
.stage-note { position: absolute; z-index: 2; right: 2%; bottom: 1rem; margin: 0; color: var(--cream); font-family: var(--serif); font-size: 1.1rem; font-style: italic; line-height: 1.1; }
.stage-note span { display: block; margin-bottom: .4rem; color: #df9b77; font-family: var(--sans); font-size: .65rem; font-style: normal; font-weight: 700; letter-spacing: .12em; }
.product-intro { display: grid; grid-template-columns: .55fr 1.1fr .65fr; gap: 2rem; align-items: start; max-width: 1320px; margin: 0 auto; padding: clamp(6rem, 12vw, 11rem) 3rem; }
.product-intro > p:first-child { margin: .7rem 0 0; color: var(--moss); font-family: var(--serif); font-size: 1.1rem; font-style: italic; }
.product-intro h2 { max-width: 13ch; margin: 0; font-size: clamp(2.8rem, 4.3vw, 5.2rem); }
.product-intro h2 em { color: var(--clay); font-weight: 500; }
.product-intro > p:last-child { max-width: 20rem; margin: .7rem 0 0; color: rgba(24,53,47,.7); line-height: 1.75; }
.pack-showcase { max-width: 1320px; margin: 0 auto; padding: 0 3rem clamp(6rem, 11vw, 10rem); }
.pack-showcase-heading { display: flex; justify-content: space-between; gap: 2rem; align-items: end; margin-bottom: 2.4rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--line); }
.pack-showcase-heading .eyebrow { margin: 0 0 .7rem; }
.pack-showcase-heading h2 { max-width: 17ch; margin: 0; font-size: clamp(2.2rem, 3.8vw, 4.4rem); }
.pack-showcase-heading h2 em { color: var(--clay); font-weight: 500; }
.pack-shelf { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(.65rem, 1.6vw, 1.4rem); align-items: end; }
.pack-card { position: relative; display: grid; place-items: end center; min-height: clamp(15rem, 24vw, 21rem); margin: 0; padding: 1.3rem 1rem 2.8rem; overflow: hidden; border-radius: 4.5rem 4.5rem .45rem .45rem; background: #ece2d7; transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.pack-card:hover { transform: translateY(-.4rem); box-shadow: 0 1rem 2.2rem rgba(24,53,47,.12); }
.pack-card img { width: 100%; height: clamp(12rem, 17vw, 16rem); object-fit: contain; object-position: center bottom; filter: drop-shadow(.3rem .55rem .65rem rgba(24,53,47,.13)); }
.pack-card figcaption { position: absolute; right: 0; bottom: 0; left: 0; padding: .85rem 1rem; background: linear-gradient(90deg, rgba(255,255,255,.92), rgba(255,255,255,.54)); color: var(--ink); font-family: var(--serif); font-size: .9rem; font-style: italic; }
.pack-card-koki { min-height: clamp(17rem, 27vw, 23rem); background: #d6e0c6; }
.pack-card-onion { min-height: clamp(14rem, 22vw, 19rem); background: #d7d7bd; }
.pack-card-achu { min-height: clamp(16rem, 25vw, 22rem); background: #e3cfad; }
.pack-card-crayfish { min-height: clamp(18rem, 28vw, 24rem); background: #c5d0c3; }
.pack-showcase-note { max-width: 27rem; margin: 1.4rem 0 0 auto; color: rgba(24,53,47,.67); font-size: .82rem; line-height: 1.55; text-align: right; }
.product-workbench { display: grid; grid-template-columns: minmax(15rem, .34fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 6rem); max-width: 1380px; margin: 0 auto; padding: 0 3rem clamp(7rem, 11vw, 11rem); }
.selection-dock { position: sticky; top: 1.5rem; align-self: start; overflow: hidden; border-radius: .7rem 4.5rem .7rem .7rem; background: #e7d7c5; padding: 2rem; }
.dock-top { padding-bottom: 1.5rem; border-bottom: 1px solid rgba(24,53,47,.17); }
.dock-top .eyebrow { margin-bottom: .7rem; }
.selection-count { margin: 0; font-family: var(--serif); font-size: 1.05rem; font-style: italic; }
.selection-count strong { margin-right: .2rem; color: var(--clay); font-family: var(--sans); font-size: 2.6rem; font-style: normal; font-variant-numeric: tabular-nums; line-height: .7; }
.dock-list { min-height: 9.5rem; padding: 1.4rem 0; }
.selection-dock .selection-list { gap: .4rem; margin-top: 0; }
.selection-dock .selection-list li { background: rgba(255,255,255,.56); }
.selection-dock .button { width: 100%; justify-content: space-between; }
.dock-footnote { margin: 1rem 0 0; color: rgba(24,53,47,.65); font-size: .72rem; line-height: 1.5; }
.ingredient-board { min-width: 0; }
.board-head { display: flex; justify-content: space-between; gap: 2rem; align-items: end; margin-bottom: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--line); }
.board-head .eyebrow { margin: 0; }
.board-head > p:last-child { max-width: 19rem; margin: 0; color: rgba(24,53,47,.68); font-size: .9rem; line-height: 1.65; }
.ingredient-family { display: grid; grid-template-columns: .58fr 1.25fr .46fr; gap: clamp(1rem, 2.5vw, 2.4rem); align-items: start; padding: 2.6rem 0; border-bottom: 1px solid var(--line); }
.family-intro span { color: var(--clay); font-size: .7rem; font-weight: 700; letter-spacing: .12em; }
.family-intro h2 { margin: .65rem 0 .8rem; font-size: clamp(1.9rem, 2.8vw, 3.4rem); }
.family-intro p { max-width: 15rem; margin: 0; color: rgba(24,53,47,.68); font-family: var(--serif); font-size: .98rem; font-style: italic; line-height: 1.45; }
.ingredient-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.ingredient-option { display: flex; align-items: center; justify-content: space-between; gap: .7rem; min-height: 3.5rem; padding: .6rem .2rem .6rem 0; border-bottom: 1px solid rgba(24,53,47,.13); cursor: pointer; font-size: .88rem; font-weight: 700; transition: color .3s var(--ease), transform .3s var(--ease); }
.ingredient-option:nth-last-child(1):nth-child(odd) { grid-column: span 2; }
.ingredient-option:nth-child(odd) { margin-right: 1.2rem; }
.ingredient-option:hover { color: var(--clay); transform: translateX(3px); }
.ingredient-option input { position: absolute; opacity: 0; pointer-events: none; }
.ingredient-option span { display: flex; flex-wrap: wrap; gap: .32rem; align-items: baseline; }
.ingredient-option small { color: var(--moss); font-size: .68rem; font-weight: 600; letter-spacing: .03em; }
.ingredient-option i { display: grid; flex: 0 0 auto; place-items: center; width: 1.45rem; height: 1.45rem; border: 1px solid rgba(24,53,47,.4); border-radius: 50%; font-size: 1rem; font-style: normal; transition: transform .3s var(--ease), color .3s var(--ease), background .3s var(--ease); }
.ingredient-option input:checked + span + i { background: var(--ink); color: white; transform: rotate(45deg); }
.ingredient-option input:focus-visible + span { outline: 2px solid var(--clay); outline-offset: 4px; }
.family-photo { margin: 0; padding: .35rem; border-radius: 5rem 5rem .4rem .4rem; background: rgba(24,53,47,.1); }
.family-photo img { width: 100%; aspect-ratio: .65; border-radius: calc(5rem - .35rem) calc(5rem - .35rem) .2rem .2rem; object-fit: cover; }
.family-spice .family-photo { border-radius: .4rem 5rem .4rem 5rem; background: #819167; }
.family-spice .family-photo img { border-radius: .2rem calc(5rem - .35rem) .2rem calc(5rem - .35rem); }
.family-heritage .family-photo { background: #c77955; }
.product-ending { display: grid; grid-template-columns: .88fr 1.12fr; align-items: center; gap: clamp(2rem, 7vw, 8rem); max-width: 1280px; margin: 0 auto; padding: 0 3rem clamp(7rem, 12vw, 12rem); }
.product-ending h2 { max-width: 9ch; margin-bottom: 0; font-size: clamp(2.7rem, 4.2vw, 5rem); }
.product-ending h2 em { color: var(--clay); font-weight: 500; }
.product-ending img { width: 100%; aspect-ratio: 1.5; border-radius: .5rem 8rem .5rem .5rem; object-fit: cover; }

.reveal { opacity: 0; transform: translateY(2.5rem); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal-delay { transition-delay: .14s; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 800px) {
  .site-header { display: flex; justify-content: space-between; width: calc(100% - 2.5rem); padding: 1.2rem 0; }
  .brand { width: 6.4rem; height: 4.7rem; }
  .brand img { width: 4.8rem; }
  .desktop-nav, .nav-note { display: none; }
  .menu-button { position: relative; display: grid; width: 2.9rem; height: 2.9rem; place-content: center; gap: .32rem; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: transparent; cursor: pointer; }
  .menu-button span { display: block; width: 1rem; height: 1px; background: var(--ink); transition: transform .35s var(--ease); }
  .menu-button.is-open span:first-child { transform: translateY(2.5px) rotate(45deg); }
  .menu-button.is-open span:last-child { transform: translateY(-2.5px) rotate(-45deg); }
  .mobile-menu { position: fixed; z-index: 9; inset: 0; display: grid; place-items: center; background: rgba(247,242,232,.97); opacity: 0; transition: opacity .45s var(--ease); }
  .mobile-menu.is-open { opacity: 1; }
  .mobile-menu nav { display: grid; gap: 1.5rem; text-align: center; }
  .mobile-menu a { font-family: var(--serif); font-size: clamp(2rem, 9vw, 3.5rem); font-weight: 600; letter-spacing: -.06em; }
  .hero { grid-template-columns: 1fr; gap: 3rem; width: calc(100% - 2.5rem); padding: 4.5rem 0 6rem; }
  .hero-copy { padding: 0; }
  h1 { font-size: clamp(3.7rem, 15vw, 5.6rem); }
  .hero-art { width: 92%; justify-self: start; }
  .hero-stamp { right: -1.1rem; bottom: 1.7rem; width: 7.7rem; height: 7.7rem; padding: .35rem; }
  .welcome { grid-template-columns: 1fr; gap: 2.5rem; padding: 6rem 1.25rem; }
  .section-label { padding: 0; }
  .welcome-image { width: 82%; transform: none; justify-self: end; }
  .section-heading { display: block; margin-bottom: 3rem; }
  .section-heading > p { margin: 1.5rem 0 0; }
  .collection { margin-top: 2rem; padding: 6rem 1.25rem; }
  .home-collection { margin-top: 4rem; padding: 0; }
  .home-collection-frame { padding: 5rem 1.25rem; border-radius: 0; }
  .home-collection-intro { grid-template-columns: 1fr; gap: 1.2rem; padding-bottom: 3.5rem; }
  .home-collection-intro > p:last-child { margin: 0; }
  .home-collection-content { grid-template-columns: 1fr; gap: 3rem; }
  .collection-collage { min-height: 27rem; border-radius: 6rem .45rem 6rem .45rem; }
  .collage-garri { top: 1.6rem; right: 1.2rem; width: 43%; }
  .collage-beans { bottom: 1.4rem; left: 1.2rem; width: 37%; }
  .collection-collage > p { right: 1.2rem; bottom: 1.3rem; font-size: 1.05rem; }
  .collection-paths > a { padding: 1.1rem 0; }
  .collection-cta { grid-template-columns: 1fr; gap: 1rem; }
  .collection-cta .button { justify-self: start; }
  .featured-brand { grid-template-columns: 1fr; gap: 3rem; margin-top: 5rem; padding: 4rem 1.25rem; border-radius: 0; }
  .featured-brand-packs { width: 100%; justify-self: stretch; gap: .8rem; padding: 0; }
  .featured-brand-packs figure { height: 19rem; padding: 0; border-radius: 5rem 5rem .4rem .4rem; }
  .featured-brand-packs figure:last-child { height: 15rem; margin-bottom: 1.5rem; }
  .brands-hero { grid-template-columns: 1fr; gap: 3rem; min-height: 0; padding: 4rem 1.25rem 5rem; }
  .brands-hero-art { width: 82%; min-height: 24rem; justify-self: end; border-radius: 8rem 8rem .5rem .5rem; }
  .ehsey-feature { grid-template-columns: 1fr; gap: 3.5rem; padding: 5rem 1.25rem; }
  .ehsey-products { gap: .75rem; }
  .ehsey-products figure { min-height: 13rem; padding: .75rem .75rem 2.5rem; border-radius: 4rem 4rem .4rem .4rem; }
  .ehsey-products .ehsey-product-large { min-height: 19rem; }
  .kontri-feature { grid-template-columns: 1fr; gap: 3rem; padding: 5rem 1.25rem; }
  .kontri-feature figure { width: 72%; justify-self: end; padding: 1rem; border-radius: 6rem 6rem .5rem .5rem; }
  .product-grid { grid-template-columns: 1fr; gap: 3.5rem; }
  .product-large .product-image, .product:not(.product-large) .product-image { height: min(123vw, 34rem); }
  .product-portrait .product-image { height: 24rem; }
  .values { grid-template-columns: 1fr; gap: 4rem; padding: 6rem 1.25rem; }
  .values-photo { width: 91%; }
  .photo-note { right: -1.5rem; bottom: 1.5rem; width: 7.5rem; height: 7.5rem; font-size: .9rem; }
  .gathering { width: calc(100% - 2.5rem); height: 32rem; }
  .gathering img { object-position: 56% center; }
  .connect { grid-template-columns: 1fr; gap: 2.5rem; padding: 6rem 1.25rem; }
  .site-footer { grid-template-columns: 1fr; gap: .5rem; padding: 1.25rem; }
  .footer-brand-lockup { width: 16rem; }
  .site-footer nav { grid-column: 1 / -1; justify-self: start; margin-top: .7rem; }
  .site-footer nav a { margin: 0; }
  .collection-action { display: grid; gap: 1.5rem; margin-top: 4rem; }
  .collection-action .button { justify-self: start; }
  .page-hero { grid-template-columns: 1fr; gap: 2.5rem; min-height: 0; padding: 4rem 1.25rem 5rem; }
  .page-hero-copy h1, .contact-hero h1 { font-size: clamp(3.5rem, 15vw, 5.6rem); }
  .page-hero-image { width: 83%; justify-self: end; }
  .products-layout { padding: 0 1.25rem 5rem; }
  .products-intro { align-items: start; }
  .catalogue { grid-template-columns: 1fr; gap: 1.25rem; }
  .catalogue-card:nth-child(n) { grid-column: auto; grid-template-columns: 1fr; min-height: 0; margin-top: 0; }
  .range-selector { grid-column: auto; grid-template-columns: 1fr; gap: 2.5rem; margin-top: 2rem; padding: 2rem 1.5rem; }
  .range-groups { grid-template-columns: 1fr; gap: 2rem; }
  .catalogue-card:nth-child(1) .catalogue-photo, .catalogue-card:nth-child(4) .catalogue-photo { min-height: 17rem; }
  .catalogue-body { min-height: 16rem; }
  .selection-tray { display: grid; gap: 2.5rem; margin: 0 1.25rem 6rem; padding: 2rem 1.5rem; border-radius: .6rem 4rem .6rem .6rem; }
  .selection-tray .button { justify-self: start; }
  .mini-connect { padding: 0 1.25rem 6rem; }
  .contact-hero { grid-template-columns: 1fr; gap: 3rem; padding: 4rem 1.25rem 5rem; }
  .contact-hero-image { width: 84%; justify-self: end; }
  .enquiry-section { grid-template-columns: 1fr; gap: 3.5rem; padding: 6rem 1.25rem; }
  .enquiry-visual { width: 82%; }
  .enquiry-form { padding: 1.25rem; }
  .field-row { grid-template-columns: 1fr; gap: 1.4rem; }
  .selected-products-field { display: grid; }
  .mailing-section { grid-template-columns: 1fr; }
  .mailing-photo { height: 23rem; }
  .mailing-copy { padding: 5rem 1.25rem; }
  .product-stage { grid-template-columns: 1fr; gap: 3.5rem; min-height: 0; margin-top: 0; padding: 4rem 1.25rem 5rem; }
  .stage-copy { padding: 0; }
  .stage-copy h1 { font-size: clamp(3.7rem, 15vw, 5.7rem); }
  .stage-gallery { width: 100%; min-height: 24rem; }
  .stage-main-image { width: 79%; }
  .stage-small-image { width: 45%; }
  .stage-note { right: 0; bottom: .2rem; font-size: .95rem; }
  .product-intro { grid-template-columns: 1fr; gap: 1.2rem; padding: 5rem 1.25rem; }
  .product-intro > p:first-child { margin: 0; }
  .product-intro > p:last-child { margin: 0; }
  .pack-showcase { padding: 0 1.25rem 5rem; }
  .pack-showcase-heading { display: block; margin-bottom: 1.5rem; }
  .pack-showcase-heading .eyebrow { margin-bottom: .7rem; }
  .pack-shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; }
  .pack-card, .pack-card-koki, .pack-card-onion, .pack-card-achu, .pack-card-crayfish { min-height: 15rem; }
  .pack-card:nth-child(5) { grid-column: span 2; width: calc(50% - .425rem); justify-self: center; }
  .pack-showcase-note { margin: 1.2rem 0 0; text-align: left; }
  .product-workbench { grid-template-columns: 1fr; gap: 3.5rem; padding: 0 1.25rem 6rem; }
  .selection-dock { position: relative; top: auto; order: 2; padding: 1.5rem; border-radius: .6rem 3.5rem .6rem .6rem; }
  .dock-list { min-height: 5rem; }
  .board-head { display: grid; gap: 1rem; align-items: start; }
  .ingredient-family { grid-template-columns: 1fr; gap: 1.8rem; padding: 3rem 0; }
  .ingredient-options { grid-template-columns: 1fr; }
  .ingredient-option:nth-last-child(1):nth-child(odd) { grid-column: auto; }
  .ingredient-option:nth-child(odd) { margin-right: 0; }
  .family-photo { width: 46%; justify-self: end; }
  .product-ending { grid-template-columns: 1fr; gap: 2rem; padding: 0 1.25rem 6rem; }
  .product-ending img { aspect-ratio: 1.15; border-radius: .5rem 5rem .5rem .5rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}