/* =============================================================
   SARP / A2 REFINERY
   Buildless, responsive CSS. Edit these variables to restyle.
   Typefaces are included locally; the site works offline.
   ============================================================= */

@font-face {
  font-family:Sarp Sans;
  src:url('../fonts/sans-regular.otf') format('opentype');
  font-weight:400;
  font-style:normal;
  font-display:swap
}
@font-face {
  font-family:Sarp Sans;
  src:url('../fonts/sans-bold.otf') format('opentype');
  font-weight:600 900;
  font-style:normal;
  font-display:swap
}
@font-face {
  font-family:Sarp Serif;
  src:url('../fonts/serif-italic.otf') format('opentype');
  font-weight:400;
  font-style:italic;
  font-display:swap
}
:root {
  --paper:#fffefa;
  --white:#fff;
  --ink:#252722;
  --muted:#71746a;
  --red:#d92720;
  --red-dark:#b6201a;
  --green:#1f513b;
  --line:#dedfd6;
  --oat:#f1f0e8;
  --sans:'Sarp Sans',Arial,Helvetica,sans-serif;
  --serif:'Sarp Serif',Georgia,serif;
  --gutter:clamp(24px,6.3vw,112px);
  --header-height:88px;
  --ease:cubic-bezier(.22,1,.36,1)
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:var(--header-height)
}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  -webkit-font-smoothing:antialiased
}
body.modal-open {
  overflow:hidden
}
a {
  color:inherit;
  text-decoration:none
}
button,input,select,textarea {
  font:inherit
}
button,a {
  -webkit-tap-highlight-color:transparent
}
button {
  color:inherit;
  cursor:pointer
}
button {
  background:none;
  border:0;
  padding:0
}
button:disabled {
  cursor:wait
}
input,select,textarea {
  border-radius:0
}
img,svg {
  display:block
}
img {
  max-width:100%
}
svg.icon {
  width:24px;
  height:24px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex-shrink:0
}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible {
  outline:2px solid var(--red);
  outline-offset:5px
}
::selection {
  background:#f7c8bc;
  color:var(--ink)
}
h1,h2,h3,p {
  margin:0
}
h1,h2,h3 {
  font-weight:400
}
em {
  font-family:var(--serif);
  font-weight:400;
  letter-spacing:-.045em
}
p {
  line-height:1.6
}
button[hidden],[hidden] {
  display:none!important
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}
.icon-definitions {
  position:absolute;
  width:0;
  height:0;
  overflow:hidden
}
.skip-link {
  position:fixed;
  z-index:1000;
  top:12px;
  left:12px;
  background:var(--ink);
  color:white;
  padding:14px 20px;
  transform:translateY(-150%)
}
.skip-link:focus {
  transform:none
}
.section-pad {
  padding:110px var(--gutter)
}
.eyebrow {
  display:block;
  font-size:10px;
  font-weight:600;
  letter-spacing:.15em;
  line-height:1.5;
  text-transform:uppercase
}
.text-link {
  display:inline-flex;
  align-items:center;
  gap:18px;
  font-size:13px;
  line-height:1.5;
  padding:10px 0;
  border-bottom:1px solid currentColor
}
.text-link .icon {
  width:17px;
  height:17px;
  transition:transform .4s var(--ease)
}
.text-link:hover .icon {
  transform:translate(3px,-3px)
}
.circle-link {
  display:grid;
  place-items:center;
  flex-shrink:0;
  width:78px;
  height:78px;
  border:1px solid var(--ink);
  border-radius:50%;
  transition:background .3s,color .3s,transform .4s var(--ease)
}
.circle-link:hover {
  background:var(--ink);
  color:var(--paper);
  transform:rotate(8deg)
}
.circle-link .icon {
  width:30px;
  height:30px
}
.primary-button {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  min-height:62px;
  padding:18px 26px;
  background:var(--red);
  color:white;
  font-size:14px;
  transition:background .3s
}
.primary-button:hover {
  background:var(--red-dark)
}

/* Navigation */

.site-header {
  height:var(--header-height);
  position:fixed;
  inset:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 var(--gutter);
  z-index:40;
  border-bottom:1px solid transparent;
  transition:background .4s,border-color .4s;
  isolation:isolate
}
.site-header.scrolled {
  background:rgba(255,254,250,.93);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border-bottom-color:var(--line)
}
.brand {
  display:flex;
  align-items:center;
  gap:14px
}
.a2-mark {
  height:32px;
  width:48px;
  overflow:hidden;
  mix-blend-mode:multiply
}
.brand-divider {
  height:28px;
  width:1px;
  background:var(--line)
}
.brand-name {
  font-size:17px;
  font-weight:600;
  letter-spacing:.09em;
  line-height:1.2
}
.brand-name>span {
  display:block;
  font-size:6.5px;
  letter-spacing:.12em;
  margin-top:4px;
  color:var(--muted)
}
.desktop-nav {
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:34px
}
.desktop-nav a {
  font-size:12px;
  position:relative;
  padding:12px 0
}
.desktop-nav a:after {
  content:'';
  position:absolute;
  left:0;
  right:0;
  bottom:4px;
  height:1px;
  background:var(--red);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .3s
}
.desktop-nav a:hover:after {
  transform:scaleX(1)
}
.header-contact {
  display:flex;
  align-items:center;
  gap:17px;
  font-size:12px
}
.round-arrow {
  width:35px;
  height:35px;
  background:var(--ink);
  color:var(--paper);
  border-radius:50%;
  display:grid;
  place-items:center;
  transition:background .3s,transform .4s var(--ease)
}
.round-arrow .icon {
  width:17px;
  height:17px
}
.header-contact:hover .round-arrow {
  transform:rotate(45deg);
  background:var(--red)
}
.menu-toggle {
  display:none
}
.mobile-nav {
  display:none
}

/* The signature scroll story. All motion is native scroll + requestAnimationFrame. */

.product-story {
  position:relative;
  height:650svh;
  min-height:3900px
}
.product-stage {
  position:sticky;
  top:0;
  width:100%;
  height:100svh;
  min-height:650px;
  max-height:none;
  overflow:hidden;
  background:var(--paper);
  isolation:isolate
}
.stage-topline {
  position:absolute;
  top:calc(var(--header-height) + 26px);
  left:var(--gutter);
  right:var(--gutter);
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:9px;
  letter-spacing:.13em;
  z-index:5
}
.stage-topline>span {
  display:flex;
  align-items:center;
  gap:9px
}
.stage-topline i,.green-dot {
  display:inline-block;
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--red)
}
.stage-topline .origin {
  font-size:8px;
  color:var(--muted);
  letter-spacing:.12em
}
.ghana-flag {
  width:13px;
  height:9px;
  display:inline-block;
  background:linear-gradient(to bottom,#ce332f 0 33%,#f0c541 33% 66%,#347344 66%)
}

.story-headlines {
  position:absolute;
  left:var(--gutter);
  top:34%;
  width:31%;
  height:38%;
  z-index:4
}
.story-headline {
  position:absolute;
  inset:0;
  opacity:0;
  will-change:opacity,transform
}
.story-headline.is-initial {
  opacity:1
}
.story-headline .eyebrow {
  font-size:8px;
  letter-spacing:.13em;
  color:var(--red);
  display:flex;
  gap:16px;
  align-items:center;
  margin-bottom:23px
}
.chapter {
  color:var(--muted);
  font-weight:400;
  letter-spacing:.06em
}
.story-headline h2 {
  font-size:clamp(55px,5.25vw,92px);
  letter-spacing:-.066em;
  line-height:.98
}
.story-headline h2 em {
  color:var(--red);
  letter-spacing:-.06em
}
.story-headline p {
  margin-top:26px;
  font-size:12px;
  line-height:1.7;
  color:var(--muted)
}
.product-images {
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none
}
.product-layer {
  position:absolute;
  top:53%;
  left:51.5%;
  transform:translate(-50%,-46%);
  height:var(--pack-height);
  max-height:650px;
  aspect-ratio:var(--pack-ratio);
  width:auto;
  opacity:0;
  mix-blend-mode:multiply;
  will-change:opacity,transform
}
.product-layer.is-initial {
  opacity:1
}
.product-layer>img {
  height:100%;
  width:100%;
  overflow:hidden;
  will-change:transform,clip-path
}
.product-orbit {
  position:absolute;
  bottom:17.5%;
  left:51.5%;
  width:38vw;
  height:10vw;
  max-height:140px;
  transform:translateX(-50%);
  border:1px solid #e9e5d9;
  border-radius:50%;
  opacity:.7;
  z-index:0
}
.purity-seal {
  position:absolute;
  top:24%;
  left:62.3%;
  width:96px;
  height:96px;
  z-index:5;
  color:var(--green);
  transform:rotate(14deg);
  pointer-events:none
}
.purity-seal svg {
  fill:none;
  stroke:currentColor;
  stroke-width:1.1
}
.purity-seal text {
  fill:currentColor;
  stroke:none;
  font-size:8px;
  letter-spacing:1.3px
}
.story-descriptions {
  position:absolute;
  right:var(--gutter);
  top:39%;
  width:21%;
  height:42%;
  z-index:4
}
.story-description {
  position:absolute;
  inset:0;
  opacity:0;
  will-change:opacity,transform;
  pointer-events:none
}
.story-description.is-initial {
  opacity:1;
  pointer-events:auto
}
.pack-label {
  display:block;
  font-size:8px;
  letter-spacing:.14em;
  color:var(--green);
  margin-bottom:19px
}
.story-description h3 {
  font-size:clamp(25px,2.4vw,40px);
  line-height:1.12;
  letter-spacing:-.045em
}
.story-description>p {
  max-width:265px;
  margin-top:18px;
  color:var(--muted);
  font-size:12px;
  line-height:1.7
}
.pack-volume {
  font-size:clamp(44px,5vw,85px);
  line-height:1;
  letter-spacing:-.055em;
  margin-top:25px
}
.pack-volume span {
  font-size:.3em;
  letter-spacing:-.03em;
  margin-left:5px
}
.story-description .text-link {
  font-size:10px;
  gap:16px;
  margin-top:11px
}
.story-description .text-link .icon {
  width:14px;
  height:14px
}
.purity-note {
  position:absolute;
  left:var(--gutter);
  bottom:15.5%;
  display:flex;
  align-items:center;
  gap:13px;
  font-size:10px;
  color:var(--green);
  line-height:1.7;
  z-index:4
}
.purity-note .icon {
  width:29px;
  height:29px;
  stroke-width:1.1
}
.purity-note strong {
  font-weight:400;
  color:var(--muted)
}
.product-note {
  position:absolute;
  bottom:12.5%;
  left:50%;
  transform:translateX(-50%);
  font-size:9px;
  color:var(--muted);
  white-space:nowrap
}
.story-bottom {
  position:absolute;
  bottom:33px;
  left:var(--gutter);
  right:var(--gutter);
  display:flex;
  align-items:center;
  justify-content:space-between;
  z-index:8
}
.scroll-cue {
  display:flex;
  align-items:center;
  gap:20px;
  font-size:8px;
  letter-spacing:.13em;
  color:var(--muted)
}
.scroll-cue .icon {
  width:17px;
  height:17px;
  animation:nudge-down 2.6s ease-in-out infinite
}
.size-selector {
  display:flex;
  align-items:center;
  gap:5px;
  padding:5px;
  background:#f0eee7;
  border:1px solid #e6e3d9;
  border-radius:40px
}
.size-selector button {
  min-width:54px;
  min-height:34px;
  padding:9px 13px;
  font-size:10px;
  border-radius:25px;
  transition:background .3s,color .3s,box-shadow .3s
}
.size-selector button.active {
  color:white;
  background:var(--ink);
  box-shadow:0 2px 5px #0000000a
}
.size-selector button:hover:not(.active) {
  background:#e4e0d5
}
.product-detail-link {
  display:flex;
  align-items:center;
  gap:14px;
  font-size:10px
}
.product-detail-link .icon {
  width:18px;
  height:18px;
  border:1px solid var(--line);
  border-radius:50%;
  padding:2px
}
.story-progress {
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  height:2px;
  background:#e9e6dd
}
.story-progress span {
  display:block;
  height:100%;
  width:100%;
  background:var(--red);
  transform:scaleX(0);
  transform-origin:left
}
@keyframes nudge-down {
  0%,100% {
    transform:translateY(-2px)
  }
  50% {
    transform:translateY(3px)
  }
}

/* Editorial introduction */

.goodness-intro {
  padding-top:135px;
  padding-bottom:80px;
  background:white
}
.goodness-intro>.eyebrow {
  text-align:center;
  color:var(--green)
}
.statement {
  text-align:center;
  font-size:clamp(40px,5.6vw,94px);
  line-height:1.04;
  letter-spacing:-.06em;
  margin-top:32px
}
.statement em {
  color:var(--red)
}
.intro-bottom {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:46px;
  margin-left:50%
}
.intro-bottom p {
  font-size:13px;
  color:var(--muted)
}
.intro-bottom .circle-link {
  width:56px;
  height:56px;
  margin-left:26px
}
.intro-bottom .circle-link .icon {
  width:23px;
  height:23px
}
.qualities {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:80px;
  padding-top:28px;
  border-top:1px solid var(--line);
  gap:20px
}
.qualities>span {
  display:flex;
  align-items:center;
  gap:11px;
  font-size:12px
}
.qualities>span .icon {
  color:var(--green);
  width:21px;
  height:21px
}
.qualities .text-link {
  padding:0;
  border:0;
  font-size:12px
}
.qualities .text-link .icon {
  color:var(--red)
}

/* Kitchen photography and cooking inspiration */

.kitchen-banner {
  height:720px;
  height:min(85vw,780px);
  min-height:540px;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  color:white
}
.kitchen-banner>img {
  width:100%;
  height:115%;
  object-fit:cover;
  object-position:center 55%;
  position:absolute;
  inset:-7.5% 0 auto;
  will-change:transform
}
.kitchen-shade {
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,#12160e6e 0%,#10160c18 70%),linear-gradient(0deg,#14200c5c,transparent 65%)
}
.kitchen-caption {
  position:absolute;
  left:var(--gutter);
  bottom:100px
}
.kitchen-caption .eyebrow {
  font-size:9px;
  letter-spacing:.16em;
  margin-bottom:24px
}
.kitchen-caption h2 {
  font-size:clamp(45px,5.3vw,86px);
  letter-spacing:-.055em;
  line-height:1.02
}
.kitchen-caption p {
  margin-top:22px;
  font-size:14px;
  opacity:.85
}
.image-credit {
  position:absolute;
  bottom:35px;
  right:var(--gutter);
  font-size:8px;
  letter-spacing:.14em;
  color:#ffffffad
}
.cooking-section {
  background:white;
  padding-top:130px;
  padding-bottom:90px
}
.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:35px;
  margin-bottom:55px
}
.section-heading .eyebrow {
  color:var(--green);
  margin-bottom:22px
}
.section-heading h2 {
  font-size:clamp(46px,5.1vw,82px);
  line-height:1.02;
  letter-spacing:-.058em
}
.section-heading h2 em {
  color:var(--red)
}
.section-heading>p {
  font-size:12px;
  color:var(--muted);
  margin-bottom:8px;
  max-width:320px
}
.cooking-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
  align-items:start
}
.cooking-card {
  text-align:left;
  display:block;
  width:100%
}
.cooking-card:nth-child(2) {
  margin-top:60px
}
.cooking-card:nth-child(3) {
  margin-top:120px
}
.cooking-image {
  position:relative;
  aspect-ratio:.79;
  overflow:hidden;
  background:var(--oat)
}
.cooking-image>img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .85s var(--ease)
}
.cooking-image:after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(0deg,#1c1b1640,transparent 45%)
}
.cooking-card:hover .cooking-image>img {
  transform:scale(1.045)
}
.card-open {
  position:absolute;
  top:18px;
  right:18px;
  z-index:2;
  width:40px;
  height:40px;
  background:var(--paper);
  border-radius:50%;
  display:grid;
  place-items:center;
  transition:background .3s,color .3s
}
.card-open .icon {
  width:18px;
  height:18px
}
.cooking-card:hover .card-open {
  background:var(--red);
  color:white
}
.cooking-category {
  position:absolute;
  bottom:24px;
  left:24px;
  z-index:2;
  color:white;
  font-size:9px;
  letter-spacing:.17em
}
.cooking-card-caption {
  padding-top:22px
}
.cooking-card-caption h3 {
  font-size:29px;
  letter-spacing:-.035em
}
.cooking-card-caption>span {
  display:block;
  margin-top:8px;
  color:var(--muted);
  font-size:11px
}
.cooking-footnote {
  font-size:13px;
  color:var(--muted);
  border-top:1px solid var(--line);
  padding-top:35px;
  margin-top:65px;
  text-align:center
}

/* Refinery story */

.source-section {
  background:#f1f3ed;
  padding-top:90px;
  padding-bottom:72px
}
.source-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-bottom:30px;
  border-bottom:1px solid #ced7c9;
  color:var(--green)
}
.source-top .eyebrow {
  display:flex;
  align-items:center;
  gap:11px;
  font-size:9px
}
.green-dot {
  background:var(--green)
}
.source-index {
  font-size:8px;
  letter-spacing:.11em;
  color:#7b8676
}
.source-main {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9%;
  padding:75px 0 90px
}
.source-main h2 {
  font-size:clamp(60px,7vw,114px);
  line-height:.99;
  letter-spacing:-.065em;
  color:var(--green)
}
.source-main h2 em {
  color:var(--green)
}
.source-copy {
  max-width:440px;
  padding-top:8px
}
.source-copy .large-copy {
  font-size:28px;
  line-height:1.2;
  letter-spacing:-.035em;
  margin-bottom:28px
}
.source-copy>p:not(.large-copy) {
  color:#6b7567;
  font-size:13px;
  margin-bottom:17px;
  line-height:1.75
}
.source-copy .text-link {
  color:var(--green);
  margin-top:13px;
  font-size:12px
}
.source-journey {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:25px;
  position:relative;
  padding-top:28px;
  border-top:1px solid #bccbb5
}
.source-journey>div {
  position:relative
}
.source-journey>div:before {
  content:'';
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--green);
  position:absolute;
  top:-31px;
  left:0
}
.source-journey>div>span {
  font-size:9px;
  color:#7b8676
}
.source-journey h3 {
  font-size:24px;
  letter-spacing:-.035em;
  margin-top:20px;
  color:var(--green)
}
.source-journey p {
  font-size:11px;
  color:#6b7567;
  line-height:1.6;
  margin-top:12px
}
.source-stats {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid #ced7c9;
  margin-top:65px;
  padding-top:35px;
  gap:35px
}
.source-stats>div>span {
  font-size:64px;
  letter-spacing:-.06em;
  line-height:1;
  color:var(--green);
  display:flex;
  align-items:baseline;
  gap:12px
}
.source-stats small {
  font-size:11px;
  letter-spacing:0
}
.source-stats p {
  font-size:10px;
  margin-top:10px;
  color:#6b7567
}

/* Product range */

.range-section {
  padding-top:125px;
  padding-bottom:90px
}
.range-lineup {
  display:flex;
  justify-content:center;
  align-items:flex-end;
  gap:clamp(25px,5vw,90px);
  margin-top:90px;
  margin-bottom:80px;
  min-height:330px
}
.lineup-item {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
  flex-shrink:1;
  min-width:0;
  cursor:pointer;
  position:relative
}
.lineup-item>img {
  height:var(--lineup-height);
  width:auto;
  aspect-ratio:var(--pack-ratio);
  mix-blend-mode:multiply;
  overflow:hidden;
  transition:transform .5s var(--ease)
}
.lineup-item:hover>img {
  transform:translateY(-9px)
}
.lineup-size {
  font-size:12px;
  letter-spacing:-.02em
}
.lineup-size>small {
  display:block;
  font-size:7px;
  letter-spacing:.04em;
  color:var(--muted);
  margin-top:5px;
  position:absolute;
  bottom:-14px;
  left:50%;
  transform:translateX(-50%);
  white-space:nowrap
}
.range-table {
  width:100%;
  border-collapse:collapse;
  text-align:left;
  font-size:12px
}
.range-table thead {
  font-size:9px;
  color:var(--muted);
  letter-spacing:.1em;
  text-transform:uppercase
}
.range-table th {
  font-weight:400;
  padding:20px 0;
  border-bottom:1px solid var(--ink)
}
.range-table td {
  padding:19px 0;
  border-bottom:1px solid var(--line);
  line-height:1.5
}
.range-table td:nth-child(1) {
  width:30%
}
.range-table td:nth-child(2) {
  width:16%;
  color:var(--red)
}
.range-table td:nth-child(3) {
  color:var(--muted)
}
.range-table td:last-child {
  width:45px;
  text-align:right
}
.table-enquire {
  height:32px;
  width:32px;
  display:inline-grid;
  place-items:center;
  border:1px solid var(--line);
  border-radius:50%;
  transition:background .3s,color .3s
}
.table-enquire .icon {
  width:16px;
  height:16px
}
.table-enquire:hover {
  background:var(--ink);
  color:white
}
.range-footnote {
  margin-top:22px;
  color:var(--muted);
  font-size:9px;
  text-align:right
}

/* Trade and enquiries */

.trade-strip {
  background:var(--red);
  color:var(--paper);
  padding-top:70px;
  padding-bottom:34px
}
.trade-strip>.eyebrow {
  font-size:9px;
  color:#ffd3bd
}
.trade-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  margin-top:35px;
  margin-bottom:55px
}
.trade-inner h2 {
  font-size:clamp(40px,5vw,81px);
  line-height:1.04;
  letter-spacing:-.05em
}
.trade-inner .circle-link {
  border-color:#fffefa99;
  color:var(--paper);
  width:88px;
  height:88px
}
.trade-inner .circle-link:hover {
  background:var(--paper);
  color:var(--red)
}
.trade-bottom {
  display:flex;
  justify-content:space-between;
  gap:18px;
  font-size:8px;
  letter-spacing:.15em;
  padding-top:25px;
  border-top:1px solid #fffefa40
}
.enquiry-section {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10%;
  padding-top:130px;
  padding-bottom:120px;
  background:white
}
.enquiry-intro>.eyebrow {
  font-size:9px;
  color:var(--green)
}
.enquiry-intro h2 {
  font-size:clamp(48px,4.8vw,78px);
  letter-spacing:-.06em;
  line-height:1.02;
  margin-top:27px
}
.enquiry-intro h2 em {
  color:var(--red)
}
.enquiry-intro>p {
  font-size:13px;
  color:var(--muted);
  margin-top:26px;
  max-width:340px;
  line-height:1.7
}
.contact-phone {
  display:flex;
  align-items:center;
  gap:16px;
  font-size:21px;
  letter-spacing:-.025em;
  margin-top:36px
}
.contact-phone .icon {
  width:17px;
  height:17px;
  color:var(--red)
}
.contact-email {
  font-size:13px;
  display:inline-block;
  margin-top:8px;
  border-bottom:1px solid var(--line);
  padding-bottom:3px
}
.enquiry-intro address {
  font-size:11px;
  font-style:normal;
  line-height:1.8;
  color:var(--muted);
  margin:26px 0 20px
}
.enquiry-intro address span {
  font-size:9px
}
.enquiry-intro>.text-link {
  font-size:11px;
  color:var(--green)
}
.enquiry-form {
  padding-top:7px
}
.form-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:25px
}
.field {
  margin-bottom:30px
}
.field label {
  display:block;
  font-size:11px;
  line-height:1.5;
  margin-bottom:8px
}
.field label>span {
  color:var(--red)
}
.field label .optional {
  font-size:9px;
  color:var(--muted);
  margin-left:6px
}
.field input,.field textarea,.field select {
  display:block;
  width:100%;
  border:0;
  border-bottom:1px solid var(--line);
  background:transparent;
  min-height:47px;
  color:var(--ink);
  font-size:12px;
  padding:9px 0;
  transition:border-color .3s
}
.field select {
  padding-right:20px;
  cursor:pointer;
  white-space:normal
}
.field input:focus,.field textarea:focus,.field select:focus {
  outline:none;
  border-color:var(--red)
}
.field input::placeholder,.field textarea::placeholder {
  color:#a5a79d;
  opacity:1
}
.field textarea {
  resize:vertical;
  line-height:1.7;
  min-height:90px
}
.enquiry-form>.primary-button {
  width:100%;
  margin-top:4px
}
.form-note {
  font-size:9px;
  color:var(--muted);
  margin-top:14px;
  line-height:1.6
}
.form-status {
  font-size:11px;
  color:var(--green);
  margin-top:16px;
  line-height:1.6
}
.copy-enquiry {
  margin-top:8px;
  font-size:11px
}

/* Footer */

.site-footer {
  padding-top:50px;
  padding-bottom:25px;
  background:var(--paper);
  overflow:hidden;
  border-top:1px solid var(--line)
}
.footer-top {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:25px
}
.footer-top>p {
  font-size:14px;
  line-height:1.5;
  letter-spacing:-.015em
}
.footer-top>p>em {
  font-size:19px
}
.footer-top>.text-link {
  font-size:10px;
  border:0;
  padding-top:0
}
.footer-wordmark {
  font-family:var(--serif);
  font-style:italic;
  font-size:13.2vw;
  white-space:nowrap;
  line-height:1.15;
  letter-spacing:-.065em;
  margin:45px 0 25px;
  color:var(--green)
}
.footer-bottom {
  display:flex;
  justify-content:space-between;
  gap:25px;
  padding-top:22px;
  border-top:1px solid var(--line);
  font-size:8px;
  letter-spacing:.015em;
  color:var(--muted)
}
.footer-bottom>span:nth-child(2) {
  letter-spacing:.09em
}
.footer-privacy {
  font-size:8px;
  text-decoration:underline;
  text-underline-offset:3px
}

/* Product information and inspiration dialogs */

dialog {
  color:var(--ink);
  background:var(--paper);
  padding:0;
  border:0;
  max-height:90svh;
  max-width:calc(100% - 40px);
  box-shadow:0 30px 100px #00000026
}
dialog::backdrop {
  background:#1c241b80;
  backdrop-filter:blur(8px)
}
dialog[open] {
  animation:dialog-in .35s var(--ease)
}
.dialog-close {
  position:absolute;
  right:18px;
  top:18px;
  z-index:5;
  width:36px;
  height:36px;
  border:1px solid var(--line);
  background:var(--paper);
  border-radius:50%;
  display:grid;
  place-items:center
}
.dialog-close .icon {
  width:17px;
  height:17px
}
.dialog-close:hover {
  background:var(--ink);
  color:white
}
.detail-dialog {
  width:690px
}
.dialog-body {
  padding:60px
}
.dialog-body>.eyebrow {
  font-size:9px;
  color:var(--green)
}
.dialog-body>h2 {
  font-size:46px;
  line-height:1.04;
  letter-spacing:-.05em;
  margin-top:25px
}
.dialog-body h2 em {
  color:var(--red)
}
.dialog-lead {
  font-size:13px;
  color:var(--muted);
  margin-top:22px
}
.detail-facts {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:25px;
  margin:35px 0
}
.detail-facts h3 {
  font-size:10px;
  color:var(--green);
  font-weight:600
}
.detail-facts p {
  font-size:11px;
  color:var(--muted);
  margin-top:6px
}
.nutrition-title {
  font-size:13px;
  display:flex;
  justify-content:space-between;
  margin-bottom:10px
}
.nutrition-title>span {
  font-size:10px;
  color:var(--muted)
}
.nutrition-table {
  border-collapse:collapse;
  width:100%;
  font-size:11px
}
.nutrition-table th,.nutrition-table td {
  padding:11px 0;
  border-bottom:1px solid var(--line);
  font-weight:400
}
.nutrition-table th {
  text-align:left
}
.nutrition-table td {
  text-align:right
}
.detail-smallprint {
  font-size:9px;
  color:var(--muted);
  margin-top:18px
}
.dialog-body>.primary-button {
  width:100%;
  margin-top:30px
}
.recipe-dialog {
  width:960px;
  overflow:auto
}
.recipe-dialog[open] {
  display:grid;
  grid-template-columns:.9fr 1.1fr
}
.recipe-dialog>img {
  width:100%;
  height:100%;
  object-fit:cover;
  min-height:540px
}
.recipe-content {
  padding:65px 45px 45px
}
.recipe-content .eyebrow {
  font-size:8px;
  color:var(--green)
}
.recipe-content h2 {
  font-size:44px;
  line-height:1.04;
  letter-spacing:-.045em;
  margin:20px 0
}
.recipe-content>p:not(.recipe-note) {
  font-size:12px;
  color:var(--muted);
  line-height:1.7
}
.recipe-content h3 {
  font-size:12px;
  margin:28px 0 18px;
  color:var(--green)
}
.recipe-content ol {
  padding-left:18px;
  color:var(--muted);
  font-size:11px;
  line-height:1.8
}
.recipe-content li {
  padding-left:5px;
  margin-bottom:13px
}
.recipe-content li::marker {
  color:var(--red)
}
.recipe-note {
  font-size:9px;
  color:var(--muted);
  border-top:1px solid var(--line);
  padding-top:17px;
  margin-top:22px
}
.recipe-content>.text-link {
  font-size:11px;
  margin-top:18px
}
.privacy-dialog {
  width:620px
}
.privacy-dialog .dialog-body>p {
  font-size:13px;
  margin-top:24px;
  color:var(--muted)
}
.privacy-dialog a {
  text-decoration:underline;
  text-underline-offset:3px
}
.noscript-notice {
  padding:20px;
  background:var(--oat);
  font-size:13px;
  text-align:center
}
.noscript-notice a {
  text-decoration:underline
}
@keyframes dialog-in {
  from {
    opacity:0;
    transform:translateY(15px)
  }
  to {
    opacity:1;
    transform:none
  }
}

/* Scroll reveals are enabled only once JS has installed the observer. */

.motion-ready .reveal {
  opacity:0;
  transform:translateY(24px);
  transition:opacity .9s var(--ease),transform .9s var(--ease)
}
.motion-ready .reveal.visible {
  opacity:1;
  transform:none
}
.motion-ready .cooking-card:nth-child(2) {
  transition-delay:.09s
}
.motion-ready .cooking-card:nth-child(3) {
  transition-delay:.18s
}

/* Smaller laptops and tablets */

@media(min-width:1700px) {
  .product-layer {
    top:54%
  }
  .purity-seal {
    left:61%
  }
  .story-descriptions {
    right:8%;
    width:20%
  }
  .story-headlines {
    left:8%
  }
  
}
@media(max-width:1199px) {
  :root {
    --gutter:44px
  }
  .desktop-nav {
    gap:25px
  }
  .story-headlines {
    width:31%;
    top:35%
  }
  .story-headline h2 {
    font-size:5.8vw
  }
  .story-descriptions {
    width:22%;
    top:39%
  }
  .story-description h3 {
    font-size:26px
  }
  .story-description>p {
    font-size:11px
  }
  .product-layer {
    height:calc(var(--pack-height)*.91);
    left:51%;
    top:53%
  }
  .purity-seal {
    left:61%;
    width:77px;
    height:77px;
    top:27%
  }
  .purity-note {
    font-size:9px
  }
  .story-bottom .scroll-cue {
    font-size:7px;
    gap:10px
  }
  .size-selector button {
    min-width:47px;
    padding:9px 10px
  }
  .product-detail-link {
    font-size:9px
  }
  .intro-bottom {
    margin-left:40%
  }
  .source-main {
    gap:8%
  }
  .source-copy .large-copy {
    font-size:25px
  }
  .source-stats>div>span {
    font-size:55px
  }
  .range-lineup {
    gap:4vw
  }
  .enquiry-section {
    gap:7%
  }
  .contact-phone {
    font-size:19px
  }
}
@media(max-width:959px) {
  :root {
    --gutter:32px;
    --header-height:78px
  }
  .desktop-nav {
    gap:22px
  }
  .desktop-nav a {
    font-size:11px
  }
  .brand-name {
    font-size:15px
  }
  .a2-mark {
    width:40px;
    height:27px
  }
  .brand {
    gap:11px
  }
  .brand-name>span {
    font-size:6px
  }
  .header-contact {
    font-size:11px;
    gap:12px
  }
  .stage-topline {
    top:calc(var(--header-height) + 22px)
  }
  
  .story-headline h2 {
    font-size:6vw
  }
  .story-headline .eyebrow {
    font-size:7px;
    gap:10px
  }
  .story-headline p {
    font-size:11px
  }
  .story-descriptions {
    top:40%;
    width:22%
  }
  .story-description h3 {
    font-size:23px
  }
  .pack-label {
    font-size:7px
  }
  .pack-volume {
    font-size:51px
  }
  .story-description>p {
    font-size:10px;
    margin-top:14px
  }
  .story-description .text-link {
    font-size:8px;
    gap:9px
  }
  .product-layer {
    height:calc(var(--pack-height)*.82)
  }
  .purity-seal {
    top:28%;
    left:60%;
    width:70px;
    height:70px
  }
  .purity-note {
    bottom:16%
  }
  .story-bottom {
    bottom:30px;
    flex-wrap:wrap;
    row-gap:20px
  }
  .size-selector {
    position:absolute;
    left:50%;
    bottom:29px;
    transform:translateX(-50%);
    gap:1px
  }
  .size-selector button {
    min-width:48px;
    font-size:9px
  }
  .story-bottom .scroll-cue {
    font-size:7px
  }
  .product-note {
    bottom:16%;
    font-size:8px
  }
  .product-orbit {
    bottom:24%;
    height:9vw
  }
  .qualities {
    gap:18px
  }
  .qualities>span {
    font-size:10px;
    gap:8px
  }
  .qualities .text-link {
    font-size:10px
  }
  .section-pad {
    padding-top:85px;
    padding-bottom:75px
  }
  .goodness-intro {
    padding-top:100px
  }
  .statement {
    font-size:6vw
  }
  .intro-bottom {
    margin-left:33%;
    margin-top:35px
  }
  .intro-bottom p {
    font-size:12px
  }
  .qualities {
    margin-top:60px
  }
  .kitchen-banner {
    min-height:530px
  }
  .kitchen-caption {
    bottom:80px
  }
  .section-heading h2 {
    font-size:6vw
  }
  .cooking-grid {
    gap:18px
  }
  .cooking-card-caption h3 {
    font-size:24px
  }
  .cooking-card-caption>span {
    font-size:9px
  }
  .cooking-category {
    font-size:7px;
    left:18px;
    bottom:20px
  }
  .card-open {
    width:32px;
    height:32px;
    top:14px;
    right:14px
  }
  .cooking-card:nth-child(2) {
    margin-top:45px
  }
  .cooking-card:nth-child(3) {
    margin-top:90px
  }
  .source-main {
    padding:55px 0 65px;
    gap:6%
  }
  .source-main h2 {
    font-size:8vw
  }
  .source-copy {
    padding-top:2px
  }
  .source-copy .large-copy {
    font-size:22px
  }
  .source-copy>p:not(.large-copy) {
    font-size:12px
  }
  .source-index {
    font-size:7px
  }
  .source-journey h3 {
    font-size:21px
  }
  .source-journey p {
    font-size:10px
  }
  .source-stats>div>span {
    font-size:48px;
    gap:8px
  }
  .source-stats small {
    font-size:9px
  }
  .source-stats p {
    font-size:9px
  }
  .range-lineup {
    gap:4vw;
    margin-top:65px;
    margin-bottom:60px;
    min-height:260px
  }
  .lineup-item>img {
    height:calc(var(--lineup-height)*.78)
  }
  .range-table {
    font-size:11px
  }
  .range-table th {
    font-size:8px
  }
  .trade-inner h2 {
    font-size:5.5vw
  }
  .trade-inner .circle-link {
    width:70px;
    height:70px
  }
  .trade-strip {
    padding-top:60px;
    padding-bottom:30px
  }
  .enquiry-section {
    gap:6%
  }
  .enquiry-intro h2 {
    font-size:5.8vw
  }
  .enquiry-intro>.eyebrow {
    font-size:7px
  }
  .enquiry-intro>p {
    font-size:12px
  }
  .contact-phone {
    font-size:17px
  }
  .form-row {
    gap:17px
  }
  .field label {
    font-size:10px
  }
  .field input,.field textarea,.field select {
    font-size:11px
  }
  .footer-wordmark {
    margin-top:35px
  }
  .footer-bottom {
    font-size:7px
  }
  .site-footer {
    padding-top:40px;
    padding-bottom:25px
  }
  .footer-top>p {
    font-size:12px
  }
  .footer-top>p>em {
    font-size:17px
  }
}

/* Mobile: keep the product centred; move type above and below the pack. */

@media(max-width:699px) {
  :root {
    --gutter:24px;
    --header-height:72px
  }
  .site-header {
    padding:0 23px
  }
  .desktop-nav,.header-contact {
    display:none
  }
  .brand-name {
    font-size:14px
  }
  .brand-name>span {
    font-size:5.5px
  }
  .a2-mark {
    width:38px;
    height:26px
  }
  .brand-divider {
    height:25px
  }
  .menu-toggle {
    display:flex;
    width:42px;
    height:42px;
    align-items:center;
    justify-content:center;
    gap:6px;
    flex-direction:column
  }
  .menu-toggle span {
    display:block;
    width:21px;
    height:1px;
    background:var(--ink);
    transition:transform .3s
  }
  .menu-toggle[aria-expanded=true] span:first-child {
    transform:translateY(3.5px) rotate(45deg)
  }
  .menu-toggle[aria-expanded=true] span:last-child {
    transform:translateY(-3.5px) rotate(-45deg)
  }
  .mobile-nav:not([hidden]) {
    display:flex;
    position:fixed;
    inset:var(--header-height) 0 auto;
    background:var(--paper);
    padding:25px var(--gutter) 35px;
    z-index:39;
    flex-direction:column;
    border-bottom:1px solid var(--line);
    box-shadow:0 20px 25px #00000008
  }
  .mobile-nav>a {
    font-size:25px;
    letter-spacing:-.03em;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:17px 0;
    border-bottom:1px solid var(--line)
  }
  .mobile-nav>a>span {
    font-size:10px;
    color:var(--red)
  }
  .product-story {
    height:600svh;
    min-height:3400px
  }
  .product-stage {
    height:100svh;
    min-height:650px
  }
  .stage-topline {
    top:calc(var(--header-height) + 11px);
    font-size:7px;
    left:var(--gutter);
    right:var(--gutter)
  }
  .stage-topline>span {
    gap:6px
  }
  .stage-topline .origin {
    font-size:6px;
    letter-spacing:.08em
  }
  .ghana-flag {
    width:10px;
    height:7px
  }
  
  .story-headlines {
    top:18%;
    left:var(--gutter);
    right:var(--gutter);
    width:auto;
    height:26%;
    text-align:center;
    z-index:4
  }
  .story-headline .eyebrow {
    justify-content:center;
    font-size:7px;
    margin-bottom:13px;
    letter-spacing:.12em;
    gap:12px
  }
  .story-headline h2 {
    font-size:clamp(43px,11.7vw,65px);
    line-height:.94;
    letter-spacing:-.06em
  }
  .story-headline h2 br {
    display:none
  }
  .story-headline h2 em {
    white-space:nowrap
  }
  .story-headline p {
    font-size:10px;
    line-height:1.5;
    margin:12px auto 0;
    max-width:240px
  }
  .story-headline p br {
    display:none
  }
  .product-layer {
    top:53.7%;
    left:50%;
    height:calc(var(--pack-height)*.58);
    max-height:360px;
    transform:translate(-50%,-42%)
  }
  .product-orbit {
    left:50%;
    width:70%;
    bottom:27%;
    height:9%;
    opacity:.7
  }
  .purity-seal {
    top:40%;
    left:auto;
    right:18%;
    width:60px;
    height:60px
  }
  .story-descriptions {
    top:auto;
    bottom:13.2%;
    right:24px;
    left:24px;
    width:auto;
    height:12%;
    text-align:center
  }
  .pack-label,.story-description>p {
    display:none
  }
  .story-description h3 {
    font-size:18px;
    line-height:1.15;
    letter-spacing:-.025em;
    max-width:260px;
    margin:0 auto
  }
  .story-description h3 br {
    display:none
  }
  .pack-volume {
    position:absolute;
    top:-3px;
    left:0;
    margin-top:0;
    font-size:35px;
    color:var(--muted);
    display:none
  }
  .story-description .text-link {
    font-size:9px;
    line-height:1.2;
    margin-top:10px;
    padding:4px 0;
    gap:11px
  }
  .story-description .text-link .icon {
    width:12px;
    height:12px
  }
  .purity-note {
    display:none
  }
  .story-bottom {
    left:24px;
    right:24px;
    bottom:22px;
    display:flex;
    justify-content:center;
    height:39px
  }
  .size-selector {
    position:static;
    transform:none;
    gap:0;
    padding:4px;
    flex-shrink:0;
    bottom:auto
  }
  .size-selector button {
    min-width:45px;
    min-height:32px;
    padding:8px 9px;
    font-size:9px
  }
  .scroll-cue {
    display:none!important
  }
  .product-detail-link {
    position:absolute;
    right:0;
    top:-28px;
    font-size:8px;
    gap:6px
  }
  .product-detail-link .icon {
    width:13px;
    height:13px
  }
  .product-note {
    bottom:24.8%;
    font-size:7px
  }
  .product-stage>.story-progress {
    height:2px
  }
  .goodness-intro {
    padding-top:80px;
    padding-bottom:40px
  }
  .eyebrow {
    font-size:8px;
    letter-spacing:.12em
  }
  .goodness-intro>.eyebrow {
    font-size:7px
  }
  .statement {
    font-size:clamp(34px,8.8vw,50px);
    line-height:1.06;
    letter-spacing:-.05em;
    margin-top:25px
  }
  .statement br {
    display:none
  }
  .intro-bottom {
    margin-left:0;
    margin-top:27px;
    gap:20px
  }
  .intro-bottom p {
    font-size:11px;
    line-height:1.7
  }
  .intro-bottom p br {
    display:none
  }
  .intro-bottom .circle-link {
    width:43px;
    height:43px;
    margin:0
  }
  .intro-bottom .circle-link .icon {
    width:18px;
    height:18px
  }
  .qualities {
    display:grid;
    grid-template-columns:1fr 1fr;
    margin-top:40px;
    gap:20px 10px;
    padding-top:24px
  }
  .qualities>span {
    font-size:10px;
    gap:7px
  }
  .qualities .text-link {
    font-size:10px;
    gap:9px;
    justify-self:start
  }
  .qualities>span .icon {
    width:18px;
    height:18px
  }
  .kitchen-banner {
    height:630px;
    min-height:0;
    max-height:90svh
  }
  .kitchen-banner>img {
    object-position:60% center;
    height:112%
  }
  .kitchen-shade {
    background:linear-gradient(0deg,#0e190ac4,transparent 80%)
  }
  .kitchen-caption {
    bottom:66px;
    left:var(--gutter);
    right:var(--gutter)
  }
  .kitchen-caption .eyebrow {
    font-size:7px;
    margin-bottom:20px
  }
  .kitchen-caption h2 {
    font-size:11.3vw;
    line-height:1.04;
    letter-spacing:-.05em
  }
  .kitchen-caption p {
    font-size:11px;
    margin-top:18px
  }
  .image-credit {
    right:auto;
    left:var(--gutter);
    bottom:27px;
    font-size:6px
  }
  .section-pad {
    padding-top:70px;
    padding-bottom:65px
  }
  .goodness-intro {
    padding-top:80px;
    padding-bottom:40px
  }
  .section-heading {
    display:block;
    margin-bottom:33px
  }
  .section-heading h2 {
    font-size:11vw;
    letter-spacing:-.05em
  }
  .section-heading .eyebrow {
    font-size:7px;
    margin-bottom:19px
  }
  .section-heading>p {
    font-size:11px;
    margin-top:22px
  }
  .section-heading>p br {
    display:none
  }
  .cooking-grid {
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    gap:18px;
    margin:0 calc(-1*var(--gutter));
    padding:0 var(--gutter) 20px;
    scrollbar-width:thin;
    scrollbar-color:#bcb9af transparent
  }
  .cooking-card {
    flex:0 0 78%;
    scroll-snap-align:center
  }
  .cooking-card:nth-child(2),.cooking-card:nth-child(3) {
    margin-top:0
  }
  .cooking-image {
    aspect-ratio:.86
  }
  .card-open {
    width:34px;
    height:34px
  }
  .cooking-category {
    font-size:7px;
    bottom:22px;
    left:20px
  }
  .cooking-card-caption {
    padding-top:18px
  }
  .cooking-card-caption h3 {
    font-size:28px
  }
  .cooking-card-caption>span {
    font-size:10px;
    margin-top:8px
  }
  .cooking-footnote {
    font-size:10px;
    line-height:1.7;
    margin-top:26px;
    padding-top:25px
  }
  .source-top {
    display:block;
    padding-bottom:21px
  }
  .source-top .eyebrow {
    font-size:7px;
    gap:7px
  }
  .source-index {
    display:none
  }
  .source-main {
    display:block;
    padding:40px 0 45px
  }
  .source-main h2 {
    font-size:18vw;
    letter-spacing:-.065em
  }
  .source-copy {
    padding-top:0;
    margin-top:32px;
    max-width:none
  }
  .source-copy .large-copy {
    font-size:25px;
    margin-bottom:20px
  }
  .source-copy>p:not(.large-copy) {
    font-size:12px;
    line-height:1.75
  }
  .source-copy .text-link {
    font-size:11px
  }
  .source-journey {
    grid-template-columns:1fr 1fr;
    gap:32px 20px;
    border:0;
    padding-top:0
  }
  .source-journey>div {
    border-top:1px solid #bccbb5;
    padding-top:18px
  }
  .source-journey>div:before {
    top:-3px
  }
  .source-journey>div>span {
    font-size:8px
  }
  .source-journey h3 {
    font-size:22px;
    margin-top:16px
  }
  .source-journey p {
    font-size:10px
  }
  .source-stats {
    gap:20px;
    grid-template-columns:1fr 1fr 1fr;
    padding-top:24px;
    margin-top:40px
  }
  .source-stats>div>span {
    font-size:38px;
    display:block;
    letter-spacing:-.05em
  }
  .source-stats small {
    display:block;
    font-size:8px;
    letter-spacing:0;
    margin-top:10px;
    line-height:1.3
  }
  .source-stats p {
    font-size:8px;
    margin-top:8px;
    max-width:100px;
    line-height:1.5
  }
  .range-lineup {
    gap:15px;
    min-height:0;
    flex-wrap:wrap;
    margin:40px -5px 40px;
    row-gap:30px;
    justify-content:space-around
  }
  .lineup-item {
    flex:0 0 26%;
    height:200px;
    justify-content:flex-end;
    gap:14px
  }
  .lineup-item>img {
    height:calc(var(--lineup-height)*.51);
    max-height:175px
  }
  .lineup-size {
    font-size:10px
  }
  .lineup-size>small {
    font-size:6px
  }
  .range-table {
    font-size:10px
  }
  .range-table thead {
    font-size:7px;
    letter-spacing:.02em
  }
  .range-table th {
    font-size:7px;
    padding:16px 0
  }
  .range-table td {
    padding:17px 8px 17px 0;
    vertical-align:middle
  }
  .range-table td:nth-child(1) {
    width:30%
  }
  .range-table td:nth-child(2) {
    width:17%
  }
  .range-table td:nth-child(3) {
    font-size:9px
  }
  .range-table td:last-child {
    width:30px;
    padding-right:0
  }
  .table-enquire {
    width:27px;
    height:27px
  }
  .table-enquire .icon {
    width:13px;
    height:13px
  }
  .range-footnote {
    font-size:8px;
    text-align:left;
    line-height:1.6
  }
  .trade-strip {
    padding-top:50px;
    padding-bottom:27px
  }
  .trade-strip>.eyebrow {
    font-size:7px
  }
  .trade-inner {
    margin-top:25px;
    margin-bottom:35px;
    align-items:flex-end;
    gap:20px
  }
  .trade-inner h2 {
    font-size:9.3vw;
    line-height:1.07
  }
  .trade-inner .circle-link {
    width:45px;
    height:45px;
    margin-bottom:4px
  }
  .trade-inner .circle-link .icon {
    width:21px;
    height:21px
  }
  .trade-bottom {
    font-size:6px;
    letter-spacing:.06em;
    flex-wrap:wrap;
    gap:18px 28px;
    justify-content:flex-start;
    padding-top:22px
  }
  .enquiry-section {
    display:block;
    padding-top:75px;
    padding-bottom:65px
  }
  .enquiry-intro>.eyebrow {
    font-size:7px
  }
  .enquiry-intro h2 {
    font-size:12.5vw;
    max-width:400px
  }
  .enquiry-intro>p {
    font-size:12px;
    max-width:340px
  }
  .contact-phone {
    font-size:21px;
    margin-top:27px
  }
  .contact-email {
    font-size:12px
  }
  .enquiry-intro address {
    font-size:11px;
    margin-top:20px
  }
  .enquiry-intro address span {
    font-size:9px
  }
  .enquiry-intro>.text-link {
    font-size:11px
  }
  .enquiry-form {
    margin-top:48px;
    padding-top:30px;
    border-top:1px solid var(--line)
  }
  .form-row {
    gap:18px
  }
  .field {
    margin-bottom:25px
  }
  .field label {
    font-size:10px
  }
  .field input,.field textarea,.field select {
    font-size:12px;
    min-height:45px
  }
  .field input,.field textarea {
    font-size:16px
  }
  .field input::placeholder,.field textarea::placeholder {
    font-size:12px
  }
  .field select {
    font-size:16px
  }
  .primary-button {
    min-height:57px;
    padding:17px 20px;
    font-size:12px
  }
  .form-note {
    font-size:9px
  }
  .site-footer {
    padding-top:35px;
    padding-bottom:25px
  }
  .footer-top {
    display:grid;
    grid-template-columns:1fr auto;
    gap:30px 15px;
    align-items:center
  }
  .footer-top>p {
    grid-row:2;
    grid-column:1 / -1;
    font-size:13px
  }
  .footer-top>p>em {
    font-size:19px
  }
  .footer-top>.text-link {
    font-size:8px;
    gap:6px
  }
  .footer-top>.text-link .icon {
    width:14px;
    height:14px
  }
  .footer-top .brand {
    gap:9px
  }
  .footer-top .brand-name {
    font-size:12px
  }
  .footer-top .brand-name>span {
    font-size:5px
  }
  .footer-top .a2-mark {
    width:34px;
    height:23px
  }
  .footer-wordmark {
    font-size:13.4vw;
    line-height:1.25;
    margin:23px 0 23px
  }
  .footer-bottom {
    display:flex;
    flex-wrap:wrap;
    gap:16px 20px;
    font-size:7px;
    padding-top:20px
  }
  .footer-bottom>span:first-child {
    width:100%
  }
  .footer-bottom>span:nth-child(2) {
    font-size:6px
  }
  .footer-privacy {
    font-size:7px;
    margin-left:auto
  }
  .dialog-body {
    padding:55px 26px 30px
  }
  .dialog-body>h2 {
    font-size:38px
  }
  .detail-facts {
    gap:22px
  }
  .detail-facts p {
    font-size:10px
  }
  .recipe-dialog[open] {
    display:block;
    max-width:calc(100% - 28px)
  }
  .recipe-dialog>img {
    height:260px;
    min-height:0;
    object-position:center
  }
  .recipe-content {
    padding:30px 26px
  }
  .recipe-content h2 {
    font-size:38px
  }
  .recipe-content>p:not(.recipe-note) {
    font-size:12px
  }
  .recipe-content ol {
    font-size:11px
  }
  .privacy-dialog .dialog-body>p {
    font-size:12px
  }
  .motion-ready .cooking-card:nth-child(2),.motion-ready .cooking-card:nth-child(3) {
    transition-delay:0s
  }
}
@media(max-width:369px) {
  :root {
    --gutter:20px
  }
  .size-selector button {
    min-width:40px;
    padding:8px 7px;
    font-size:8px
  }
  .story-headline h2 {
    font-size:11.2vw
  }
  .story-description h3 {
    font-size:16px
  }
  .stage-topline .origin {
    font-size:5.5px
  }
  .product-detail-link {
    top:-25px
  }
  .form-row {
    grid-template-columns:1fr;
    gap:0
  }
  .contact-phone {
    font-size:19px
  }
  .range-table td:nth-child(3) {
    font-size:8px
  }
  .range-table td:first-child {
    font-size:9px
  }
  .range-lineup {
    gap:12px
  }
  .source-stats>div>span {
    font-size:33px
  }
}
@media(max-height:740px) and (min-width:700px) {
  .product-stage {
    min-height:600px
  }
  .story-headlines {
    top:34%
  }
  .story-headline h2 {
    font-size:4.8vw
  }
  .story-headline .eyebrow {
    margin-bottom:15px
  }
  .story-headline p {
    margin-top:20px
  }
  .story-descriptions {
    top:34%
  }
  .pack-label {
    margin-bottom:15px
  }
  .story-description h3 {
    font-size:2.1vw
  }
  .story-description>p {
    margin-top:13px;
    font-size:10px
  }
  .pack-volume {
    font-size:48px;
    margin-top:17px
  }
  .product-layer {
    height:calc(var(--pack-height)*.91);
    top:53%
  }
  
  .purity-seal {
    top:22%;
    width:72px;
    height:72px
  }
  .purity-note {
    bottom:18%
  }
  .product-orbit {
    bottom:20%
  }
  .story-bottom {
    bottom:24px
  }
}

/* Accessibility: direct size controls and non-moving section content remain available. */

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*:before,*:after {
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important
  }
  .motion-ready .reveal {
    opacity:1;
    transform:none
  }
  .kitchen-banner>img {
    will-change:auto
  }
  .product-layer,.product-layer>img,.story-headline,.story-description {
    will-change:auto
  }
}
.copy-fallback {
  display:block;
  width:100%;
  margin-top:20px;
  padding:15px;
  font-size:12px;
  line-height:1.6;
  color:var(--ink);
  border:1px solid var(--line);
  background:var(--paper);
  resize:vertical
}
@media(max-width:699px) {
  .product-stage {
    min-height:0
  }
  .product-note {
    bottom:27.4%
  }
}
html:not(.js) .product-story {
  height:100svh;
  min-height:650px
}
html:not(.js) .product-stage {
  position:relative
}
html:not(.js) .size-selector {
  display:none
}
html:not(.js) .product-detail-link {
  display:none
}
html:not(.js) .enquiry-form {
  display:none
}
html:not(.js) .cooking-card {
  cursor:default
}

/* =============================================================
   BRAND & READABILITY REFINEMENTS
   Official vector logos, clearer calls to action, production images.
   ============================================================= */
.refinery-logo {
  display:block;
  width:198px;
  height:auto;
}
.footer-top .refinery-logo {
  width:220px;
}
.stage-topline .stage-sarp {
  display:block;
  transform:rotate(-6deg);
}
.stage-sarp img {
  display:block;
  width:100px;
  height:auto;
}
.sarp-brand-moment {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:60px;
  margin:0 auto 42px;
}
.sarp-brand-moment img {
  width:220px;
  height:auto;
  transform:rotate(-4deg);
  filter:drop-shadow(0 8px 18px #c3992920);
}
.sarp-brand-moment>span {
  width:125px;
  height:1px;
  background:linear-gradient(90deg,transparent,#d6b464);
}
.sarp-brand-moment>span:last-child {
  transform:rotate(180deg);
}
.purity-seal>svg {
  animation:purity-turn 65s linear infinite;
  transform-origin:50% 50%;
}
@keyframes purity-turn {
  to { transform:rotate(360deg); }
}
.purity-note {
  font-size:clamp(15px,1.2vw,19px);
  line-height:1.5;
  gap:14px;
}
.purity-note .icon {
  width:37px;
  height:37px;
}
.purity-note strong {
  font-weight:600;
  color:var(--green);
}
.product-detail-link {
  display:flex;
  justify-content:center;
  min-height:48px;
  padding:13px 20px;
  background:var(--red);
  color:white;
  gap:15px;
  font-size:14px;
  border:1px solid var(--red);
  border-radius:3px;
  box-shadow:0 5px 16px #d9272017;
  transition:background .3s,transform .3s;
}
.product-detail-link:hover {
  background:var(--red-dark);
  transform:translateY(-2px);
}
.product-detail-link .icon {
  width:22px;
  height:22px;
  border-color:#ffffff80;
  padding:3px;
}
.showcase-controls {
  display:flex;
  align-items:center;
  gap:18px;
}
.showcase-toggle {
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:11px 0;
  font-size:11px;
  white-space:nowrap;
}
.showcase-toggle .icon {
  width:16px;
  height:16px;
  color:var(--red);
}
.showcase-controls .scroll-cue {
  font-size:7px;
  gap:10px;
}
.cooking-footnote {
  font-size:clamp(18px,1.55vw,25px);
  line-height:1.55;
  color:var(--ink);
}
.cooking-footnote em {
  font-size:1.25em;
  color:var(--red);
  white-space:nowrap;
}
.process-image {
  margin:0 0 24px;
  aspect-ratio:4 / 3;
  overflow:hidden;
  background:#e4e8de;
}
.process-image img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .8s var(--ease);
}
.source-journey>div:hover .process-image img {
  transform:scale(1.035);
}
.source-journey h3 {
  margin-top:0;
  font-size:25px;
}
.source-journey p {
  font-size:13px;
  line-height:1.65;
}
.trade-bottom {
  font-size:clamp(12px,1.05vw,16px);
  font-weight:600;
  letter-spacing:.08em;
  line-height:1.5;
}
.detail-selected-product {
  display:grid;
  grid-template-columns:110px 1fr;
  align-items:center;
  gap:25px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:25px 0;
  margin:25px 0;
}
.detail-product-image {
  display:flex;
  align-items:center;
  justify-content:center;
  height:180px;
}
.detail-product-image img {
  height:auto;
  width:100%;
  max-height:180px;
  overflow:hidden;
  mix-blend-mode:multiply;
}
.detail-selected-product .eyebrow {
  font-size:8px;
  color:var(--green);
}
.detail-selected-product h3 {
  font-size:28px;
  letter-spacing:-.04em;
  color:var(--red);
  margin:10px 0;
}
.detail-selected-product p {
  font-size:12px;
  line-height:1.65;
  color:var(--muted);
}
.detail-selected-product .detail-product-audience {
  margin-top:10px;
  color:var(--green);
  font-size:11px;
}
@media (max-width:1199px) {
  .showcase-controls .scroll-cue { display:none; }
}
@media (max-width:959px) {
  .refinery-logo { width:174px; }
  .footer-top .refinery-logo { width:190px; }
  .purity-note { font-size:14px; }
  .story-bottom {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
    bottom:24px;
  }
  .size-selector {
    position:static;
    transform:none;
    grid-row:1;
    grid-column:1 / -1;
    margin:0 auto;
  }
  .showcase-controls { grid-row:2; grid-column:1; }
  .product-detail-link {
    grid-row:2;
    grid-column:2;
    position:static;
    justify-self:end;
    font-size:12px;
    min-height:44px;
  }
  .purity-note { bottom:21%; }
  .source-journey h3 { font-size:22px; }
  .source-journey p { font-size:12px; }
  .trade-bottom { font-size:12px; }
}
@media (max-width:699px) {
  .refinery-logo { width:171px; }
  .footer-top .refinery-logo { width:184px; }
  .stage-sarp img { width:77px; }
  .sarp-brand-moment { gap:25px; margin-bottom:32px; }
  .sarp-brand-moment img { width:164px; }
  .sarp-brand-moment>span { width:45px; }
  .story-headline h2 { font-size:clamp(38px,10.8vw,60px); }
  .product-layer {
    top:49%;
    height:calc(var(--pack-height)*.47);
    max-height:300px;
  }
  .product-orbit { bottom:34%; }
  .purity-seal { top:38%; right:17%; }
  .story-descriptions { top:67%; bottom:auto; height:10%; }
  .story-description h3 { font-size:15px; line-height:1.15; }
  .story-description .text-link { font-size:10px; margin-top:8px; }
  .purity-note {
    display:flex;
    justify-content:center;
    bottom:117px;
    left:24px;
    right:24px;
    font-size:clamp(12px,1.6svh,15px);
    line-height:1.4;
    gap:10px;
  }
  .purity-note .icon { width:27px; height:27px; }
  .product-note { bottom:34%; font-size:7px; }
  .story-bottom {
    bottom:18px;
    height:auto;
    gap:10px;
    grid-template-rows:40px 44px;
  }
  .showcase-toggle { font-size:10px; gap:6px; }
  .product-detail-link { font-size:11px; padding:10px 13px; gap:10px; }
  .product-detail-link .icon { width:20px; height:20px; }
  .size-selector { align-self:start; }
  .process-image { margin-bottom:19px; }
  .source-journey h3 { font-size:22px; }
  .source-journey p { font-size:12px; }
  .trade-bottom {
    font-size:12px;
    letter-spacing:.035em;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:17px 20px;
  }
  .cooking-footnote { font-size:18px; }
  .detail-selected-product { grid-template-columns:78px 1fr; gap:17px; }
  .detail-product-image { height:145px; }
  .detail-product-image img { max-height:145px; }
  .detail-selected-product h3 { font-size:25px; }
  .detail-selected-product p { font-size:11px; }
}
@media (max-height:700px) and (max-width:699px) {
  .story-headline p { display:none; }
  .story-headline h2 { font-size:clamp(36px,10vw,50px); }
}
@media (max-height:620px) and (max-width:699px) {
  .story-description h3 { display:none; }
  .story-description .text-link { font-size:11px; }
}
@media (prefers-reduced-motion:reduce) {
  .purity-seal>svg { animation:none !important; }
}
html:not(.js) .showcase-controls {
  display:none;
}

/* Standalone product PNGs are contained in every view, never clipped. */
.product-layer>img,
.lineup-item>img,
.detail-product-image img {
  object-fit:contain;
  object-position:center;
}
.parent-company-link {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:11px 15px !important;
  background:var(--red);
  color:white;
  border-radius:3px;
  white-space:nowrap;
  transition:background .3s;
}
.parent-company-link:hover { background:var(--red-dark); }
.parent-company-link .icon { width:14px; height:14px; }
.desktop-nav { align-items:center; gap:24px; }
.desktop-nav .parent-company-link:after { display:none; }
.ghana-flag {
  width:24px;
  height:16px;
  background:url('../ghana-flag.svg') center / contain no-repeat;
}
.footer-wordmark {
  width:calc(100% + var(--gutter) * 2);
  margin:45px calc(-1 * var(--gutter)) 25px;
  overflow:hidden;
  font-size:max(64px,13.2vw);
}
.footer-marquee-track {
  display:flex;
  width:max-content;
  animation:footer-drift 65s linear infinite;
  will-change:transform;
}
.footer-marquee-group {
  display:flex;
  align-items:center;
  flex-shrink:0;
  min-width:100vw;
  white-space:nowrap;
}
.marquee-dot {
  color:var(--red);
  margin:0 .22em;
  font-family:var(--sans);
  font-size:.7em;
  letter-spacing:0;
}
.footer-wordmark:hover .footer-marquee-track,
.site-footer:focus-within .footer-marquee-track {
  animation-play-state:paused;
}
@keyframes footer-drift {
  to { transform:translateX(-50%); }
}
@media (max-width:1100px) {
  .desktop-nav { gap:16px; }
  .desktop-nav a { font-size:11px; }
  .desktop-nav .parent-company-link { font-size:10px; padding:9px 12px !important; }
}
@media (max-width:699px) {
  #mobile-nav .parent-company-link {
    align-self:flex-start;
    width:auto;
    margin-top:22px;
    border:0;
    font-size:13px;
    padding:12px 16px !important;
  }
  .ghana-flag { width:18px; height:12px; }
  .footer-wordmark { margin-top:25px; margin-bottom:25px; }
}
@media (prefers-reduced-motion:reduce) {
  .footer-marquee-track { animation:none !important; transform:none; will-change:auto; }
  .footer-marquee-group:nth-child(2) { display:none; }
}