/* Nusa — marketing site. */

:root{
  --rainforest:#173A2E;
  --rainforest-2:#1F4738;
  --brass:#B08A4A;
  --brass-light:#D8BE8A;
  --brass-text:#856633;  /* brass deepened to 4.8:1 on Bone; #B08A4A is 2.9:1, too faint for 12px labels */
  --paper:#F7F4EE;
  --sand:#E9E2D3;
  --ink:#22201D;
  --body:#55514A;
  --muted:#6E6A62;
  --rule:#DDD5C4;
  --wall:#0B221C;              /* the hero stage's green wall, under the header */
  --sand-floor:#CDB88F;        /* bentonite sand of the hero stage */
  --sand-wash:rgba(222,204,170,.82);
  --serif:'Instrument Serif',serif;
  --sans:'Space Grotesk',sans-serif;
  --mono:'JetBrains Mono',monospace;
  --gutter:clamp(20px,4vw,48px);
  --section-pad:clamp(72px,9vw,128px);
  --spring:linear(0.0, 0.019, 0.068, 0.139, 0.224, 0.316, 0.411, 0.504, 0.592, 0.674, 0.747, 0.812, 0.868, 0.916, 0.954, 0.985, 1.01, 1.028, 1.04, 1.048, 1.053, 1.054, 1.053, 1.051, 1.047, 1.043, 1.038, 1.032, 1.027, 1.023, 1.018, 1.014, 1);
}

html{scroll-behavior:smooth}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
a{color:var(--rainforest);text-decoration:none}
a:hover{color:var(--brass)}
input,select,textarea,button{font-family:inherit}
:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
::selection{background:var(--brass-light);color:var(--rainforest)}
section[id]{scroll-margin-top:74px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.material-symbols-rounded{font-family:'Material Symbols Rounded';font-weight:normal;font-style:normal;line-height:1;
  letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;font-feature-settings:'liga';
  font-variation-settings:'wght' 200}

.page{display:flex;flex-direction:column;min-height:100vh}
.container{max-width:1280px;margin:0 auto;padding-inline:var(--gutter)}
.section{padding:var(--section-pad) 0}
.section--ruled{border-bottom:1px solid var(--rule)}
.dark{background:var(--rainforest);color:var(--paper)}
.charcoal{background:var(--ink);color:var(--paper)}

.diamond{flex:none;width:10px;height:10px;background:var(--brass);transform:rotate(45deg)}
.icon{flex:none;width:16px;height:16px;fill:currentColor}

/* Type */

.eyebrow{font-size:12px;font-weight:500;letter-spacing:.3em;color:var(--brass-text)}
.dark .eyebrow,.charcoal .eyebrow{color:var(--brass-light)}
.display{margin:0;font-family:var(--serif);font-size:clamp(44px,5.6vw,80px);font-weight:400;line-height:.95}
.display em{color:inherit}
.dark .display em,.charcoal .display em{color:var(--brass-light)}
.section:not(.dark):not(.charcoal) .display{color:var(--rainforest)}
.lead{margin:0;max-width:520px;font-size:17px;line-height:1.6;text-wrap:pretty}
.section:not(.dark):not(.charcoal) .lead{color:var(--body)}
.dark .lead,.charcoal .lead{opacity:.85}

/* Buttons — each sets its own hover so the global a:hover colour never wins. */

.btn{display:flex;align-items:center;letter-spacing:.16em}
.btn-quote{flex:none;gap:8px;padding:12px 20px;background:var(--brass-light);color:var(--rainforest);
  font-size:12px;font-weight:600;white-space:nowrap}
.btn-quote:hover{background:var(--paper);color:var(--rainforest)}
.btn-dark:hover{background:var(--ink);color:var(--brass-light)}
.btn-brass{gap:10px;padding:16px 26px;background:var(--brass-light);color:var(--rainforest);font-size:13px;font-weight:700}
.btn-brass .icon{width:20px;height:20px}
.btn-brass:hover{background:var(--paper);color:var(--rainforest)}
.btn-outline{padding:16px 26px;border:1px solid var(--brass-light);color:var(--paper);font-size:13px;font-weight:500}
.btn-outline:hover{background:var(--rainforest-2);color:var(--paper)}
.btn-dark{gap:8px;padding:15px 22px;background:var(--rainforest);color:var(--paper);font-size:12px;font-weight:500}
.btn-dark .icon{width:18px;height:18px}

/* Header — on Rainforest, continuous with the wall of the hero stage. */

.site-header{position:fixed;top:0;left:0;right:0;z-index:20;color:var(--paper);background:var(--wall);
  transition:background-color .3s ease}
/* Over the hero stage the wall photograph shows through; site.js clears the bar only there. */
.site-header.is-clear{background:rgba(11,34,28,0)}
.site-header .header-inner{max-width:none;padding-inline:clamp(20px,5.8vw,96px)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:16px}
.brand,.brand:hover{flex:none;display:flex;flex-direction:column;gap:3px;color:var(--paper)}
.brand-mark{display:flex;align-items:center;gap:10px}
.brand-word{font-family:var(--serif);font-size:36px;line-height:.8}
.brand-descriptor{padding-left:20px;font-size:7px;font-weight:500;letter-spacing:.42em}
/* One line tall: links that wrap on narrow screens drop out of view instead of growing the bar. */
.nav{flex:1 1 auto;min-width:0;height:18px;overflow:hidden;display:flex;flex-wrap:wrap;justify-content:center;
  align-content:flex-start;gap:0 clamp(12px,2.6vw,44px);font-size:12px;font-weight:500;line-height:18px;
  letter-spacing:.16em;white-space:nowrap}
.nav a{color:var(--brass-light)}
.nav a:hover{color:var(--paper)}
/* Desktop: the header carries the comp's scale, a larger lock-up over a quiet wall. */
@media (min-width:1024px){
  .header-inner{padding-block:24px}
  .brand-word{font-size:44px}
  .brand-mark .diamond{width:12px;height:12px}
  .brand-descriptor{padding-left:24px;font-size:8px}
  .nav{font-size:13px}
  .btn-quote{padding:14px 24px;font-size:13px}
  section[id]{scroll-margin-top:96px}
}
/* Small laptops: the tablet nav size and a tighter gap keep all five links on the one line. */
@media (min-width:1024px) and (max-width:1279px){
  .nav{column-gap:20px;font-size:12px}
}
/* Phones: the nav has no room left anyway; dropping it keeps the quote button on screen. */
@media (max-width:480px){
  .header-inner{gap:12px}
  .nav{display:none}
  .btn-quote{gap:6px;padding-inline:14px;letter-spacing:.08em}
}
@media (max-width:359px){
  .btn-quote-label{display:none}
}

/* Hero — one photographed stage. Pouch, cats, copy and stickers sit on it in container units,
   so the composition holds at every desktop width; below 1180px it unstacks. */

.hero{position:relative;overflow:hidden;container-type:inline-size;background:var(--wall);color:var(--paper)}
.hero-scene{position:relative;container-type:inline-size}
.hero-backdrop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 100%}
.hero-head{display:flex;flex-direction:column;align-items:center;text-align:center}
.hero-title{margin:0;font-family:var(--serif);font-weight:400;line-height:1;letter-spacing:-.015em}
.hero-title em{color:var(--brass-light)}
.hero-copy{display:flex;flex-direction:column;align-items:flex-start}
.hero-copy p{margin:0;line-height:1.6;text-wrap:pretty}
.hero-range{width:max-content}

/* The pouch stands in front; the two cats sit behind it and lean out from either side. */
.hero-pack{position:absolute}
/* A photographed blank pouch with Nusa's real artwork printed onto its face; the plate's own
   folds and light are laid back over the print so it sits in the film. */
.photo-pouch{position:relative;z-index:2;display:block;aspect-ratio:760/1208}
.photo-pouch-plate,.photo-pouch-light{position:absolute;inset:0;width:100%;height:100%;user-select:none}
.photo-pouch-art{position:absolute;left:5.5%;top:10.5%;width:89%}
.photo-pouch-light{mix-blend-mode:soft-light;opacity:.7}
.hero-cat{position:absolute;z-index:1;height:auto;pointer-events:none;user-select:none}
.hero-cat--left{right:95%;bottom:4%;height:70%}
.hero-cat--right{left:95%;bottom:3.5%;height:75%}
.hero-pack-shadow{position:absolute;z-index:1;left:-14%;right:-14%;bottom:-4%;height:9%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(28,24,16,.5),rgba(28,24,16,0))}

.stickers{margin:0;padding:0;list-style:none}
.sticker{display:flex;flex-direction:column;align-items:center;gap:10px}
/* Enamel coins standing on the sand: the photographed coin plate, mirrored and tipped per sticker so
   no two stand the same way, with level print on the face and a shadow on the floor. */
.sticker{position:relative;--disc:116px}
.sticker::before{content:"";position:absolute;left:50%;top:calc(var(--disc) * 1.02);width:calc(var(--disc) * .86);height:calc(var(--disc) * .16);
  translate:-50% -50%;border-radius:50%;background:radial-gradient(closest-side,rgba(52,38,18,.45),rgba(52,38,18,0));pointer-events:none}
.sticker-disc{position:relative;isolation:isolate;width:var(--disc);aspect-ratio:420/461;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:6%;padding:0 6% 0 0;color:var(--ink);transition:translate .45s var(--spring,ease-out)}
.sticker-disc::before{content:"";position:absolute;inset:0;z-index:-1;background:url("assets/coin-plate.webp") center/contain no-repeat;
  transform:scaleX(var(--flip,1)) rotate(var(--spin,0deg))}
.sticker[style*="--turn:-"] .sticker-disc{padding:0 0 0 6%}
.sticker[style*="--turn:-"]{--flip:-1}
.sticker:nth-child(2){--spin:-5deg}
.sticker:nth-child(4){--spin:4deg}
.sticker:hover .sticker-disc{translate:0 -4px}
.sticker .material-symbols-rounded{font-size:clamp(28px,2.6cqw,42px);color:var(--brass-text)}
.sticker-title{max-width:80%;font-size:clamp(12px,.96cqw,15px);font-weight:700;line-height:1.15;letter-spacing:.04em;text-align:center}
.sticker-caption{font-size:clamp(12px,.86cqw,14px);line-height:1.35;color:var(--ink);text-align:center;text-wrap:balance}

/* Arrival: the cats lean out from behind the pouch, then the stickers drop onto the sand. */
@media (prefers-reduced-motion:no-preference){
  .hero-cat--left{animation:cat-lean-left .9s var(--spring,ease-out) .35s both}
  .hero-cat--right{animation:cat-lean-right .9s var(--spring,ease-out) .55s both}
  .sticker-disc{animation:sticker-drop .7s var(--spring,ease-out) backwards;animation-delay:calc(.75s + var(--n,0) * .09s)}
}
@keyframes cat-lean-left{from{transform:translateX(38%) rotate(4deg)}to{transform:none}}
@keyframes cat-lean-right{from{transform:translateX(-38%) rotate(-4deg)}to{transform:none}}
@keyframes sticker-drop{from{opacity:0;translate:0 -36px;scale:.7}to{opacity:1;translate:0 0;scale:1}}

@media (min-width:1180px){
  .hero{aspect-ratio:1536/1104}
  .hero-scene{position:absolute;inset:0}
  .hero-head{position:absolute;z-index:3;left:0;right:0;top:9cqw;gap:1.6cqw}
  .hero-head .eyebrow{color:var(--brass-light);font-size:max(12px,.82cqw)}
  .hero-title{font-size:7.5cqw;white-space:nowrap}
  .hero-copy{position:absolute;z-index:3;left:13.2cqw;top:23.4cqw;width:19.4cqw;gap:2.6cqw}
  .hero-copy p{font-size:clamp(15px,1.24cqw,20px);opacity:.92}
  .hero-range{position:absolute;z-index:3;left:75.6cqw;top:40.4cqw}
  .hero-pack{left:51.5cqw;top:19.6cqw;width:22cqw;translate:-50% 0}
  .stickers{position:absolute;inset:0;z-index:4;pointer-events:none}
  .sticker{position:absolute;left:var(--x);top:var(--y);translate:-50% -4.8cqw;width:12cqw;pointer-events:auto}
  .sticker{--disc:8.8cqw}
  /* Captions can land on rocks: a sand wash keeps them legible on the photograph. */
  .sticker-caption{padding:3px 8px;border-radius:6px;background:var(--sand-wash);backdrop-filter:blur(2px)}
}

@media (max-width:1179px){
  .hero{display:flex;flex-direction:column}
  .hero-head{order:1;gap:18px;padding:calc(var(--header-h,80px) + clamp(28px,6vw,56px)) var(--gutter) 0}
  .hero-head .eyebrow{color:var(--brass-light)}
  .hero-title{font-size:clamp(44px,8.6vw,92px);line-height:.98;text-wrap:balance}
  .hero-copy{order:3;align-items:center;gap:24px;max-width:560px;margin:0 auto;padding:24px var(--gutter) 0;text-align:center}
  .hero-copy p{font-size:17px;opacity:.9}
  .hero-range{order:4;align-self:center;margin-top:12px}
  .hero-scene{order:2;margin-top:clamp(20px,4vw,40px);aspect-ratio:5/4;overflow:hidden;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 18%);mask-image:linear-gradient(to bottom,transparent 0,#000 18%)}
  @media (min-width:700px){.hero-scene{aspect-ratio:16/10}.hero-pack{width:28cqw}}
  .hero-pack{left:50%;bottom:9%;width:33cqw;translate:-50% 0}
  .stickers{order:5;display:flex;flex-wrap:wrap;justify-content:center;gap:30px 16px;margin-top:40px;
    padding:36px var(--gutter) 48px;background:url("assets/sand-tile.jpg") 0 0/160px auto,var(--sand-floor)}
  .sticker{width:calc(50% - 8px);max-width:220px}
  .sticker-caption{max-width:180px}
}

/* Cats peeking over the edges of sections. Visible by default; where scroll timelines exist
   they rise into view as their edge scrolls up. */
.peek{position:absolute;z-index:4;width:var(--peek-w,160px);overflow:hidden;pointer-events:none}
.peek img{display:block;width:100%;height:auto;user-select:none}
.peek--side img{scale:-1 1}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .peek img{animation:peek-up linear both;animation-timeline:view();animation-range:entry 10% cover 35%}
    .peek--side img{animation-name:peek-in}
  }
}
@keyframes peek-up{from{transform:translateY(102%)}to{transform:none}}
@keyframes peek-in{from{transform:translateX(102%)}to{transform:none}}
.peek--stage{right:5%;bottom:0;--peek-w:clamp(96px,11vw,168px)}
.spec-frame{position:relative}
.peek--specs{right:2%;bottom:100%;margin-bottom:1px;--peek-w:clamp(96px,9vw,150px)}
.origin-panel{position:relative}
.peek--origin-top{right:8%;bottom:100%;--peek-w:clamp(110px,12vw,190px)}
/* The calico leans out from behind the photo's edge, looking at the clay. */
.peek--origin-side{left:0;bottom:clamp(32px,5vw,72px);--peek-w:clamp(64px,5.6vw,84px)}
@media (max-width:900px){.peek--origin-side{display:none}}

.card-text{display:flex;flex-direction:column;gap:6px}
.card-title{font-size:12px;font-weight:500;letter-spacing:.16em}
.card-desc{font-size:14px;line-height:1.5;color:var(--body)}

/* Products */

.products{display:flex;flex-direction:column;gap:48px}
.products-head{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.55fr);align-items:end;gap:clamp(32px,4vw,64px)}
.products-head .display{font-size:clamp(38px,3.9vw,56px)}
.products-head .lead{margin-top:8px}
.products-head .display em{display:block}
@media (max-width:980px){.products-head{grid-template-columns:1fr}}

/* The range line-up: five packs, one per fragrance. A kitten waits behind the chosen one
   and follows the pointer along the row. Choosing a pack sets the configurator below. */
.lineup{--gap:clamp(8px,1.4vw,18px);--col:calc((100% - 4 * var(--gap)) / 5);position:relative;display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--gap);align-items:end;--pt:clamp(56px,7vw,104px);padding-top:var(--pt)}
.lineup-pouch{position:relative;z-index:2;display:block;padding:0;border:0;background:none;cursor:pointer;
  filter:drop-shadow(0 16px 14px rgba(23,58,46,.28));transition:translate .45s var(--spring,ease-out)}
.lineup-pouch .photo-pouch{width:100%}
.lineup-pouch:hover,.lineup-pouch:focus-visible{translate:0 -10px}
.lineup-pouch:focus-visible{outline:2px solid var(--brass);outline-offset:6px}
.lineup-kitten,.lineup-paws{position:absolute;top:calc(var(--pt) + 6px);width:calc(var(--col) * 1.02);
  left:calc(var(--col) * (var(--i) + .5) + var(--gap) * var(--i));translate:-50% -96.4%;
  transition:left .7s var(--spring,ease-out);pointer-events:none}
.lineup-kitten{z-index:1}
/* The same kitten again, cropped to its two front paws and laid over the pouch so they drape over the seal. */
.lineup-paws{z-index:3;clip-path:polygon(1% 74%,27.5% 74%,27.5% 100%,74.5% 100%,74.5% 74%,99.6% 74%,99.6% 100%,1% 100%)}
.lineup-kitten img,.lineup-paws img{display:block;width:100%;height:auto}
@media (prefers-reduced-motion:reduce){.lineup-kitten,.lineup-paws,.lineup-pouch{transition:none}}
.section-head{display:flex;flex-direction:column;gap:16px}

.configurator{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));background:var(--sand)}
.stage{position:relative;overflow:hidden;display:flex;align-items:flex-end;justify-content:center;min-height:520px;
  padding:clamp(32px,5vw,64px);background:url("assets/stage-mini.jpg") 50% 100%/cover,var(--wall)}
.stage-readout{position:absolute;z-index:3;top:clamp(20px,3vw,32px);left:clamp(20px,3vw,32px);margin:0;
  display:flex;flex-direction:column;gap:4px}
.stage-readout-label{font-size:12px;font-weight:500;letter-spacing:.2em;color:var(--brass-light)}
.stage-readout-value{font-family:var(--mono);font-size:14px;color:var(--paper);font-variant-numeric:tabular-nums}
/* Granules pour into the pack's mouth whenever the pack size changes (site.js). */
.pour{position:absolute;z-index:2;inset:0;width:100%;height:100%;pointer-events:none}

/* Preview pack — one photographed pack that becomes whichever pack is chosen: the plate for the
   form crossfades in while the size moves on a spring, and Nusa's real artwork is printed on its face.
   site.js swaps --spring for a physical spring curve where linear() easing is supported. */
.pack{--spring:cubic-bezier(.22,1,.36,1);--spring-dur:.5s;
  --art-l:5.5%;--art-t:10.5%;--art-w:89%;
  position:relative;flex:none;width:var(--pw);height:var(--ph);transform-origin:50% 100%;
  transition:width var(--spring-dur) var(--spring),height var(--spring-dur) var(--spring)}
.pack[data-form="handle"]{--art-l:11%;--art-t:19%;--art-w:78%}
.pack[data-form="sack"]{--art-l:8%;--art-t:11%;--art-w:84%}
.pack-ground{position:absolute;left:4%;right:4%;bottom:-12px;height:24px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(28,24,16,.5),rgba(28,24,16,0))}
.pack-object{position:absolute;inset:0;filter:drop-shadow(0 22px 18px rgba(10,20,16,.35))}
.pack-plate,.pack-light{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;user-select:none}
.pack-plate[hidden]{display:none}
.pack-art{position:absolute;left:var(--art-l);top:var(--art-t);width:var(--art-w);
  transition:left var(--spring-dur) var(--spring),top var(--spring-dur) var(--spring),width var(--spring-dur) var(--spring),opacity .3s ease}
.pack-light{mix-blend-mode:soft-light;opacity:.7;pointer-events:none}
.pack-stamp{position:absolute;left:0;right:0;top:20%;bottom:6%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;color:var(--ink);mix-blend-mode:multiply;opacity:0;transition:opacity .3s ease}
.pack-stamp .diamond{width:12px;height:12px;background:var(--ink)}
.bulk-word{font-family:var(--serif);font-size:58px;line-height:.85}
.bulk-descriptor{font-size:7px;letter-spacing:.42em}
.bulk-stamp{margin-top:12px;padding:4px 8px;border:1px solid var(--ink);font-family:var(--mono);font-size:10px}
.pack[data-form="bulk"] .pack-art{opacity:0}
.pack[data-form="bulk"] .pack-stamp{opacity:.9;transition-delay:.12s}
/* A glint runs along the crimped seal as the filled pack is sealed. */
.pack-seal-glint{position:absolute;left:3%;right:3%;top:0;height:5%;pointer-events:none;opacity:0;mix-blend-mode:screen;
  background:linear-gradient(90deg,rgba(255,240,210,0) 0%,rgba(255,240,210,.85) 50%,rgba(255,240,210,0) 100%) -60% 0/60% 100% no-repeat}
.pack.is-sealed .pack-seal-glint{animation:seal-glint .6s cubic-bezier(.16,1,.3,1)}
@keyframes seal-glint{0%{opacity:1;background-position:-60% 0}100%{opacity:0;background-position:160% 0}}
.pack-sheen{position:absolute;inset:0;pointer-events:none;opacity:0;mix-blend-mode:soft-light;
  background:linear-gradient(105deg,transparent 30%,rgba(255,246,222,.95) 48%,transparent 62%) 100% 0/260% 100% no-repeat}

@media (prefers-reduced-motion:reduce){
  .pack,.pack *{transition:none !important}
}

.details{display:flex;flex-direction:column;gap:32px;padding:clamp(28px,4vw,56px);background:var(--paper);border:1px solid var(--rule)}
.details-head{display:flex;flex-direction:column;gap:10px}
.details-title{margin:0;font-family:var(--serif);font-size:40px;font-weight:400;line-height:1;color:var(--rainforest)}
.details-desc{margin:0;font-size:15px;line-height:1.6;color:var(--body)}
.option-group{display:flex;flex-direction:column;gap:12px}
.option-label{font-size:12px;font-weight:500;letter-spacing:.2em;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:flex;align-items:center;gap:8px;padding:10px 14px;border:1px solid var(--rule);background:var(--paper);
  color:var(--ink);font-size:14px;cursor:pointer}
.chip[aria-pressed="true"]{border-color:var(--rainforest);background:var(--sand)}
.chip-dot{width:10px;height:10px;border-radius:50%;border:1px solid #0000001A;background:var(--dot)}
.sizes{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px}
.size-option{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:14px;border:1px solid var(--rule);
  background:var(--paper);color:var(--ink);text-align:left;cursor:pointer}
.size-option[aria-pressed="true"]{border-color:var(--rainforest);background:var(--rainforest);color:var(--paper)}
.chip:hover,.size-option:hover{border-color:var(--rainforest)}
.size-name{font-family:var(--serif);font-size:28px;line-height:1}
.size-weight{font-family:var(--mono);font-size:12px;opacity:.8}
.details-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding-top:8px;border-top:1px solid var(--rule)}
.pack-note{font-family:var(--mono);font-size:12px;color:var(--muted)}

/* Private label */

.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr));align-items:center;gap:clamp(40px,6vw,96px)}
.stack{display:flex;flex-direction:column;gap:28px}
.steps{display:flex;flex-direction:column;margin:0;padding:0;list-style:none}
.step{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;padding:18px 0;border-top:1px solid #3A3733}
.step-n{font-family:var(--serif);font-size:30px;line-height:1;color:var(--brass)}
.step-body{display:flex;flex-direction:column;gap:4px}
.step-title{font-size:16px;font-weight:500}
.step-desc{font-size:14px;line-height:1.5;opacity:.7}

.oem-visual{display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:14px}
#oem .split{align-items:start}
@media (min-width:900px){#oem .oem-visual{position:sticky;top:110px}}
.oem-mock{position:relative;aspect-ratio:600/980;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  padding:22% 12% 8%;color:var(--ink);text-align:center;background:url("assets/pouch-white-plate.webp") center/100% 100% no-repeat;
  filter:drop-shadow(0 22px 18px rgba(0,0,0,.45))}
.oem-mock-title{font-family:var(--serif);font-size:clamp(30px,3.4vw,46px);line-height:.95}
.oem-mock-sub{margin-top:10px;font-size:8px;letter-spacing:.3em;color:var(--muted)}
.oem-side{display:flex;flex-direction:column;gap:14px}
.oem-photo{position:relative;aspect-ratio:1}
.moq{display:flex;flex-direction:column;gap:4px;padding:20px;background:var(--rainforest)}
.moq-value{font-family:var(--serif);font-size:44px;line-height:1;color:var(--brass-light)}
.moq-label{font-size:12px;letter-spacing:.14em}

/* Process */

.process-wrap{display:flex;flex-direction:column;gap:48px}
.process{--process-gap:clamp(16px,2.4vw,32px);--paw-clear:16px;position:relative;display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--process-gap);
  margin:0;padding:0;list-style:none}
/* Five coins joined by a trail of paw prints, island to shelf. Each stretch runs to the next coin
   and stops a paw's width short of both rims; `space` lays only whole prints. */
.process-step:not(:last-child)::after{content:"";position:absolute;top:40px;left:calc(50% + 36px + var(--paw-clear));
  width:calc(100% + var(--process-gap) - 72px - 2 * var(--paw-clear));height:40px;translate:0 -50%;opacity:.6;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84 40'%3E%3Cg fill='%23B08A4A'%3E%3Cg transform='translate(14 12) rotate(90)'%3E%3Cpath d='M0 0.6C3.4 0.6 6.6 3.6 6.6 6.6C6.6 8.6 5.2 9.6 3.6 9.6C2.3 9.6 1.3 8.8 0 8.8C-1.3 8.8 -2.3 9.6 -3.6 9.6C-5.2 9.6 -6.6 8.6 -6.6 6.6C-6.6 3.6 -3.4 0.6 0 0.6Z'/%3E%3Cellipse cx='-6.9' cy='-1.6' rx='2.3' ry='2.9' transform='rotate(-28 -6.9 -1.6)'/%3E%3Cellipse cx='-2.6' cy='-5.4' rx='2.3' ry='3' transform='rotate(-10 -2.6 -5.4)'/%3E%3Cellipse cx='2.6' cy='-5.4' rx='2.3' ry='3' transform='rotate(10 2.6 -5.4)'/%3E%3Cellipse cx='6.9' cy='-1.6' rx='2.3' ry='2.9' transform='rotate(28 6.9 -1.6)'/%3E%3C/g%3E%3Cg transform='translate(56 28) rotate(90)'%3E%3Cpath d='M0 0.6C3.4 0.6 6.6 3.6 6.6 6.6C6.6 8.6 5.2 9.6 3.6 9.6C2.3 9.6 1.3 8.8 0 8.8C-1.3 8.8 -2.3 9.6 -3.6 9.6C-5.2 9.6 -6.6 8.6 -6.6 6.6C-6.6 3.6 -3.4 0.6 0 0.6Z'/%3E%3Cellipse cx='-6.9' cy='-1.6' rx='2.3' ry='2.9' transform='rotate(-28 -6.9 -1.6)'/%3E%3Cellipse cx='-2.6' cy='-5.4' rx='2.3' ry='3' transform='rotate(-10 -2.6 -5.4)'/%3E%3Cellipse cx='2.6' cy='-5.4' rx='2.3' ry='3' transform='rotate(10 2.6 -5.4)'/%3E%3Cellipse cx='6.9' cy='-1.6' rx='2.3' ry='2.9' transform='rotate(28 6.9 -1.6)'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") 50% 50%/84px 40px space no-repeat}
.process-step{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.process-coin{display:grid;place-items:center;width:72px;height:79px;padding-right:5px;
  background:url("assets/coin-plate.webp") center/contain no-repeat;filter:drop-shadow(0 8px 6px rgba(40,30,15,.28))}
.process-n{font-family:var(--serif);font-size:30px;line-height:1;color:var(--rainforest)}
.process-icon{font-size:34px;color:var(--brass)}
.process-step .card-text{align-items:center;gap:8px}
@media (max-width:860px){
  .process{grid-template-columns:1fr;--process-gap:76px;--paw-clear:14px}
  .process-step:not(:last-child)::after{top:calc(79px + var(--paw-clear));left:36px;width:40px;
    height:calc(100% + var(--process-gap) - 79px - 2 * var(--paw-clear));translate:-50% 0;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 44'%3E%3Cg fill='%23B08A4A'%3E%3Cg transform='translate(12 11) rotate(180)'%3E%3Cpath d='M0 0.6C3.4 0.6 6.6 3.6 6.6 6.6C6.6 8.6 5.2 9.6 3.6 9.6C2.3 9.6 1.3 8.8 0 8.8C-1.3 8.8 -2.3 9.6 -3.6 9.6C-5.2 9.6 -6.6 8.6 -6.6 6.6C-6.6 3.6 -3.4 0.6 0 0.6Z'/%3E%3Cellipse cx='-6.9' cy='-1.6' rx='2.3' ry='2.9' transform='rotate(-28 -6.9 -1.6)'/%3E%3Cellipse cx='-2.6' cy='-5.4' rx='2.3' ry='3' transform='rotate(-10 -2.6 -5.4)'/%3E%3Cellipse cx='2.6' cy='-5.4' rx='2.3' ry='3' transform='rotate(10 2.6 -5.4)'/%3E%3Cellipse cx='6.9' cy='-1.6' rx='2.3' ry='2.9' transform='rotate(28 6.9 -1.6)'/%3E%3C/g%3E%3Cg transform='translate(28 33) rotate(180)'%3E%3Cpath d='M0 0.6C3.4 0.6 6.6 3.6 6.6 6.6C6.6 8.6 5.2 9.6 3.6 9.6C2.3 9.6 1.3 8.8 0 8.8C-1.3 8.8 -2.3 9.6 -3.6 9.6C-5.2 9.6 -6.6 8.6 -6.6 6.6C-6.6 3.6 -3.4 0.6 0 0.6Z'/%3E%3Cellipse cx='-6.9' cy='-1.6' rx='2.3' ry='2.9' transform='rotate(-28 -6.9 -1.6)'/%3E%3Cellipse cx='-2.6' cy='-5.4' rx='2.3' ry='3' transform='rotate(-10 -2.6 -5.4)'/%3E%3Cellipse cx='2.6' cy='-5.4' rx='2.3' ry='3' transform='rotate(10 2.6 -5.4)'/%3E%3Cellipse cx='6.9' cy='-1.6' rx='2.3' ry='2.9' transform='rotate(28 6.9 -1.6)'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") 50% 50%/40px 44px no-repeat space}
  .process-step{display:grid;grid-template-columns:72px 40px minmax(0,1fr);align-items:start;column-gap:16px;text-align:left}
  .process-step .card-text{align-items:flex-start}
}

/* Origin */

.origin{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}
.origin-photo{position:relative;min-height:560px}
.origin-photo image-slot{position:absolute;inset:0}
.origin-panel{display:flex;flex-direction:column;justify-content:center;gap:28px;padding:clamp(40px,6vw,88px)}
.origin-panel .display{font-size:clamp(40px,4.8vw,68px)}
.why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:24px}
.why{display:flex;flex-direction:column;gap:8px;padding-top:16px;border-top:1px solid var(--brass)}
.why-title{font-size:15px;font-weight:500}
.why-desc{font-size:14px;line-height:1.5;opacity:.75}

/* Specs */

.specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:clamp(32px,5vw,80px)}
.specs .section-head p{margin:0;max-width:440px;font-size:16px;line-height:1.6;color:var(--body)}
.spec-list{display:flex;flex-direction:column;margin:0;border-top:1px solid var(--rainforest)}
.spec-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:20px;padding:16px 0;border-bottom:1px solid var(--rule)}
.spec-row dt{font-size:14px;letter-spacing:.08em;color:var(--body)}
.spec-row dd{margin:0;font-family:var(--mono);font-size:14px;color:var(--rainforest);text-align:right}

/* Contact */

.contact{align-items:end}
.contact .lead{max-width:460px}
.topics{display:flex;flex-direction:column;gap:14px}
.topic{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 24px;border:1px solid #2C5446;color:var(--paper)}
.topic:hover{background:var(--rainforest-2);border-color:var(--brass-light);color:var(--paper)}
.topic-text{display:flex;flex-direction:column;gap:4px}
.topic-label{font-family:var(--serif);font-size:28px;line-height:1}
.topic-sub{font-size:13px;opacity:.7}
.topic .icon{width:24px;height:24px;fill:var(--brass-light)}
.btn-whatsapp{justify-content:center;gap:12px;padding:20px 24px;font-size:14px}
.btn-whatsapp .icon{width:22px;height:22px}

/* 404 */

.not-found{min-height:100vh;display:flex;align-items:center;padding:var(--section-pad) 0}
.not-found .container{width:100%}
.not-found .footer-mark{color:var(--paper)}
.not-found .actions{display:flex;flex-wrap:wrap;gap:12px}

/* Footer */

.footer-inner{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:24px;padding-block:40px}
.footer-mark{display:flex;align-items:center;gap:10px}
.footer-mark .diamond{width:9px;height:9px}
.footer-mark span{font-family:var(--serif);font-size:30px;line-height:.8}
.footer-tagline{font-family:var(--serif);font-style:italic;font-size:20px;color:var(--brass-light)}
.footer-legal{font-size:12px;letter-spacing:.12em;opacity:.6}
.nowrap{white-space:nowrap}