@font-face { font-family:'Barlow Semi Condensed'; font-style:normal; font-weight:700; font-display:swap; src:url('/assets/fonts/barlow-semi-condensed-bold.woff2') format('woff2'); }
@font-face {
  font-family:Manrope;
  font-style:normal;
  font-weight:200 800;
  font-display:swap;
  src:url('/assets/fonts/a30ddcd349703aff.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
}
@font-face {
  font-family:Manrope;
  font-style:normal;
  font-weight:200 800;
  font-display:swap;
  src:url('/assets/fonts/3911b66d9f2e005a.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF
}
:root {
  --paper:#f6f5f2;
  --ink:#111315;
  --pink:#ff0090;
  --action:#ff0090;
  --muted:#565958;
  --line:#d0d1cb;
  --gutter:clamp(22px,4.4vw,76px);
  --ease:cubic-bezier(.16,1,.3,1)
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scrollbar-color:var(--pink) var(--ink)
}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:16px/1.65 Manrope,sans-serif
}
::selection {
  background:var(--pink);
  color:#fff
}
a {
  color:inherit;
  text-underline-offset:6px
}
button,input,textarea {
  font:inherit
}
button,a,input,textarea {
  -webkit-tap-highlight-color:transparent
}
a,button {
  touch-action:manipulation
}
a:hover {
  text-decoration-thickness:2px
}
:focus-visible {
  outline:3px solid var(--action);
  outline-offset:6px
}
img {
  display:block;
  max-width:100%;
  height:auto
}
svg {
  width:22px;
  height:22px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  flex-shrink:0
}
h1,h2,h3,p,figure {
  margin:0
}
h1,h2,h3 {
  text-wrap:balance
}
h2 {
  font-size:clamp(36px,4.6vw,68px);
  line-height:1.05;
  letter-spacing:-.04em;
  font-weight:750
}
h3 {
  font-size:clamp(28px,3vw,44px);
  line-height:1.12;
  letter-spacing:-.035em
}
p {
  max-width:66ch
}
.wrap {
  max-width:1600px;
  margin-inline:auto;
  padding-inline:var(--gutter)
}
section[id] {
  scroll-margin-top:95px
}
.skip {
  position:fixed;
  top:-100px;
  left:20px;
  z-index:30;
  background:#fff;
  color:var(--ink);
  padding:12px
}
.skip:focus {
  top:10px
}
.header {
  display:flex;
  align-items:center;
  gap:28px;
  min-height:96px;
  position:relative;
  z-index:20
}
.home .header {
  position:fixed;
  top:0;
  left:0;
  right:0;
  max-width:none;
  color:#fff;
  background:var(--ink);
  transition:background .25s;
  isolation:isolate
}
.home .header.is-top {
  background:transparent
}
.home .header.is-scrolled {
  background:var(--ink)
}
.home:has(.hero) .header {
  padding-inline:var(--gutter)
}
.brand {
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  line-height:1.04;
  font-weight:800;
  font-size:21px;
  letter-spacing:-.03em;
  flex-shrink:0
}
.brand img {
  width:94px;
  height:48px;
  object-fit:contain;
  background:#080808
}
.brand-dot {
  color:var(--pink)
}
nav {
  display:flex;
  gap:26px;
  margin-left:auto
}
nav a,.header-phone {
  font-size:13px;
  font-weight:650;
  text-decoration:none;
  white-space:nowrap;
  min-height:44px;
  display:flex;
  align-items:center;
  position:relative
}
nav a:after {
  position:absolute;
  content:'';
  bottom:5px;
  left:0;
  width:100%;
  height:2px;
  background:var(--pink);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .3s var(--ease)
}
nav a:hover:after,nav a:focus-visible:after {
  transform:scaleX(1)
}
.header-phone {
  margin-left:12px
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  min-height:58px;
  padding:17px 24px;
  border:0;
  border-radius:3px;
  background:var(--action);
  color:#fff;
  font-size:14px;
  font-weight:750;
  line-height:1.4;
  text-decoration:none;
  cursor:pointer;
  transition:background .2s,box-shadow .25s,transform .25s var(--ease)
}
.button svg {
  transition:transform .3s var(--ease)
}
.button:hover {
  background:#ff33a6;
  box-shadow:0 8px 28px -16px #ff0090;
  transform:translateY(-2px)
}
.button:hover svg {
  transform:translateX(5px)
}
.button:disabled {
  opacity:.65;
  cursor:wait;
  transform:none
}
.button-small {
  min-height:48px;
  padding:13px 17px;
  font-size:12px;
  gap:16px
}
.button-small svg {
  width:18px;
  height:18px
}
.text-link {
  display:inline-flex;
  align-items:center;
  gap:15px;
  font-size:14px;
  font-weight:750;
  min-height:44px;
  text-decoration:underline;
  text-decoration-thickness:1px
}
.hero {
  height:min(1000px,100svh);
  min-height:760px;
  background:var(--ink);
  color:#fff;
  position:relative;
  overflow:clip;
  isolation:isolate;
  display:flex;
  align-items:center
}
.hero-media,.hero-shade {
  position:absolute;
  inset:0;
  z-index:-2
}
.hero-media img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 53%;
  transform:scale(1.035)
}
.hero-shade {
  z-index:-1;
  background:linear-gradient(180deg,rgba(10,12,12,.72),transparent 24%),linear-gradient(90deg,rgba(10,12,12,.83),rgba(10,12,12,.2) 77%),linear-gradient(0deg,#111315,transparent 45%)
}
.hero-copy {
  width:100%;
  padding-top:80px;
  padding-bottom:100px;
  position:relative;
  z-index:1
}
.hero h1 {
  font-size:clamp(64px,7.6vw,112px);
  font-weight:650;
  line-height:1.02;
  letter-spacing:-.04em;
  text-wrap:initial
}
.hero-line {
  display:block
}
.hero-copy>p {
  font-size:16px;
  line-height:1.7;
  max-width:47ch;
  margin-top:30px;
  color:#fff
}
.hero-actions {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:30px;
  margin-top:32px
}
.hero-bottom {
  position:absolute;
  bottom:25px;
  left:0;
  right:0;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  font-size:12px;
  color:#f0eeec
}
.scroll-cue {
  display:inline-flex;
  align-items:center;
  gap:16px;
  text-decoration:none;
  min-height:44px
}
.scroll-cue svg {
  width:18px;
  height:18px
}
.hero :focus-visible,.home .header :focus-visible,.service :focus-visible,.footer :focus-visible {
  outline-color:#ff85ca
}
.service {
  background:var(--ink);
  color:var(--paper);
  overflow:clip
}
.kinetic {
  background:var(--pink);
  color:var(--ink);
  overflow:clip;
  padding-block:24px
}
.kinetic h2 {
  font-size:clamp(46px,7.4vw,112px);
  font-weight:800;
  line-height:1.1;
  letter-spacing:-.04em;
  text-align:center;
  white-space:nowrap;
  transform:translateX(0)
}
.service-grid {
  padding-block:120px;
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:8vw
}
.service h2 span {
  color:#ff85ca
}
.service p {
  max-width:43ch;
  margin:30px 0;
  color:#d2d3d1
}
.service .text-link {
  color:#ff85ca
}
.word-reveal .word {
  display:inline-block
}
.service-list {
  margin:0
}
.service-list>div {
  padding:20px 0 26px;
  margin-bottom:10px
}
.service-list dt {
  font-size:28px;
  letter-spacing:-.025em;
  font-weight:650
}
.service-list dd {
  margin:8px 0 0;
  color:#d2d3d1;
  font-size:15px;
  max-width:43ch
}
.section {
  padding-block:110px
}
.section-intro {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:40px
}
.section-intro>p {
  color:var(--muted);
  max-width:38ch;
  font-size:16px
}
.process-scene {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8vw;
  align-items:start;
  position:relative;
  margin-top:70px
}
.process-visual {
  position:sticky;
  top:130px;
  overflow:clip;
  background:var(--ink);
  color:#fff;
  align-self:start
}
.process-visual img {
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  object-position:50% 50%;
  transition:transform .9s var(--ease)
}
.process-visual[data-step="1"] img {
  transform:scale(1.08) translateX(-1%)
}
.process-visual[data-step="2"] img {
  transform:scale(1.015)
}
.process-visual figcaption {
  background:var(--ink);
  padding:22px 26px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  font-size:12px
}
.process-visual #phase-label {
  font-size:22px;
  font-weight:700;
  color:#ff85ca
}
.steps {
  padding:0;
  margin:0;
  list-style:none;
  counter-reset:steps;
  position:relative
}
.steps li {
  counter-increment:steps;
  min-height:280px;
  display:grid;
  grid-template-columns:50px 1fr;
  gap:20px;
  align-content:center;
  position:relative;
  padding-block:36px
}
.steps li:before {
  content:counter(steps,decimal-leading-zero);
  font-size:16px;
  color:var(--action);
  font-weight:750;
  font-variant-numeric:tabular-nums;
  padding-top:4px
}
.steps li h3 {
  transition:color .3s var(--ease)
}
.steps li.is-current h3 {
  color:var(--action)
}
.steps p {
  color:var(--muted);
  margin-top:20px;
  font-size:15px;
  max-width:35ch
}
.area {
  background:var(--ink);
  color:var(--paper);
  padding-block:100px;
  overflow:clip
}
.area-grid {
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:8vw
}
.area h2 {
  font-size:clamp(40px,5.4vw,80px)
}
.area h2 span {
  color:#ff85ca
}
.area p {
  max-width:45ch;
  color:#e0dfdc
}
.area address {
  font-style:normal;
  font-size:15px;
  margin-block:28px
}
.area .text-link {
  color:#ff85ca
}
.area :focus-visible {
  outline-color:#ff85ca
}
.faq {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8vw
}
.faq h2 {
  font-size:clamp(34px,3.8vw,56px)
}
.faq-list {
  border-top:1px solid var(--line)
}
details {
  border-bottom:1px solid var(--line)
}
summary {
  cursor:pointer;
  padding:24px 32px 24px 0;
  position:relative;
  font-weight:700;
  font-size:16px;
  list-style:none
}
summary::-webkit-details-marker {
  display:none
}
summary:before,summary:after {
  content:'';
  position:absolute;
  right:5px;
  top:36px;
  width:12px;
  height:2px;
  background:var(--action);
  transition:transform .25s var(--ease)
}
summary:after {
  transform:rotate(90deg)
}
details[open] summary:after {
  transform:rotate(0deg)
}
details p {
  color:var(--muted);
  font-size:15px;
  padding:0 20px 28px 0
}
.contact {
  background:#e9ebe5;
  padding-block:100px
}
.contact-grid {
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:9vw
}
.contact-copy h2 {
  font-size:clamp(48px,6.5vw,96px)
}
.contact-copy h2 span {
  color:var(--action)
}
.contact-copy>p {
  margin-top:30px;
  max-width:34ch;
  color:var(--muted)
}
.direct-contact {
  display:flex;
  align-items:start;
  flex-direction:column;
  margin-top:48px;
  gap:8px
}
.direct-contact>span {
  font-size:14px;
  color:var(--muted)
}
.direct-contact .phone {
  font-size:clamp(28px,3.2vw,46px);
  font-weight:750;
  letter-spacing:-.03em;
  text-decoration:none;
  line-height:1.4
}
.direct-contact>a:last-child {
  font-size:16px;
  display:inline-flex;
  align-items:center;
  min-height:44px
}
.contact-copy .small {
  font-size:13px;
  max-width:43ch;
  margin-top:38px
}
.form-intro {
  font-size:23px;
  font-weight:750;
  margin:0 0 30px
}
.form-intro span {
  display:block;
  font-size:12px;
  font-weight:400;
  color:var(--muted);
  margin-top:8px
}
.form-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px 18px
}
label {
  display:block;
  font-size:13px;
  font-weight:750;
  min-width:0
}
input,textarea {
  display:block;
  background:var(--paper);
  border:1px solid #999e95;
  border-radius:3px;
  padding:13px;
  width:100%;
  margin-top:8px;
  color:var(--ink);
  font-size:16px;
  min-height:50px;
  caret-color:var(--action)
}
input::placeholder,textarea::placeholder {
  color:#60645e;
  font-size:14px;
  font-weight:400
}
textarea {
  resize:vertical;
  min-height:110px
}
.full {
  grid-column:1/-1
}
.optional {
  font-weight:400
}
.field-hint {
  font-size:12px;
  color:var(--muted);
  margin-top:-13px
}
.privacy-note {
  font-size:12px;
  color:var(--muted);
  margin:24px 0
}
.form-status {
  margin-top:18px;
  font-size:14px;
  font-weight:650
}
.form-status:empty {
  margin:0
}
.form-status[data-error=true] {
  color:#a00030
}
.honeypot {
  position:absolute;
  left:-10000px;
  width:1px;
  height:1px;
  overflow:hidden
}
.footer {
  background:var(--ink);
  color:var(--paper);
  padding-block:70px 35px;
  max-width:none
}
.footer-name {
  display:block;
  font-size:clamp(42px,9.3vw,148px);
  font-weight:750;
  letter-spacing:-.04em;
  line-height:1.12;
  text-decoration:none;
  white-space:nowrap;
  padding-bottom:45px
}
.footer-name span {
  color:var(--pink)
}
.footer-bottom {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  font-size:12px
}
.footer a {
  min-height:44px
}
.footer-bottom>a {
  display:inline-flex;
  align-items:center;
  gap:12px
}
.footer p {
  color:#d2d3d1;
  font-size:12px
}
.legal {
  max-width:850px;
  padding-block:55px 100px
}
.legal h1 {
  font-size:clamp(40px,6vw,64px);
  line-height:1.1;
  letter-spacing:-.035em
}
.legal h2 {
  font-size:25px;
  margin-top:35px
}
.legal p,.legal ul {
  margin-top:16px
}
.legal .notice {
  background:#f5dce5;
  padding:22px;
  border-radius:5px
}
@media(max-width:1100px) {
  .header {
    gap:20px
  }
  .header-phone {
    display:none
  }
  nav {
    gap:20px
  }
  .service-grid {
    gap:6vw
  }
  .contact-grid {
    gap:6vw
  }
  .hero h1 {
    font-size:8vw
  }
  .process-scene {
    gap:6vw
  }
  .process-visual #phase-label {
    font-size:19px
  }
  .footer-bottom {
    flex-wrap:wrap;
    gap:14px 28px
  }
}
@media(max-width:800px) {
  .header {
    flex-wrap:wrap;
    min-height:0;
    padding-block:17px 9px;
    gap:12px;
    justify-content:space-between
  }
  .brand {
    font-size:18px
  }
  .brand img {
    width:76px;
    height:40px
  }
  .header .button {
    font-size:11px;
    padding:12px;
    gap:12px
  }
  .home .header,.home .header.is-top {
    background:rgba(17,19,21,.94)
  }
  nav {
    order:3;
    width:100%;
    margin:0;
    justify-content:space-between;
    gap:12px
  }
  nav a {
    font-size:12px;
    min-height:44px
  }
  nav a:after {
    bottom:0
  }
  section[id] {
    scroll-margin-top:135px
  }
  .hero {
    height:100svh;
    min-height:780px;
    max-height:960px;
    align-items:end
  }
  .hero-media img {
    object-position:59% 50%;
    transform:scale(1)
  }
  .hero-shade {
    background:linear-gradient(0deg,#111315 2%,rgba(17,19,21,.76) 37%,rgba(17,19,21,.06) 100%)
  }
  .hero-copy {
    padding-top:200px;
    padding-bottom:135px
  }
  .hero h1 {
    font-size:clamp(40px,7.9vw,64px);
    line-height:1.06;
    font-weight:700
  }
  .hero-copy>p {
    font-size:15px;
    line-height:1.65;
    max-width:39ch;
    margin-top:24px
  }
  .hero-actions {
    margin-top:27px;
    gap:18px
  }
  .hero-actions>.text-link {
    font-size:13px
  }
  .hero-bottom {
    bottom:16px;
    gap:18px;
    font-size:10px;
    flex-wrap:wrap
  }
  .hero-bottom>span:last-child {
    display:none
  }
  .hero-bottom .scroll-cue {
    font-size:11px;
    gap:10px
  }
  .kinetic {
    padding-block:24px
  }
  .kinetic h2 {
    font-size:clamp(32px,8.1vw,64px)
  }
  .service-grid,.area-grid,.contact-grid,.faq {
    grid-template-columns:1fr;
    gap:40px
  }
  .service-grid {
    padding-block:64px
  }
  .service p {
    font-size:16px
  }
  .service-list>div {
    padding-block:12px 16px;
    margin:0
  }
  .service-list dt {
    font-size:25px
  }
  .service-list dd {
    font-size:15px;
    max-width:47ch
  }
  .section {
    padding-block:65px
  }
  .section-intro {
    display:block
  }
  .section-intro>p {
    margin-top:24px;
    max-width:44ch;
    font-size:15px
  }
  .process-scene {
    grid-template-columns:1fr;
    margin-top:34px;
    gap:30px
  }
  .process-visual {
    position:relative;
    top:auto
  }
  .process-visual img {
    aspect-ratio:4/3;
    object-fit:cover
  }
  .process-visual figcaption {
    padding:17px 20px
  }
  .process-visual #phase-label {
    font-size:20px
  }
  .steps li {
    min-height:0;
    padding-block:26px;
    gap:15px;
    grid-template-columns:35px 1fr
  }
  .steps li:before {
    font-size:14px
  }
  .steps h3 {
    font-size:28px
  }
  .steps h3 br {
    display:none
  }
  .steps p {
    margin-top:13px;
    max-width:46ch;
    font-size:15px
  }
  .area {
    padding-block:65px
  }
  .area h2 {
    font-size:clamp(36px,6.8vw,56px)
  }
  .area p {
    font-size:16px
  }
  .faq {
    gap:32px
  }
  .faq h2 {
    font-size:35px
  }
  summary {
    font-size:15px
  }
  .contact {
    padding-block:65px
  }
  .contact-copy h2 {
    font-size:clamp(56px,12vw,80px)
  }
  .direct-contact {
    margin-top:30px
  }
  .contact-copy .small {
    margin-top:24px;
    max-width:52ch
  }
  .form-intro {
    margin-bottom:24px
  }
  .footer {
    padding-block:50px 28px
  }
  .footer-name {
    font-size:clamp(35px,8.8vw,68px);
    padding-bottom:30px
  }
  .footer-bottom {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px 20px;
    font-size:11px
  }
  .footer-bottom>p,.footer-bottom>a:first-of-type {
    grid-column:1/-1
  }
  .legal {
    padding-top:30px
  }
}
@media(max-width:380px) {
  .brand {
    font-size:16px;
    gap:8px
  }
  .brand img {
    width:60px
  }
  .header .button {
    font-size:10px;
    gap:8px
  }
  .form-grid {
    grid-template-columns:1fr
  }
  .full {
    grid-column:auto
  }
  .field-hint {
    margin-top:0
  }
  .hero-actions {
    gap:13px
  }
  .hero-actions>.button {
    padding-inline:17px;
    gap:15px
  }
  .hero h1 {
    font-size:36px
  }
  .hero-copy>p br {
    display:none
  }
  .hero-bottom {
    gap:8px
  }
  .footer-name {
    font-size:8.7vw
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*:before,*:after {
    transition:none!important;
    animation:none!important
  }
  .hero-media img,.kinetic h2,.process-visual img {
    transform:none!important
  }
}
/* The supplied artwork is one compressed sprite sheet; white becomes the scene's ground. */
.reading-progress{position:absolute;top:0;left:0;width:100%;height:3px;background:var(--pink);transform:scaleX(0);transform-origin:left;pointer-events:none}
.process-visual{background:#fff;color:var(--ink);overflow:hidden}
.process-visual .process-fallback{width:100%;height:auto;aspect-ratio:1774/1383;object-fit:contain;transform:none!important}
.delivery-canvas{display:none;position:relative;width:100%;aspect-ratio:1000/520;overflow:hidden;background:#fff}
.is-animated .delivery-canvas{display:block}
.is-animated .process-fallback{display:none}
.delivery-world{position:absolute;left:0;top:0;width:1000px;height:520px;transform-origin:top left;isolation:isolate}
.delivery-ground{position:absolute;left:45px;right:45px;top:432px;height:2px;background:#d0d1cb}
.transport-sprite{position:absolute;background-image:url('/img/process-icons.webp');background-repeat:no-repeat;mix-blend-mode:multiply}
.delivery-truck{position:absolute;left:0;top:192px;width:570px;height:240px;transform:translateX(350px)}
.truck-art{inset:0;background-size:1162.28px 906.16px;background-position:-98.28px -321.03px}
.delivery-bin{position:absolute;left:0;top:0;width:300px;height:180px;transform:translate(370px,155px);transform-origin:50% 100%;mix-blend-mode:multiply}
.bin-art{left:0;bottom:0;width:300px;height:119.44px;background-size:985.56px 768.33px;background-position:-616.67px -347.22px}
.load-art{left:25px;top:10px;width:246px;height:63.67px;background-size:1026.86px 800.54px;background-position:-399.39px -578.82px;transform:scaleY(0);transform-origin:50% 100%;opacity:0}
.process-visual figcaption{background:#fff;color:var(--ink);padding:18px 22px;flex-wrap:wrap;gap:8px 20px}
.process-visual #phase-label{color:var(--action)}
.steps li{min-height:75svh}
.area-locations{padding-top:50px}
.area-locations h3{font-size:26px;margin-bottom:25px}
.location-links{display:flex;flex-wrap:wrap;gap:12px}
.location-links a{display:inline-flex;align-items:center;min-height:48px;padding:10px 17px;background:#292c2d;color:#fff;text-decoration:none;font-size:17px;font-weight:650;border-radius:3px;transition:background .2s,color .2s}
.location-links a:hover{background:#ff85ca;color:var(--ink)}
.location-links.villages a{font-size:15px}
.area-locations>p{margin-top:26px;margin-bottom:16px;font-size:15px}
.area-locations>.area-note{font-size:12px;color:#d2d3d1;margin-bottom:0}
.producer{display:grid;grid-template-columns:1fr 1fr;gap:8vw;align-items:center;background:#ffe5f3}
.producer p{margin-top:26px;max-width:40ch}
.producer-action{display:flex;flex-direction:column;align-items:flex-start;gap:15px}
.producer-action>span{font-size:13px;color:#565958}
.footer-bottom{flex-wrap:wrap}
.region-main{padding-top:55px;padding-bottom:90px}
.region-main h1{font-size:clamp(42px,5.2vw,76px);line-height:1.05;letter-spacing:-.04em}
.region-lead{font-size:20px;max-width:65ch;margin-top:30px}
.region-main section{margin-top:85px}
.region-main h2{font-size:clamp(32px,3.6vw,52px)}
.region-intro{display:grid;grid-template-columns:1fr 1fr;gap:8vw}
.region-intro p+p{margin-top:20px}
.region-towns>p{margin-block:24px}
.region-towns h3{font-size:25px;margin-top:35px;margin-bottom:22px}
.region-main .location-links a{background:#e8e9e4;color:var(--ink)}
.region-main .location-links a:hover{background:var(--action);color:#fff}
.region-advice ol{padding-left:22px;margin-top:30px;display:grid;gap:24px}
.region-advice h3{font-size:23px;margin-bottom:10px}
.region-cta{padding:40px;background:#ffe5f3;display:grid;grid-template-columns:1.1fr 1fr;gap:30px;align-items:center}
.region-cta>div{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
@media(max-width:800px){
.process-scene{display:block}
.process-visual{position:sticky;top:135px;z-index:3;box-shadow:0 12px 24px -20px #111315}
.process-visual figcaption{padding:13px 16px;font-size:10px;gap:6px}
.process-visual #phase-label{font-size:17px}
.steps{margin-top:18px}
.steps li{min-height:65svh;align-content:start;padding-top:40px;padding-bottom:80px}
.area-locations{padding-top:34px}
.area-locations h3{font-size:23px}
.location-links{gap:10px}
.location-links a{font-size:15px;padding-inline:13px}
.location-links.villages a{font-size:14px}
.producer{grid-template-columns:1fr;gap:30px}
.producer p{font-size:15px}
.producer-action .button{font-size:13px;gap:15px;padding-inline:18px}
.region-main{padding-top:30px;padding-bottom:60px}
.region-main h1{font-size:40px}
.region-lead{font-size:17px}
.region-main section{margin-top:55px}
.region-intro,.region-cta{grid-template-columns:1fr;gap:24px}
.region-cta{padding:25px}
.region-main .location-links a{font-size:15px}
}

.process-scene{scroll-margin-top:125px}
@media(max-width:800px){.process-scene{scroll-margin-top:135px}}
@media(max-width:800px){.region-main h1{font-size:32px}}
/* Articulated mechanical rig: original chassis, rotating hubs and a connected hydraulic arm. */
.delivery-canvas{background:#fafaf8}
.delivery-world{background:#fafaf8}
.truck-body{position:absolute;inset:0;transform-origin:70% 80%}
.truck-art{clip-path:polygon(0 54%,66% 54%,66% 0,100% 0,100% 100%,0 100%)}
.delivery-arm{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.arm-rod{stroke:#ff0090;stroke-width:18;stroke-linecap:round}
.arm-piston{stroke:#fff;stroke-width:4;stroke-linecap:round}
.arm-pivot,.arm-hook{stroke:#ff0090;stroke-width:7;fill:#fff}
.wheel-hub{position:absolute;width:22px;height:22px;top:178px;border-radius:50%}
.wheel-one{left:67px}.wheel-two{left:163px}.wheel-three{left:438px}
.wheel-hub:before,.wheel-hub:after{content:'';position:absolute;left:4px;top:10px;width:14px;height:2px;background:#777}
.wheel-hub:after{transform:rotate(90deg)}
.bin-shadow,.truck-shadow{position:absolute;top:426px;left:0;height:12px;background:#111315;filter:blur(5px);border-radius:50%;opacity:.13;transform-origin:center}
.bin-shadow{width:300px}.truck-shadow{width:540px}
.load-art{background:none;mix-blend-mode:multiply;opacity:1;transform:none}
.load-piece{inset:0;background-size:1026.86px 800.54px;background-position:-399.39px -578.82px;opacity:0}
.load-piece:nth-child(1){clip-path:inset(0 66.6% 0 0)}
.load-piece:nth-child(2){clip-path:inset(0 33.3% 0 33.3%)}
.load-piece:nth-child(3){clip-path:inset(0 0 0 66.6%)}
.process-visual figcaption{background:#fafaf8;min-height:72px}
.sound-toggle{display:inline-flex;align-items:center;gap:9px;min-height:44px;border:0;border-radius:3px;padding:8px 12px;background:#e9ebe5;color:var(--ink);font:650 12px/1.4 Manrope,sans-serif;cursor:pointer}
.sound-toggle[hidden]{display:none}
.sound-toggle svg{width:18px;height:18px}
.sound-toggle[aria-pressed=true]{background:var(--ink);color:#fff}
.sound-toggle:hover{background:#ffe5f3;color:var(--ink)}
.sound-toggle:disabled{cursor:wait;opacity:.6}
@media(max-width:800px){.process-visual figcaption{min-height:70px}.sound-toggle{padding-inline:9px;font-size:11px}.sound-toggle svg{width:16px;height:16px}}
.load-art{position:absolute;height:58px;overflow:hidden}
.truck-body{mix-blend-mode:multiply}
.delivery-canvas,.delivery-world,.process-visual figcaption{background:#fff}

h1,h2,h3 { font-family:'Barlow Semi Condensed',sans-serif; font-weight:700; font-style:normal; }

.button { color:var(--ink); }
.text-link { color:#b80067; }
.area .text-link { color:#ff85ca; }