/* Coopercabruca, one stylesheet for every page.
   Type: Cabruca Display (titles), Cabruca Text (leads, quotes), Archivo (body, labels).
   One font and one style per element: no mixed italics inside a heading or a quote. */

/* Fonts, self-hosted: Archivo (variable, trimmed to width 62-100% and weight 400-700 and the characters the site uses; SIL OFL) and the brand's Cabruca */
@font-face {
  font-family: "Archivo";
  src: url("../fonts/Archivo-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2032-2033, U+2039-203A, U+20AC, U+2122, U+2190-2193, U+2197, U+2212;
}
@font-face {
  font-family: "Cabruca Display";
  src: url("../fonts/CabrucaDisplay-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cabruca Display";
  src: url("../fonts/CabrucaDisplay-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cabruca Display";
  src: url("../fonts/CabrucaDisplay-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cabruca Text";
  src: url("../fonts/CabrucaText-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cabruca Text";
  src: url("../fonts/CabrucaText-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Cabruca Text";
  src: url("../fonts/CabrucaText-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* From the logo: brown #5c2d26, pod yellow #fcdd09, cream #f9f1e9, green #0b9444 */
  --cocoa: #2b140f;
  --cocoa-2: #5c2d26;
  --cream: #f9f1e9;
  --paper: #fdfaf4;
  --pod: #fcdd09;
  --pod-dark: #8a5a00;
  --forest: #14351f;
  --ink: #2b140f;
  --muted: #6f5a4e;
  --line: #e4d8c6;
  --kraft: #cfb48d;
  --sand: #ebdcc3;    /* behind the first section after the photo heroes (origin, cooperative) */   /* the board the press clippings are taped to */
  --on-dark: #eadfd1;
  --on-dark-muted: #c7b6a6;

  --display: "Cabruca Display", Georgia, "Times New Roman", serif;
  --serif: "Cabruca Text", Georgia, "Times New Roman", serif;
  --sans: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;

  --wrap: 1240px;
  --gutter: clamp(20px, 4vw, 40px);
  --space: clamp(64px, 7.5vw, 112px);
  --radius: 2px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.65 var(--sans);
}
img { max-width: 100%; height: auto; display: block; }
picture { display: contents; }   /* WebP wrapper: the <img> inside keeps its layout */
a { color: var(--cocoa-2); }
figure { margin: 0; }
figcaption { font-size: .85rem; color: var(--muted); margin-top: 10px; }

h1, h2, h3 { margin: 0 0 .45em; font-weight: 400; }
h1, h2 { font-family: var(--display); font-weight: 700; line-height: 1.02; letter-spacing: -.018em; }
h1 { font-size: clamp(2.3rem, 4.4vw, 3.8rem); }
h2 { font-size: clamp(1.8rem, 3.1vw, 2.7rem); }
h3 { font-family: var(--serif); font-weight: 700; font-size: 1.25rem; line-height: 1.25; }
p { margin: 0 0 1em; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
section { padding: var(--space) 0; }
.section-head { max-width: 44rem; margin-bottom: clamp(36px, 5vw, 56px); }
.lead { font-family: var(--serif); font-size: clamp(1.05rem, 1.35vw, 1.2rem); line-height: 1.5; color: var(--muted); max-width: 38rem; }

/* Small label: used sparingly, not above every heading */
.eyebrow {
  font-family: var(--sans);
  font-stretch: 75%;
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pod-dark);
  margin-bottom: 1.2em;
}

.section-cream { background: var(--cream); }
.section-dark { background: var(--cocoa); color: var(--on-dark); }
.section-dark h2, .section-dark h3 { color: var(--paper); }
.section-dark .lead, .section-dark p { color: var(--on-dark-muted); }
.section-dark .eyebrow { color: var(--pod); }
.section-forest { background: var(--forest); color: #e6ebe2; }
.section-forest .lead { color: #c9d4c4; }
.section-forest .eyebrow { color: var(--pod); }

/* ------------------------------------------------------------------ header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(253, 250, 244, .97);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap { display: flex; align-items: center; gap: 24px; min-height: 64px; }
.brand img { height: 44px; width: auto; }
.site-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.site-nav a {
  color: var(--ink);
  text-decoration: none;
  font-stretch: 85%;
  font-weight: 600;
  font-size: .85rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 8px 12px;
}
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--cocoa-2); text-decoration: underline; text-underline-offset: 6px; }
.lang { font-size: .85rem; font-weight: 600; margin-left: 8px; padding-left: 16px; border-left: 1px solid var(--line); }
.lang a, .lang span { padding: 4px 6px; text-decoration: none; }
.lang a { color: var(--muted); }
.nav-toggle { position: absolute; opacity: 0; pointer-events: none; }
.nav-button { display: none; }

/* ------------------------------------------------------------------ buttons and links */

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.btn {
  display: inline-block;
  padding: 15px 26px;
  border: 1.5px solid transparent;
  border-radius: var(--radius);
  font: 700 .86rem/1 var(--sans);
  font-stretch: 85%;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}
.btn-primary { background: var(--cocoa); color: var(--paper); }
.btn-primary:hover { background: var(--cocoa-2); }
.btn-dark { background: var(--cocoa); color: var(--paper); }
.btn-dark:hover { background: var(--cocoa-2); }
.btn-ghost { border-color: currentColor; color: inherit; }
.btn-ghost:hover { background: rgba(43, 20, 15, .06); }
.text-link {
  color: var(--cocoa-2);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 5px;
}
.text-link::after { content: " →"; }
.text-link:hover { color: var(--ink); }
a:focus-visible, .nav-toggle:focus-visible + .nav-button { outline: 3px solid var(--pod-dark); outline-offset: 3px; }

/* ------------------------------------------------------------------ home */

.hero { padding: clamp(24px, 4vh, 56px) 0 clamp(40px, 6vh, 80px); }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: end;
}
.hero-text { padding-bottom: clamp(0px, 4vw, 48px); }
.hero h1 { font-size: clamp(2.3rem, min(4.6vw, 8vh), 4.4rem); line-height: 1; max-width: 12em; }
.hero .lead { margin-bottom: clamp(20px, 3.5vh, 32px); }
.hero-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); }

.facts { padding: 0 0 var(--space); }
.facts p {
  font-family: var(--serif);
  font-size: clamp(1.2rem, 2vw, 1.65rem);
  line-height: 1.35;
  max-width: 52rem;
  margin: 0;
  padding-top: 28px;
  border-top: 1.5px solid var(--ink);
}

.manifesto { background: var(--forest); color: var(--paper); }
.manifesto-grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: center;
}
.photo-tall img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radius); }
.manifesto blockquote { margin: 0; }
.manifesto blockquote p {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -.012em;
  font-size: clamp(1.7rem, 3.3vw, 2.8rem);
  line-height: 1.12;
  margin-bottom: .7em;
}
.manifesto blockquote footer { font-size: .95rem; color: #c9d4c4; }

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: center;
}
.split-photo-left { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.split-photo-right { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.split figure img { width: 100%; border-radius: var(--radius); }
.split-photo-left figure img { aspect-ratio: 4 / 5; object-fit: cover; }
.split-photo-right figure img { aspect-ratio: 1 / 1; object-fit: cover; }
.split > div > p:last-child { margin-bottom: 0; }

.story-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.story-head { position: sticky; top: 110px; }
.story-head h2 { font-size: clamp(2.1rem, 3.8vw, 3.3rem); line-height: 1.02; }
.story-head img { width: 100%; max-width: 360px; aspect-ratio: 4 / 5; object-fit: cover; margin-top: 32px; border-radius: var(--radius); }
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: 24px;
  padding: 26px 0;
  border-top: 1px solid rgba(234, 223, 209, .18);
}
.timeline li:last-child h3 { color: var(--pod); }
.timeline .when {
  font-family: var(--sans);
  font-stretch: 75%;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--pod);
  padding-top: 4px;
}
.timeline h3 { font-family: var(--display); font-weight: 600; font-size: 1.45rem; margin-bottom: .25em; }
.timeline p { margin: 0; }

.voices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 56px);
}
.voice { border-top: 1.5px solid var(--ink); padding-top: 24px; }
.voice blockquote {
  margin: 0 0 20px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.2rem;
  line-height: 1.4;
}
.voice figcaption { font-size: .92rem; color: var(--muted); margin: 0; }
.voice figcaption strong { color: var(--ink); }
.source-note { margin-top: 32px; font-size: .82rem; color: var(--muted); }

.cta-pod { background: var(--pod); color: var(--cocoa); }
.cta-pod h2 { font-size: clamp(1.9rem, 3.8vw, 3.1rem); max-width: 15em; }
.cta-pod .lead { color: var(--cocoa-2); margin-bottom: 32px; }
.cta-pod .text-link { color: var(--cocoa); }

/* ------------------------------------------------------------------ inner pages */

.page-hero { padding: clamp(56px, 7vw, 96px) 0 clamp(40px, 5vw, 64px); background: var(--cream); border-bottom: 1px solid var(--line); }
.page-hero h1 { font-size: clamp(2.2rem, 4.2vw, 3.4rem); }

/* Anchor list of products: plain text links, not pills */
.product-nav { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 28px; font-weight: 600; }
.product-nav a { color: var(--cocoa-2); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.product-nav a:hover { color: var(--ink); }

.product {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(28px, 5vw, 64px);
  padding: 56px 0;
  border-top: 1px solid var(--line);
  scroll-margin-top: 90px;
}
.product:first-child { border-top: 0; padding-top: 0; }
.product h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); }
.shot { aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius); background: var(--cream); align-self: start; }
.shot img { width: 100%; height: 100%; object-fit: cover; }
.shot.cut img { object-fit: contain; padding: 8%; mix-blend-mode: multiply; }
.specs { width: 100%; border-collapse: collapse; margin: 8px 0 28px; font-size: .95rem; }
.specs th, .specs td { text-align: left; padding: 10px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.specs th { width: 40%; padding-right: 16px; font-weight: 600; color: var(--muted); }

.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.card { text-decoration: none; color: inherit; }
.card div { padding: 16px 0 0; }
.card p { color: var(--muted); font-size: .95rem; margin: 0; }
.pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.pillars > div { border-top: 1.5px solid currentColor; padding-top: 20px; }
.pillars p { margin: 0; opacity: .9; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.stats li { border-top: 1.5px solid var(--ink); padding-top: 14px; }
.stats strong { display: block; font-family: var(--display); font-weight: 700; font-size: 2rem; line-height: 1.1; }
.stats span { font-size: .92rem; color: var(--muted); }
.stats-band { padding: 48px 0; }
.trust { display: flex; flex-wrap: wrap; gap: 8px 32px; list-style: none; padding: 24px 0; margin: 0; color: var(--muted); }

.contacts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.contact { border-top: 1.5px solid var(--ink); padding-top: 20px; }
.contact h3 { margin-bottom: .2em; }
.contact .who { color: var(--muted); margin-bottom: 1em; }
.contact .btn { padding: 12px 18px; }
.cta { text-align: left; }

/* Inner page hero with a photo */
.page-hero .hero-grid { align-items: center; }
.page-hero .hero-photo img { aspect-ratio: 4 / 3; }
.page-hero .lead { margin-bottom: 0; }

/* Long-form text */
.prose { max-width: 40rem; }
.prose p { font-size: 1.05rem; }
.prose .lead { margin-bottom: 1.2em; }
.signature { font-size: .92rem; color: var(--muted); }

/* Numbered points without cards */
.points { list-style: none; margin: 0; padding: 0; counter-reset: pt; }
.points li { counter-increment: pt; display: grid; grid-template-columns: 3.2rem minmax(0, 1fr); gap: 16px; padding: 24px 0; border-top: 1px solid var(--line); }
.points li::before { content: counter(pt, decimal-leading-zero); font: 700 1.05rem var(--sans); font-stretch: 75%; color: var(--pod-dark); padding-top: 3px; }
.points h3 { margin-bottom: .3em; }
.points p { margin: 0; color: var(--muted); }
.section-dark .points li { border-top-color: rgba(234, 223, 209, .18); }
.section-dark .points li::before { color: var(--pod); }

/* Mission, values, goal */
.defs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); margin: 0; }
.defs div { border-top: 1.5px solid var(--ink); padding-top: 18px; }
.defs dt { font-family: var(--display); font-weight: 600; font-size: 1.6rem; margin-bottom: .4em; }
.defs dd { margin: 0; color: var(--muted); }

/* People to contact: rows, not cards */
.people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 5vw, 80px); margin: 0; padding: 0; list-style: none; }
.people li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 20px; align-items: end; padding: 22px 0; border-top: 1px solid var(--line); }
.people h3 { margin: 0; grid-column: 1 / -1; font-size: 1.15rem; }
.people .name { color: var(--muted); }
.people .name a { color: inherit; text-decoration: none; white-space: nowrap; }
.people .text-link { white-space: nowrap; }

/* Old footer, still used by inner pages */
.site-footer { background: var(--cocoa); color: var(--on-dark-muted); padding: 56px 0 32px; font-size: .92rem; }
.site-footer .cols { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; margin-bottom: 40px; }
.site-footer h4, .site-footer .ef-heading { color: var(--paper); font: 700 .8rem var(--sans); letter-spacing: .1em; text-transform: uppercase; margin: 0 0 12px; }
.site-footer a { color: var(--on-dark); text-decoration: none; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 6px; }
.site-footer .legal { border-top: 1px solid #4a3528; padding-top: 20px; font-size: .85rem; }

/* ------------------------------------------------------------------ engraved footer */

.engraved-footer { background: var(--cream); color: var(--cocoa-2); padding-top: 64px; overflow: hidden; font-size: .92rem; }
.ef-top { display: flex; justify-content: space-between; gap: 48px; }
.ef-brand { max-width: 22rem; }
.ef-brand img { height: 48px; width: auto; margin-bottom: 16px; }
.ef-legal { font-size: .8rem; opacity: .8; margin-top: 20px; }
.ef-cols { display: flex; gap: 64px; }
.ef-cols h4, .ef-cols .ef-heading { font: 600 1.1rem var(--display); margin: 0 0 12px; color: var(--cocoa-2); }
.ef-cols a { display: block; color: var(--cocoa-2); text-decoration: none; padding: 3px 0; }
.ef-cols a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ef-art {
  display: block;
  width: 100%;
  height: clamp(260px, 34vw, 560px);
  object-fit: cover;
  object-position: center bottom;
  margin-top: -24px;
}


/* ------------------------------------------------------------------ WhatsApp */

.wa-float {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 999px;
  background: #1f7a45;
  color: #fff;
  font-weight: 600;
  font-size: .9rem;
  text-decoration: none;
}
.wa-float svg { width: 20px; height: 20px; fill: currentColor; }

/* ------------------------------------------------------------------ responsive */

@media (max-width: 860px) {
  .nav-button {
    display: block;
    margin-left: auto;
    padding: 9px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font: 700 .82rem var(--sans);
    font-stretch: 85%;
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
  }
  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    padding: 8px var(--gutter) 20px;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
  }
  .site-nav a { padding: 14px 0; border-bottom: 1px solid var(--line); }
  .nav-toggle:checked ~ .site-nav { display: flex; }
  .lang { margin: 12px 0 0; padding: 0; border: 0; }
  .brand img { height: 44px; }

  .hero-grid, .manifesto-grid, .split, .split-photo-left, .split-photo-right, .story-grid, .product { grid-template-columns: minmax(0, 1fr); }
  .hero-text { padding-bottom: 0; }
  .hero-photo img { aspect-ratio: 4 / 3; }
  .photo-tall img { aspect-ratio: 4 / 3; }
  .story-head { position: static; }
  .story-head img { max-width: none; aspect-ratio: 16 / 10; }
  .timeline li { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .voices, .cards, .pillars, .contacts, .defs, .people { grid-template-columns: minmax(0, 1fr); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer .cols { grid-template-columns: minmax(0, 1fr); }
  .ef-top { flex-direction: column; gap: 32px; }
  .ef-cols { gap: 48px; }
  .ef-art { margin-top: 16px; }
  .wa-float span { display: none; }
  .wa-float { padding: 14px; }
}

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

/* Hero video: muted loop; a still frame replaces it when the visitor asks for less motion */
.hero-video video,
.hero-video .still { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); background: var(--cocoa); display: block; }
.hero-video .still { display: none; }
@media (max-width: 860px) {
  .hero-video video, .hero-video .still { aspect-ratio: 1 / 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-video video { display: none; }
  .hero-video .still { display: block; }
}

/* ======================================================================
   Craft layer: printed-matter details so the site feels made by hand.
   Paper grain, hand-inked rules, mounted photo prints, catalogue captions,
   a drop cap, dotted leaders in spec tables and a rubber-stamp seal.
   ====================================================================== */

:root {
  /* hand-inked rule, dark ink and light ink */
  --rule-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 6' preserveAspectRatio='none'%3E%3Cpath d='M1 3.2C60 2.1 118 4.1 182 3.1S290 2 352 3.5 470 2.4 528 3.2 590 3.6 599 2.9' fill='none' stroke='%232b140f' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");
  --rule-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 6' preserveAspectRatio='none'%3E%3Cpath d='M1 3.2C60 2.1 118 4.1 182 3.1S290 2 352 3.5 470 2.4 528 3.2 590 3.6 599 2.9' fill='none' stroke='%23eadfd1' stroke-opacity='.35' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
  --rule-faint: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 6' preserveAspectRatio='none'%3E%3Cpath d='M1 3.2C60 2.1 118 4.1 182 3.1S290 2 352 3.5 470 2.4 528 3.2 590 3.6 599 2.9' fill='none' stroke='%235c2d26' stroke-opacity='.35' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E");
  /* hand-drawn underline for links */
  --rule-vert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 600' preserveAspectRatio='none'%3E%3Cpath d='M3.2 1C2.1 60 4.1 118 3.1 182S2 290 3.5 352 2.4 470 3.2 528 3.6 590 2.9 599' fill='none' stroke='%235c2d26' stroke-opacity='.6' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
  --rule-vert-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 600' preserveAspectRatio='none'%3E%3Cpath d='M3.2 1C2.1 60 4.1 118 3.1 182S2 290 3.5 352 2.4 470 3.2 528 3.6 590 2.9 599' fill='none' stroke='%23eadfd1' stroke-opacity='.45' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
  --underline-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 8' preserveAspectRatio='none'%3E%3Cpath d='M2 5.2C40 3.4 80 6.2 120 4.4S180 3.6 198 4.8' fill='none' stroke='%23fcdd09' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  --underline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 8' preserveAspectRatio='none'%3E%3Cpath d='M2 5.2C40 3.4 80 6.2 120 4.4S180 3.6 198 4.8' fill='none' stroke='%235c2d26' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  /* paper grain */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .17 0 0 0 0 .08 0 0 0 0 .06 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Paper grain over the whole page, photos included, like ink on uncoated paper */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  background: var(--grain);
  opacity: .09;
  mix-blend-mode: multiply;
}

/* Hand-inked rules instead of ruler-straight borders */
.facts p, .voice, .defs div, .stats li, .contact, .pillars > div {
  border-top: 0;
  background: var(--rule-ink) top left / 100% 6px no-repeat;
}
.timeline li, .points li { border-top: 0; background: var(--rule-light) top left / 100% 6px no-repeat; }
.section-cream .points li, .points li:not(.section-dark *) { background-image: var(--rule-faint); }
.section-dark .points li { background-image: var(--rule-light); }
.people li, .product, .specs tr { border-top: 0; }
.people li { background: var(--rule-faint) top left / 100% 6px no-repeat; }
.product { background: var(--rule-faint) top left / 100% 6px no-repeat; }
.product:first-child { background: none; }

/* Hand-drawn underline on text links and the current page in the menu */
.text-link {
  text-decoration: none;
  background: var(--underline) left bottom / 100% 7px no-repeat;
  padding-bottom: 5px;
}
.text-link:hover { background-size: 100% 9px; }

/* Photos mounted like prints: a paper margin, a hairline and a slight hand-placed tilt */
.photo-tall, .split figure, .story-head img {
  --tilt: -0.7deg;
}
.photo-tall img, .split figure img {
  padding: 10px;
  background: var(--paper);
  border: 1px solid rgba(43, 20, 15, .18);
  transform: rotate(var(--tilt));
}
.split-photo-right figure img { --tilt: .8deg; }
.story-head img { padding: 8px; background: #f3ece2; transform: rotate(.9deg); }

/* Catalogue captions: Fig. 1, Fig. 2 ... */
main { counter-reset: fig; }
figure:has(figcaption) { counter-increment: fig; }
figcaption::before {
  content: "Fig. " counter(fig) "  ";
  font-family: var(--sans);
  font-stretch: 75%;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--pod-dark);
}
.voice figcaption::before { content: none; }
figcaption { font-family: var(--serif); font-style: italic; }
.voice figcaption { font-family: var(--sans); font-style: normal; }

/* A drop cap opens the facts paragraph, as in a printed book */
.facts p::first-letter {
  float: left;
  font-family: var(--display);
  font-weight: 700;
  font-size: 3.6em;
  line-height: .82;
  margin: .06em .1em 0 0;
  color: var(--cocoa-2);
}

/* Spec tables with dotted leaders, like an old price list */
.specs tr { display: flex; align-items: baseline; gap: 10px; padding: 7px 0; }
.specs th, .specs td { border: 0; padding: 0; }
.specs th { width: auto; flex: 1 1 auto; display: flex; align-items: baseline; gap: 10px; }
.specs th::after { content: ""; flex: 1; border-bottom: 2px dotted rgba(92, 45, 38, .45); transform: translateY(-4px); min-width: 24px; }
.specs td { flex: 0 1 auto; text-align: right; max-width: 60%; }

/* Rubber-stamp seal on the hero video */
.hero-video { position: relative; }
.stamp {
  position: absolute;
  left: -64px;
  bottom: 56px;
  width: 156px;
  height: 156px;
  transform: rotate(-11deg);
  z-index: 2;
}
.stamp text { font-family: var(--sans); font-stretch: 75%; font-weight: 700; }
.stamp .glyph { font-family: var(--display); font-stretch: 100%; font-weight: 400; }

/* Dark sections get the same grain, a little stronger */
.section-dark, .manifesto, .cta-pod { position: relative; }

@media (max-width: 860px) {
  .stamp { left: auto; right: -6px; bottom: auto; top: -36px; width: 112px; height: 112px; }
  .photo-tall img, .split figure img { padding: 7px; }
}


/* Section head with its link on the right (e.g. "Todos os produtos") */
.head-with-link {
  max-width: none;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px 40px;
  flex-wrap: wrap;
}
.head-with-link > div { max-width: 44rem; }
.head-with-link .lead { margin-bottom: 0; }


/* ======================================================================
   "Da copa à barra": the bean's path, step by step.
   A hand-inked line with a marker per step runs across five photos.
   Each photo carries an ink stamp with that step's proof of control.
   Desktop: the hovered or focused step opens wide and shows its text;
   the first step is open by default. Phones and tablets scroll sideways
   with everything visible.
   ====================================================================== */

.process { list-style: none; margin: 0; padding: 0; display: flex; }
.step { position: relative; flex: 1 1 0; min-width: 0; padding-right: 16px; outline: none; }
.step:last-child { padding-right: 0; }

/* the path: number, ink dot, hand-drawn line to the next step */
.step-mark { display: flex; align-items: center; gap: 10px; height: 28px; margin-bottom: 16px; }
.step-no {
  font: 700 .95rem/1 var(--sans);
  font-stretch: 72%;
  letter-spacing: .05em;
  color: var(--cocoa-2);
}
.step-mark::before {
  content: "";
  order: -1;
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1.6px solid var(--cocoa);
  background: var(--paper);
  transition: background-color .3s ease;
}
.step-mark::after {
  content: "";
  flex: 1;
  height: 6px;
  margin-right: -16px;
  background: var(--rule-ink) left center / 100% 6px no-repeat;
}
.step:last-child .step-mark::after { margin-right: 0; opacity: 0; }

/* the photo and its proof stamp */
.step-photo { position: relative; margin: 0; overflow: hidden; border-radius: var(--radius); background: var(--cocoa); }
.step-photo img {
  width: 100%;
  height: clamp(280px, 25vw, 380px);
  object-fit: cover;
  transition: transform .7s cubic-bezier(.16, 1, .3, 1), filter .4s ease;
}
.proof {
  position: absolute;
  left: 12px;
  bottom: 14px;
  max-width: calc(100% - 24px);
  padding: 6px 10px 5px;
  background: var(--paper);
  color: var(--cocoa);
  border: 1.6px solid var(--cocoa);
  font: 700 .8rem/1.1 var(--sans);
  font-stretch: 75%;
  letter-spacing: .06em;
  text-wrap: balance;    /* capitals are typed in the HTML: text-transform would turn µm into MM */
  transform: rotate(-2.5deg);
  transform-origin: left bottom;
}

/* the words */
.step-text { padding-top: 18px; }
.step-text h3 { font-family: var(--display); font-weight: 600; font-size: clamp(1.15rem, 1.4vw, 1.4rem); line-height: 1.12; margin: 0 0 .35em; }
.step-text p { font-size: .98rem; line-height: 1.55; color: var(--muted); margin: 0; max-width: 32ch; }
.step-out {
  display: inline-block;
  margin-top: 14px;
  font: 700 .82rem/1 var(--sans);
  font-stretch: 85%;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--cocoa-2);
  text-decoration: none;
  background: var(--underline) left bottom / 100% 6px no-repeat;
  padding-bottom: 6px;
}
.step-out::after { content: " →"; }
.step-out::before { content: ""; position: absolute; inset: 0; }   /* whole step is the link */
.step:has(.step-out) { cursor: pointer; }
.step-out:focus-visible, .step:focus-visible { outline: 3px solid var(--pod-dark); outline-offset: 4px; }

.process-note {
  margin: clamp(36px, 4vw, 52px) 0 0;
  padding-top: 22px;
  max-width: 48rem;
  font-family: var(--serif);
  font-size: 1.12rem;
  line-height: 1.5;
  color: var(--cocoa-2);
  background: var(--rule-faint) top left / 100% 6px no-repeat;
}

/* Desktop with a mouse: one step open at a time */
@media (min-width: 1081px) and (hover: hover) {
  .step { transition: flex-grow .55s cubic-bezier(.16, 1, .3, 1); }
  .step-text { height: 12rem; overflow: hidden; }
  .step-text p, .step-out { opacity: 0; transition: opacity .25s ease; }

  .process:not(:hover):not(:focus-within) .step:first-child,
  .step:hover,
  .step:focus-within { flex-grow: 2.6; }

  .process:not(:hover):not(:focus-within) .step:first-child .step-text :is(p, .step-out),
  .step:hover .step-text :is(p, .step-out),
  .step:focus-within .step-text :is(p, .step-out) { opacity: 1; transition-delay: .18s; }

  .process:not(:hover):not(:focus-within) .step:first-child .step-mark::before,
  .step:hover .step-mark::before,
  .step:focus-within .step-mark::before { background: var(--pod); }

  .step:hover .step-photo img,
  .step:focus-within .step-photo img { transform: scale(1.04); }
  .process:is(:hover, :focus-within) .step:not(:hover):not(:focus-within) .step-photo img { filter: saturate(.7) brightness(.95); }
}

/* Phones and tablets: sideways scroll, everything visible */
@media (max-width: 1080px), (hover: none) {
  .process {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(250px, 40%);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 14px;
    margin-right: calc(var(--gutter) * -1);
    padding-right: var(--gutter);
    scrollbar-color: var(--cocoa-2) transparent;
  }
  .step { scroll-snap-align: start; }
  .step:last-child { padding-right: 16px; }
  .step-photo img { height: 320px; }
}
@media (max-width: 600px) {
  .process { grid-auto-columns: 78%; }
}

/* Browser surfaces in the brand's colours */
::selection { background: var(--pod); color: var(--cocoa); }
html { accent-color: var(--cocoa-2); }

/* Menu: a thinner hand-drawn underline under the word only; padding never changes, so nothing jumps */
.site-nav a[aria-current="page"],
.site-nav a:hover {
  text-decoration: none;
  background: var(--underline) 12px calc(100% - 4px) / calc(100% - 24px) 4px no-repeat;
}

/* Hero video never taller than the first screen allows */
.hero-video video, .hero-video .still { max-height: calc(100svh - 64px - clamp(64px, 10vh, 136px)); }

/* ======================================================================
   "Na imprensa": three real headlines as newspaper clippings, oldest to
   newest. Torn edges (mask), newsprint that yellows with age, a slight
   hand-placed tilt and a strip of tape. Each clipping opens the article.
   ====================================================================== */
/* its own band in kraft paper, like a board the clippings are taped to */
.press { background: var(--kraft); color: var(--cocoa); }
.press h2 { margin: 0 0 clamp(32px, 5vh, 56px); }
.clips {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1fr) minmax(0, 1.3fr);
  gap: clamp(24px, 3.2vw, 52px);
  align-items: start;
}
.clip {
  --tilt: 0deg;
  position: relative;
  display: block;
  color: var(--ink);
  text-decoration: none;
  transform: rotate(var(--tilt));
  /* a hairline at the torn edge */
  filter: drop-shadow(0 0 .6px rgba(43, 20, 15, .55));
  transition: transform .45s cubic-bezier(.16, 1, .3, 1);
}
/* a strip of paper tape holding the clipping to the page */
.clip::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: -9px;
  left: var(--tape-x, 38%);
  width: 76px;
  height: 22px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 76 22' preserveAspectRatio='none'%3E%3Cpath d='M3 1 L73 0 L75.5 4 L73 8 L76 12 L73.5 16 L75 21 L2 22 L0 18 L3 14 L0.5 10 L2.5 6 Z' fill='%23f1e8d0' fill-opacity='.72'/%3E%3C/svg%3E") center / 100% 100% no-repeat;   /* torn at both ends */
  transform: rotate(var(--tape-tilt, -3deg));
}
.clip:hover, .clip:focus-visible { transform: rotate(0deg) translateY(-4px); }
.clip:focus-visible { outline: 3px solid var(--cocoa); outline-offset: 8px; }
.clip--2021 { --tilt: -1.8deg; --news: #e6d2a3; --tape-x: 30%; --tape-tilt: 4deg; margin-top: clamp(16px, 5vh, 56px); }
.clip--2025a { --tilt: 1.1deg; --news: #ede2c6; --tape-x: 54%; --tape-tilt: -2deg; }
.clip--2025b { --tilt: -.7deg; --news: #f1eee4; --tape-x: 12%; --tape-tilt: -4deg; margin-top: clamp(8px, 2.5vh, 28px); }

.clip-paper {
  background: var(--news);
  padding: 28px clamp(18px, 2vw, 28px) 24px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 12' preserveAspectRatio='none'%3E%3Cpath d='M0 12 L0 6 L4.9 2.9 L11.8 2.2 L18.1 4.8 L21.4 6.1 L24.6 5.4 L28.1 2.3 L33.6 8.9 L37.3 3.5 L44.1 10.0 L50.6 5.1 L59.4 1.9 L67.6 4.1 L71.4 2.6 L76.3 8.8 L80.4 6.7 L87.2 4.9 L93.5 2.1 L96.9 3.4 L103.9 5.3 L108.8 6.8 L114.5 4.2 L122.3 7.8 L126.8 6.7 L132.9 9.4 L140.3 4.1 L149.2 2.6 L154.7 8.3 L160 6 L160 12 Z'/%3E%3C/svg%3E") top left / 160px 12px repeat-x,
    linear-gradient(#000 0 0) center / 100% calc(100% - 20px) no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 12' preserveAspectRatio='none'%3E%3Cpath d='M0 0 L0 6 L3.9 5.9 L7.1 7.5 L14.7 6.7 L23.0 4.3 L30.2 6.8 L36.6 5.6 L44.7 10.0 L50.5 7.5 L53.9 7.8 L60.8 10.4 L68.7 4.1 L74.0 7.5 L77.2 5.7 L81.2 2.6 L84.5 8.4 L88.3 3.7 L93.6 9.3 L97.1 5.5 L103.4 9.5 L111.3 9.3 L116.0 5.2 L121.2 9.5 L129.9 2.9 L134.0 3.6 L138.4 5.9 L144.9 3.9 L147.9 5.3 L153.1 6.6 L160 6 L160 0 Z'/%3E%3C/svg%3E") bottom left / 160px 12px repeat-x;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 12' preserveAspectRatio='none'%3E%3Cpath d='M0 12 L0 6 L4.9 2.9 L11.8 2.2 L18.1 4.8 L21.4 6.1 L24.6 5.4 L28.1 2.3 L33.6 8.9 L37.3 3.5 L44.1 10.0 L50.6 5.1 L59.4 1.9 L67.6 4.1 L71.4 2.6 L76.3 8.8 L80.4 6.7 L87.2 4.9 L93.5 2.1 L96.9 3.4 L103.9 5.3 L108.8 6.8 L114.5 4.2 L122.3 7.8 L126.8 6.7 L132.9 9.4 L140.3 4.1 L149.2 2.6 L154.7 8.3 L160 6 L160 12 Z'/%3E%3C/svg%3E") top left / 160px 12px repeat-x,
    linear-gradient(#000 0 0) center / 100% calc(100% - 20px) no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 12' preserveAspectRatio='none'%3E%3Cpath d='M0 0 L0 6 L3.9 5.9 L7.1 7.5 L14.7 6.7 L23.0 4.3 L30.2 6.8 L36.6 5.6 L44.7 10.0 L50.5 7.5 L53.9 7.8 L60.8 10.4 L68.7 4.1 L74.0 7.5 L77.2 5.7 L81.2 2.6 L84.5 8.4 L88.3 3.7 L93.6 9.3 L97.1 5.5 L103.4 9.5 L111.3 9.3 L116.0 5.2 L121.2 9.5 L129.9 2.9 L134.0 3.6 L138.4 5.9 L144.9 3.9 L147.9 5.3 L153.1 6.6 L160 6 L160 0 Z'/%3E%3C/svg%3E") bottom left / 160px 12px repeat-x;
}
.clip-head {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.01em;
  text-wrap: balance;
  margin: 0 0 .5em;
}
/* double column rule, as on a newspaper page */
.clip-head::before {
  content: "";
  display: block;
  height: 4px;
  margin-bottom: 14px;
  border-top: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  opacity: .5;
}
.clip--2021 .clip-head { font-size: 1.12rem; }
.clip--2025a .clip-head { font-size: 1.3rem; }
.clip--2025b .clip-head { font-size: clamp(1.45rem, 2.1vw, 2rem); }
.clip-lead { font-family: var(--serif); font-size: .96rem; line-height: 1.45; color: var(--cocoa-2); margin: 0; }
.clip-source {
  display: flex;
  justify-content: space-between;
  gap: 6px 14px;
  flex-wrap: wrap;
  margin: 16px 0 0;
  padding-top: 12px;
  font: 700 .74rem/1.3 var(--sans);
  font-stretch: 75%;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cocoa-2);
  background: var(--rule-faint) top left / 100% 6px no-repeat;
}
.clip-more { background: var(--underline) left bottom / 100% 5px no-repeat; padding-bottom: 4px; white-space: nowrap; }
.clip-more::after { content: " ↗"; }

@media (max-width: 860px) {
  .clips { grid-template-columns: minmax(0, 1fr); gap: 36px; max-width: 560px; }
  .clip--2021, .clip--2025b { margin-top: 0; }
  .clip--2021 { --tilt: -1deg; }
  .clip--2025a { --tilt: .8deg; }
  .clip--2025b { --tilt: -.5deg; }
  .clip--2025b .clip-head { font-size: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .clip { transition: none; }
  .clip:hover, .clip:focus-visible { transform: rotate(var(--tilt)); }
}

/* ======================================================================
   Home: each section fills one screen and fits inside it.
   Only on screens wide and tall enough (laptops, desktops, landscape
   tablets); phones keep natural heights. Photos are capped by the screen
   height so a section never runs past the fold. The timeline is longer
   than a screen by design, and the closing call shares the last screen
   with the engraved footer, so neither is stretched.
   ====================================================================== */
@media (min-width: 861px) and (min-height: 560px) {
  :root {
    --screen: calc(100svh - 65px);                 /* below the sticky header */
    --fit-pad: clamp(40px, 8svh, 104px);
    --hero-pad: clamp(20px, 4svh, 48px);
  }
  main.fit > section:not(.cta-pod, :last-child) {
    min-height: var(--screen);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  main.fit > section:not(.hero, .cta-pod, :last-child) { padding-block: var(--fit-pad); }
  main.fit > section > .wrap { width: 100%; }

  /* photos: the screen minus the section padding, the print mount and the caption */
  main.fit .photo-tall img { max-height: calc(var(--screen) - 2 * var(--fit-pad) - 8px); }
  main.fit .split figure img { max-height: calc(var(--screen) - 2 * var(--fit-pad) - 64px); }
  main.fit > .hero { padding-block: var(--hero-pad); }
  main.fit .hero-photo:not(.hero-video) img { max-height: calc(var(--screen) - 2 * var(--hero-pad)); }
  main.fit .hero-video :is(video, .still) { max-height: calc(var(--screen) - 2 * var(--hero-pad) - 36px); }

  /* "Da copa à barra": tighter spacing, and the photos take whatever height is left */
  main.fit > .process-section { padding-block: clamp(32px, 6svh, 88px); }
  main.fit .process-section .section-head { margin-bottom: clamp(24px, 4svh, 56px); }
  main.fit .step-mark { margin-bottom: 12px; }
  main.fit .step-photo img { height: clamp(150px, calc(var(--screen) * .8 - 460px), 380px); }
  main.fit .process-note { margin-top: clamp(20px, 3svh, 44px); max-width: none; }
}

/* ======================================================================
   Inner pages, brought up to the home page.
   ====================================================================== */

/* Products: the index reads like a catalogue's contents */
.product-nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 clamp(20px, 3vw, 40px);
  margin-top: 32px;
  max-width: 58rem;
  counter-reset: cat;
}
.product-nav a {
  counter-increment: cat;
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 12px 0 10px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  background: var(--rule-faint) top left / 100% 6px no-repeat;
}
.product-nav a::before {
  content: counter(cat, decimal-leading-zero);
  font: 700 .9rem/1 var(--sans);
  font-stretch: 72%;
  letter-spacing: .05em;
  color: var(--pod-dark);
}
.product-nav a:hover { color: var(--cocoa-2); background-image: var(--rule-ink); }

/* products alternate sides, each photo carries its proof stamp, like the steps on the home page */
.product:nth-child(even) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.product:nth-child(even) > .shot { order: 2; }
.shot { position: relative; transform: rotate(var(--tilt, -.6deg)); }
.product:nth-child(even) .shot { --tilt: .7deg; }
.product .specs tr:first-child td { font-weight: 700; color: var(--cocoa-2); }

/* Cooperative: mission, values and goal set like a printed charter, one row each */
.defs { grid-template-columns: minmax(0, 1fr); gap: 0; max-width: 64rem; }
.defs div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); gap: 12px clamp(24px, 4vw, 64px); padding: 28px 0; }
.defs dt { font-size: clamp(1.6rem, 2.4vw, 2.1rem); margin: 0; }
.defs dd { font-family: var(--serif); font-size: clamp(1.08rem, 1.3vw, 1.22rem); line-height: 1.5; color: var(--cocoa-2); }

/* Contact: a directory, name and number led to the WhatsApp link by dots */
.people .name { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.people .name::after { content: ""; flex: 1; min-width: 24px; border-bottom: 2px dotted rgba(92, 45, 38, .4); transform: translateY(-4px); }
.people li { column-gap: 10px; }
.people h3 { font-family: var(--display); font-weight: 600; font-size: 1.3rem; }

/* compact page heads (products, contact): a hand-inked rule instead of a ruler line */
.page-hero { border-bottom: 0; background: var(--cream) var(--rule-faint) left bottom / 100% 6px repeat-x; }

@media (max-width: 860px) {
  .product-nav { grid-template-columns: minmax(0, 1fr); }
  .product:nth-child(even) { grid-template-columns: minmax(0, 1fr); }
  .product:nth-child(even) > .shot { order: 0; }
  .defs div { grid-template-columns: minmax(0, 1fr); }
  .people .name { display: block; }
  .people .name::after { content: none; }
}

/* links that leave the site point up and out */
.text-link.ext::after { content: " ↗"; }

/* Home: the products come right after the hero, on cream so they read apart from it */
.process-section { background: var(--cream); }

/* ======================================================================
   Origin and cooperative, second pass: fuller screens, fewer repeated
   photo-and-text splits. Hand-inked plumb lines, mounted prints and the
   condensed caps of the rest of the site.
   ====================================================================== */

/* Hero: the photo bleeds to the right edge, top to bottom */
.hero-bleed { padding: 0; }
.hero-bleed > .hero-grid {
  max-width: none;
  padding: 0;
  gap: 0;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  min-height: clamp(480px, 72vh, 860px);
}
.hero-bleed .hero-text {
  align-self: center;
  padding: clamp(48px, 9vh, 112px) clamp(32px, 5vw, 88px) clamp(48px, 9vh, 112px) max(var(--gutter), calc(50vw - var(--wrap) / 2 + var(--gutter)));
}
.hero-bleed .hero-photo { position: relative; margin: 0; }
.hero-bleed .hero-photo img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; border-radius: 0; }
main.fit > .hero-bleed { padding-block: 0; }
main.fit > .hero-bleed > .wrap { flex: 1; }
main.fit .hero-bleed .hero-photo img { max-height: none; }

/* a plumb line with ring markers, shared by the cabruca layers and the data flow */
.strata, .flow { --rail: clamp(30px, 4vw, 56px); list-style: none; margin: 0; padding: 0 0 0 var(--rail); position: relative; }
.strata::before, .flow::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 14px;
  bottom: 14px;
  width: 6px;
  background: var(--rule-vert) center top / 6px 100% no-repeat;
}
.stratum h3, .flow h3 { position: relative; }
.stratum h3::before, .flow h3::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--rail));
  top: 50%;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  border-radius: 50%;
  border: 1.6px solid var(--cocoa);
  background: var(--paper);
}

/* Origin: the cabruca system, then down from the canopy to the pod */
.cabruca-system { background: var(--cream); }
.intro-pair {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: end;
  margin-bottom: clamp(48px, 7vw, 96px);
}
.intro-pair .lead, .intro-pair .prose p:last-child { margin-bottom: 0; }
.stratum {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  grid-template-areas: "head head" "photo text";
  column-gap: clamp(28px, 4vw, 64px);
  padding-bottom: clamp(48px, 6vw, 88px);
}
.stratum:last-child { padding-bottom: 0; }
.stratum h3 { grid-area: head; font-family: var(--display); font-weight: 600; font-size: clamp(1.6rem, 2.4vw, 2.2rem); line-height: 1.1; margin: 0 0 20px; }
.stratum:last-child h3::before { background: var(--pod); }
.stratum-photo { grid-area: photo; margin: 0; --tilt: -.5deg; }
.stratum:nth-child(2) .stratum-photo { --tilt: .6deg; }
.stratum-photo img {
  width: 100%;
  object-fit: cover;
  padding: 10px;
  background: var(--paper);
  border: 1px solid rgba(43, 20, 15, .18);
  transform: rotate(var(--tilt));
}
/* each layer is a closer look than the one above it */
.stratum:nth-child(1) .stratum-photo img { aspect-ratio: 21 / 9; }
.stratum:nth-child(2) .stratum-photo img { aspect-ratio: 16 / 10; object-position: 50% 60%; }
.stratum:nth-child(3) .stratum-photo img { aspect-ratio: 4 / 3; object-position: 50% 55%; }
.stratum-text { grid-area: text; align-self: center; }
.stratum-text > p:first-child { font-family: var(--serif); font-size: clamp(1.1rem, 1.35vw, 1.25rem); line-height: 1.45; color: var(--cocoa-2); margin: 0; }
.stratum-text .text-link { margin-top: 8px; }
/* a field-guide register: common name, scientific name below it */
.species { list-style: none; margin: 22px 0 0; padding: 0; }
.species li { padding: 11px 0 10px; background: var(--rule-faint) top left / 100% 6px no-repeat; }
.sp-name { display: block; font-weight: 600; color: var(--ink); }
.sp-sci { display: block; font-family: var(--serif); font-style: italic; color: var(--muted); }
.sp-note {
  display: inline-block;
  margin-top: 8px;
  padding: 4px 8px 3px;
  border: 1.5px solid var(--cocoa-2);
  font: 700 .72rem/1 var(--sans);
  font-stretch: 75%;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--cocoa-2);
  transform: rotate(-2deg);
}

/* Origin: quality, with the dried beans filling the left column */
.quality-photo { margin: clamp(24px, 4vh, 40px) 0 0; max-width: 460px; }
.quality-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; padding: 8px; background: #f3ece2; transform: rotate(-.9deg); }
.section-dark figcaption { color: var(--on-dark-muted); }
main.fit .quality-photo img { max-height: calc(var(--screen) - 2 * var(--fit-pad) - 230px); }

/* Origin: traceability as a data flow, and the distance it travels */
.trace-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.flow li { padding: 0 0 clamp(26px, 4vh, 40px); }
.flow li:last-child { padding-bottom: 0; }
.flow li:last-child h3::before { background: var(--pod); }
.flow h3 { font-family: var(--display); font-weight: 600; font-size: clamp(1.35rem, 1.8vw, 1.6rem); line-height: 1.15; margin: 0 0 .3em; }
.flow p { margin: 0; color: var(--muted); max-width: 42ch; }
/* the distance as a rubber stamp, like the marks on export sacks and shipping papers:
   double border, a little crooked, ink that did not take everywhere */
.ship-stamp {
  position: relative;
  display: inline-grid;
  justify-items: start;
  gap: 2px;
  margin: clamp(36px, 6vh, 56px) 0 0;
  padding: 14px 20px 12px;
  border: 2.5px solid var(--cocoa-2);
  outline: 1px solid var(--cocoa-2);
  outline-offset: 3px;
  color: var(--cocoa-2);
  transform: rotate(-2.2deg);
  transform-origin: left center;
}
.ship-stamp::after { content: ""; position: absolute; inset: -6px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='2' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .99 0 0 0 0 .98 0 0 0 0 .96 -20 0 0 0 7.6'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E") 0 0 / 220px 220px; pointer-events: none; }
.ship-route, .ship-note { font: 700 .78rem/1.25 var(--sans); font-stretch: 75%; letter-spacing: .1em; text-transform: uppercase; }
.ship-km { font: 800 clamp(2.4rem, 3.6vw, 3.2rem)/1 var(--sans); font-stretch: 68%; letter-spacing: .01em; text-transform: uppercase; margin: 2px 0; }
.ship-note { font-weight: 600; opacity: .85; }
.route-km { grid-area: km; justify-self: center; margin-top: -6px; font-family: var(--serif); font-style: italic; color: var(--muted); }

/* Cooperative: the story beside a photo that stays put while you read */
.story-layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(36px, 6vw, 96px); align-items: start; }
.story-photo { position: sticky; top: calc(65px + clamp(24px, 4vh, 48px)); margin: 0; }
.story-photo img {
  width: 100%;
  height: calc(100svh - 65px - 2 * clamp(24px, 4vh, 48px));
  max-height: 860px;
  object-fit: cover;
  padding: 10px;
  background: var(--paper);
  border: 1px solid rgba(43, 20, 15, .18);
  transform: rotate(-.7deg);
}
.story-body .lead { margin-bottom: 0; }
.pull {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.6rem, 2.5vw, 2.25rem);
  line-height: 1.15;
  letter-spacing: -.012em;
  color: var(--cocoa);
  max-width: 22em;
  margin: clamp(28px, 4vh, 44px) 0;
  padding-top: 22px;
  background: var(--rule-ink) top left / 100% 6px no-repeat;
}
.charter { margin-top: clamp(40px, 6vh, 72px); }
.charter div { grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); }

/* Cooperative: the shipping log and the partners behind it, on forest green */
.exports { background: var(--forest); color: var(--on-dark); }
.exports h2, .exports h3, .exports dt { color: var(--paper); }
.exports .lead { color: #c9d4c4; }
.exports .text-link { color: var(--paper); background-image: var(--underline-light); }
.exports .text-link:hover { color: var(--pod); }
.exports-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 96px); align-items: end; margin-bottom: clamp(40px, 6vh, 64px); }
.exports-head h2 { margin: 0; }
.exports-head .lead { margin-bottom: 16px; }
.exports-head p:last-child { margin-bottom: 0; }
.ledger { list-style: none; margin: 0; padding: 0; }
.ledger li {
  display: grid;
  grid-template-columns: minmax(7.5rem, 1.1fr) minmax(0, 5fr) minmax(0, 2.6fr);
  gap: 6px clamp(20px, 3vw, 48px);
  align-items: baseline;
  padding: 24px 0;
  background: var(--rule-light) top left / 100% 6px no-repeat;
}
.ledger li:last-child { background: var(--rule-light) top left / 100% 6px no-repeat, var(--rule-light) bottom left / 100% 6px no-repeat; }
.ledger time { font: 700 .95rem/1.2 var(--sans); font-stretch: 75%; letter-spacing: .06em; text-transform: uppercase; color: var(--pod); }
.ledger h3 { font-family: var(--display); font-weight: 600; font-size: clamp(1.35rem, 1.9vw, 1.7rem); line-height: 1.15; margin: 0 0 .3em; }
.ledger-what p { margin: 0; color: #c9d4c4; max-width: 54ch; }
.ledger-src { margin: 0; justify-self: end; text-align: right; font-size: .88rem; }
.partner-block { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.6fr); gap: 16px clamp(24px, 4vw, 64px); margin-top: clamp(56px, 8vh, 96px); }
.partner-title { font-family: var(--display); font-weight: 600; font-size: clamp(1.5rem, 2.2vw, 1.9rem); line-height: 1.1; margin: 0; }
.partner-list { margin: 0; }
.partner-list div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); gap: 6px clamp(20px, 3vw, 48px); padding: 18px 0; background: var(--rule-light) top left / 100% 6px no-repeat; }
.partner-list dt { font-family: var(--display); font-weight: 600; font-size: 1.25rem; line-height: 1.2; }
.partner-list dd { margin: 0; color: #c9d4c4; }
.partner-list dd p { margin: 0; }
.partner-list dd p + p { margin-top: 10px; }
.partner-list .text-link { font-size: .9rem; }

@media (max-width: 860px) {
  .hero-bleed > .hero-grid { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .hero-bleed .hero-text { padding: 40px var(--gutter) 32px; }
  .hero-bleed .hero-photo { aspect-ratio: 4 / 3; }
  .intro-pair, .trace-grid, .story-layout, .exports-head, .partner-block { grid-template-columns: minmax(0, 1fr); }
  .stratum { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "photo" "text"; }
  .stratum-text { margin-top: 20px; }
  .stratum:nth-child(1) .stratum-photo img { aspect-ratio: 16 / 9; }
  .story-photo { position: static; }
  .story-photo img { height: auto; aspect-ratio: 4 / 3; }
  .ledger li, .partner-list div { grid-template-columns: minmax(0, 1fr); }
  .ledger-src { justify-self: start; text-align: left; }
}

/* Origin and cooperative: the section after the photo hero starts with a torn
   paper edge laid over the bottom of the photo, instead of a straight cut.
   ::after is the paler fibre rim a real tear shows, 3px above the sheet. */
.hero-bleed + section { position: relative; }
.hero-bleed + section::before,
.hero-bleed + section::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 44px;
  pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 560 44' preserveAspectRatio='none'%3E%3Cpath d='M0 44 L0 22.0 L8.5 26.1 L16.8 22.3 L23.2 21.6 L29.1 18.2 L32.9 17.7 L36.8 17.3 L39.5 13.5 L46.6 12.7 L52.4 14.9 L57.2 10.8 L64.8 11.6 L71.6 12.8 L80.4 11.5 L87.8 10.3 L94.1 11.8 L98.6 7.9 L104.2 10.0 L110.5 9.5 L117.2 6.5 L120.9 5 L128.7 5 L131.9 5 L134.7 5 L140.9 8.0 L145.5 6.8 L149.9 5 L157.5 5.5 L161.6 5 L169.2 6.9 L177.1 5 L183.2 8.9 L189.5 13.0 L193.1 17.3 L196.0 16.6 L198.6 19.4 L205.6 23.8 L213.3 27.9 L219.3 32.4 L226.7 31.0 L235.5 29.8 L239.3 25.9 L244.8 23.1 L253.4 27.3 L257.3 23.6 L263.2 20.6 L269.3 23.5 L273.4 22.8 L281.8 22.2 L286.5 25.9 L294.3 29.5 L301.2 28.7 L308.3 31.7 L314.9 29.3 L319.3 28.5 L326.8 29.0 L332.9 32.0 L336.1 33.2 L340.8 33.8 L348.7 31.4 L357.4 27.6 L363.6 28.0 L367.6 28.5 L373.1 28.1 L380.3 23.5 L385.3 26.1 L388.7 29.5 L392.5 31.2 L396.1 30.7 L401.4 26.8 L408.4 26.7 L415.4 27.0 L421.5 27.3 L426.0 30.9 L429.0 34.4 L437.1 34.4 L444.7 36.0 L451.1 34.1 L455.7 32.7 L460.2 36.9 L464.9 35.9 L470.1 38.8 L475.7 39.3 L479.9 37.2 L482.9 34.6 L487.2 37.9 L492.9 34.3 L498.4 30.8 L504.6 30.3 L512.7 28.1 L520.7 25.7 L529.6 27.0 L532.4 29.8 L536.7 28.5 L540.1 31.6 L543.2 33.8 L548.3 35.5 L560 22.0 L560 44 Z'/%3E%3C/svg%3E") left top / 560px 44px repeat-x;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 560 44' preserveAspectRatio='none'%3E%3Cpath d='M0 44 L0 22.0 L8.5 26.1 L16.8 22.3 L23.2 21.6 L29.1 18.2 L32.9 17.7 L36.8 17.3 L39.5 13.5 L46.6 12.7 L52.4 14.9 L57.2 10.8 L64.8 11.6 L71.6 12.8 L80.4 11.5 L87.8 10.3 L94.1 11.8 L98.6 7.9 L104.2 10.0 L110.5 9.5 L117.2 6.5 L120.9 5 L128.7 5 L131.9 5 L134.7 5 L140.9 8.0 L145.5 6.8 L149.9 5 L157.5 5.5 L161.6 5 L169.2 6.9 L177.1 5 L183.2 8.9 L189.5 13.0 L193.1 17.3 L196.0 16.6 L198.6 19.4 L205.6 23.8 L213.3 27.9 L219.3 32.4 L226.7 31.0 L235.5 29.8 L239.3 25.9 L244.8 23.1 L253.4 27.3 L257.3 23.6 L263.2 20.6 L269.3 23.5 L273.4 22.8 L281.8 22.2 L286.5 25.9 L294.3 29.5 L301.2 28.7 L308.3 31.7 L314.9 29.3 L319.3 28.5 L326.8 29.0 L332.9 32.0 L336.1 33.2 L340.8 33.8 L348.7 31.4 L357.4 27.6 L363.6 28.0 L367.6 28.5 L373.1 28.1 L380.3 23.5 L385.3 26.1 L388.7 29.5 L392.5 31.2 L396.1 30.7 L401.4 26.8 L408.4 26.7 L415.4 27.0 L421.5 27.3 L426.0 30.9 L429.0 34.4 L437.1 34.4 L444.7 36.0 L451.1 34.1 L455.7 32.7 L460.2 36.9 L464.9 35.9 L470.1 38.8 L475.7 39.3 L479.9 37.2 L482.9 34.6 L487.2 37.9 L492.9 34.3 L498.4 30.8 L504.6 30.3 L512.7 28.1 L520.7 25.7 L529.6 27.0 L532.4 29.8 L536.7 28.5 L540.1 31.6 L543.2 33.8 L548.3 35.5 L560 22.0 L560 44 Z'/%3E%3C/svg%3E") left top / 560px 44px repeat-x;
}
.hero-bleed + section::before { z-index: 2; top: -42px; background: inherit; }
.hero-bleed + section::after { z-index: 1; top: -45px; background: #fffcf6; }

/* The hero photo printed on paper: less digital saturation and a little warmth,
   then grain pressed in. --print-grain is grey noise used in overlay, so it shows
   on dark greens as well as on mist; --print-mottle is the uneven ink of a print. */
:root {
  --print-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --print-mottle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E");
}
.hero-bleed .hero-photo img { filter: saturate(.84) contrast(1.06) sepia(.12); }
.hero-bleed .hero-photo::before,
.hero-bleed .hero-photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.hero-bleed .hero-photo::before { background: var(--print-mottle) 0 0 / 600px 600px; mix-blend-mode: soft-light; opacity: .35; z-index: 1; }
.hero-bleed .hero-photo::after { background: var(--print-grain) 0 0 / 300px 300px; mix-blend-mode: overlay; opacity: .42; z-index: 1; }

/* Cooperative: partners in their own section, on paper after the green shipping log */
.partners .partner-block { margin-top: 0; }
.partners .partner-title { font-size: clamp(1.8rem, 3.1vw, 2.7rem); font-weight: 700; color: var(--ink); }
.partners .partner-list div { background-image: var(--rule-ink); }
.partners .partner-list dt { color: var(--ink); }
.partners .partner-list dd { color: var(--cocoa-2); font-family: var(--serif); font-size: 1.08rem; line-height: 1.5; }
.partners .partner-list .text-link { font-family: var(--sans); }

/* Origin and cooperative: the section after the photo hero sits on a deeper sand,
   so it separates clearly from the paper hero (the torn edge inherits it) */
.cabruca-system, .story { background: var(--cocoa-2); color: var(--on-dark); }

/* ...in the logo brown: everything inside switches to its light version */
.cabruca-system :is(h2, h3, .sp-name, .pull, dt),
.story :is(h2, h3, .pull, dt) { color: var(--paper); }
.cabruca-system :is(.lead, p, .sp-sci),
.story :is(.lead, p, dd) { color: var(--on-dark-muted); }
.cabruca-system .stratum-text > p:first-child { color: var(--on-dark); }
.cabruca-system figcaption, .story figcaption { color: var(--on-dark-muted); }
.cabruca-system figcaption::before, .story figcaption::before { color: var(--pod); }
.cabruca-system .text-link, .story .text-link { color: var(--paper); background-image: var(--underline-light); }
.cabruca-system .text-link:hover, .story .text-link:hover { color: var(--pod); }
.cabruca-system .species li { background-image: var(--rule-light); }
.cabruca-system .sp-note { border-color: var(--pod); color: var(--pod); }
.cabruca-system .strata::before { background-image: var(--rule-vert-light); }
.cabruca-system .stratum h3::before { border-color: var(--paper); background: var(--cocoa-2); }
.cabruca-system .stratum:last-child h3::before { background: var(--pod); border-color: var(--pod); }
.story .pull, .story .charter div { background-image: var(--rule-light); }
/* origin: the quality section that follows moves to forest green, so two browns do not merge */
.cabruca-system + .section-dark { background: var(--forest); }

/* Contact: the last section closes on pod yellow, as on the other pages, apart from the cream footer */
.section-pod { background: var(--pod); color: var(--cocoa); }
.section-pod .people .name { color: var(--cocoa-2); }

/* Origin and cooperative, finishing the photo hero:
   1. no hairline under the header: it only drew a line across the photo */
body:has(.hero-bleed) .site-header { border-bottom-color: transparent; }
/*    the forest photo framed lower, so canopy (not flat mist) meets the header */
.hero-bleed .hero-photo img[src*="floresta-neblina"] { object-position: 50% 88%; }
/* 2. the photo's left edge torn like its bottom, so every visible edge is paper */
@media (min-width: 861px) {
  .hero-bleed .hero-photo {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 560' preserveAspectRatio='none'%3E%3Cpath d='M30 0 L15.0 0 L13.2 5.0 L16.0 8.6 L17.3 14.8 L16.5 20.9 L17.0 28.2 L18.1 35.7 L17.7 43.7 L15.3 47.2 L13.0 54.4 L13.9 61.2 L15.8 64.0 L18.3 66.8 L16.4 74.7 L17.9 81.9 L19.1 85.3 L21.9 88.6 L25.2 95.5 L23.9 98.4 L24.7 104.9 L26 108.6 L24.6 116.6 L25.8 120.1 L26 125.2 L25.3 130.9 L22.8 133.5 L24.4 139.0 L26 144.3 L26 150.3 L24.8 157.1 L21.8 160.5 L24.3 163.2 L26 171.4 L26 174.6 L26 177.9 L26 184.7 L25.4 191.2 L26 199.2 L25.6 203.3 L26 210.5 L25.7 215.7 L24.1 224.5 L25.4 228.4 L26 232.7 L26 237.3 L26 242.2 L26 249.6 L23.7 253.5 L21.5 256.2 L18.6 263.0 L19.0 267.1 L17.9 270.6 L19.1 274.6 L22.5 277.9 L23.9 284.2 L23.9 290.3 L26 299.1 L22.8 307.0 L25.8 313.3 L25.9 320.0 L23.7 326.7 L25.6 333.9 L25.7 336.9 L24.7 343.3 L26 350.2 L24.7 358.6 L26 362.1 L26 368.5 L24.5 376.7 L23.2 383.0 L24.5 390.7 L24.5 394.7 L22.7 401.1 L22.5 404.8 L22.4 407.8 L24.7 416.4 L26 419.2 L26 426.4 L26 429.1 L26 432.8 L25.1 437.4 L26 441.0 L26 445.0 L23.6 450.8 L23.8 457.6 L26 460.3 L22.8 464.5 L24.3 472.0 L22.2 477.0 L22.8 482.9 L22.7 489.9 L24.2 496.1 L22.0 499.8 L23.7 505.5 L26 513.2 L26 518.6 L25.2 521.8 L26 524.7 L26 533.7 L25.1 541.1 L22.3 548.7 L15.0 560 L30 560 Z'/%3E%3C/svg%3E") left top / 30px 560px repeat-y, linear-gradient(#000 0 0) right top / calc(100% - 28px) 100% no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 560' preserveAspectRatio='none'%3E%3Cpath d='M30 0 L15.0 0 L13.2 5.0 L16.0 8.6 L17.3 14.8 L16.5 20.9 L17.0 28.2 L18.1 35.7 L17.7 43.7 L15.3 47.2 L13.0 54.4 L13.9 61.2 L15.8 64.0 L18.3 66.8 L16.4 74.7 L17.9 81.9 L19.1 85.3 L21.9 88.6 L25.2 95.5 L23.9 98.4 L24.7 104.9 L26 108.6 L24.6 116.6 L25.8 120.1 L26 125.2 L25.3 130.9 L22.8 133.5 L24.4 139.0 L26 144.3 L26 150.3 L24.8 157.1 L21.8 160.5 L24.3 163.2 L26 171.4 L26 174.6 L26 177.9 L26 184.7 L25.4 191.2 L26 199.2 L25.6 203.3 L26 210.5 L25.7 215.7 L24.1 224.5 L25.4 228.4 L26 232.7 L26 237.3 L26 242.2 L26 249.6 L23.7 253.5 L21.5 256.2 L18.6 263.0 L19.0 267.1 L17.9 270.6 L19.1 274.6 L22.5 277.9 L23.9 284.2 L23.9 290.3 L26 299.1 L22.8 307.0 L25.8 313.3 L25.9 320.0 L23.7 326.7 L25.6 333.9 L25.7 336.9 L24.7 343.3 L26 350.2 L24.7 358.6 L26 362.1 L26 368.5 L24.5 376.7 L23.2 383.0 L24.5 390.7 L24.5 394.7 L22.7 401.1 L22.5 404.8 L22.4 407.8 L24.7 416.4 L26 419.2 L26 426.4 L26 429.1 L26 432.8 L25.1 437.4 L26 441.0 L26 445.0 L23.6 450.8 L23.8 457.6 L26 460.3 L22.8 464.5 L24.3 472.0 L22.2 477.0 L22.8 482.9 L22.7 489.9 L24.2 496.1 L22.0 499.8 L23.7 505.5 L26 513.2 L26 518.6 L25.2 521.8 L26 524.7 L26 533.7 L25.1 541.1 L22.3 548.7 L15.0 560 L30 560 Z'/%3E%3C/svg%3E") left top / 30px 560px repeat-y, linear-gradient(#000 0 0) right top / calc(100% - 28px) 100% no-repeat;
  }
}
/* 3. balanced headline lines (the last word is tied to the one before it in the HTML) */
.hero-bleed h1 { text-wrap: balance; font-size: clamp(2.3rem, min(3.9vw, 7.4vh), 3.8rem); max-width: 11em; }
/* 4. body text on the brown pairs with the lead instead of reading as a weaker column */
.cabruca-system .intro-pair .prose p,
.story .story-body .prose p:not(.signature) { color: var(--on-dark); font-size: 1.1rem; line-height: 1.62; }

/* Home: partners on the press board, their logos pressed into the kraft like print,
   full colour on hover */
.partners-strip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 20px clamp(28px, 4vw, 64px);
  align-items: center;
  margin-top: clamp(40px, 6vh, 64px);
  padding-top: 24px;
  background: var(--rule-ink) top left / 100% 6px no-repeat;
}
.partners-strip h3 { font-family: var(--display); font-weight: 600; font-size: clamp(1.3rem, 1.8vw, 1.6rem); margin: 0; }
.logos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px clamp(24px, 3vw, 48px); }
.logos img {
  display: block;
  width: auto;
  height: 52px;
  mix-blend-mode: multiply;
  filter: grayscale(1) sepia(.5) contrast(1.25);
  opacity: .92;
  transition: filter .3s ease, opacity .3s ease;
}
.logos li:hover img { filter: none; opacity: 1; }
/* optical sizes: square marks carry less ink per pixel than wide wordmarks */
.logo-dimitra img { height: 40px; }
.logo-ig-sul-da-bahia img { height: 64px; }
.logo-ceplac img { height: 54px; }
.logo-tv-cacau img { height: 60px; }
.logo-cacau-e-chocolate img { height: 42px; }
.logo-leilao-cacau img { height: 44px; }

/* Home: the growers' quotes under the president's, on forest green */
.manifesto-text { min-width: 0; }
.voices-mini { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px); margin-top: clamp(28px, 4.5vh, 48px); }
.manifesto .voice { background-image: var(--rule-light); padding-top: 20px; }
.manifesto .voice blockquote { color: var(--on-dark); font-size: 1.08rem; margin-bottom: 14px; }
.manifesto .voice figcaption { color: #c9d4c4; }
.manifesto .voice figcaption strong { color: var(--paper); }
.manifesto .source-note { color: #a9b8a5; margin-top: 20px; }

@media (max-width: 860px) {
  .partners-strip { grid-template-columns: minmax(0, 1fr); }
  .logos { justify-content: flex-start; }
  .logos img { height: 40px; }
  .logo-dimitra img { height: 32px; }
  .logo-tv-cacau img { height: 48px; }
  .logo-ig-sul-da-bahia img { height: 52px; }
  .voices-mini { grid-template-columns: minmax(0, 1fr); }
}

/* lists on dark sections (origin quality, on forest green): the muted brown body text was unreadable there */
.section-dark .points p { color: var(--on-dark-muted); }
.section-dark figcaption::before { color: var(--pod); }

/* 404 */
.not-found { min-height: 60vh; }
.not-found-en { margin-top: 28px; color: var(--muted); }

/* ======================================================================
   Page transition (js/transition.js, GSAP): content fades out and in,
   the header stays put, and the menu underline moves to the clicked item.
   ====================================================================== */
/* arriving: <main> stays hidden until the script fades it in (the <head> snippet
   removes the class after 1.2 s on its own, so a failed script never hides the page) */
html.pt-in main { opacity: 0; }
/* the hand-drawn underline: drawn left to right under the clicked item, wiped off the old one */
.site-nav a[aria-current="page"],
.site-nav a.pt-going { transition: background-size .22s cubic-bezier(.16, 1, .3, 1); }
.site-nav a.pt-going { text-decoration: none; background: var(--underline) 12px calc(100% - 4px) / calc(100% - 24px) 4px no-repeat; animation: pt-draw .22s cubic-bezier(.16, 1, .3, 1); }
.site-nav a.pt-leaving { background-size: 0 4px; }
@keyframes pt-draw { from { background-size: 0 4px; } }
@media (prefers-reduced-motion: reduce) {
  .site-nav a.pt-going { animation: none; }
  .site-nav a[aria-current="page"], .site-nav a.pt-going { transition: none; }
}

/* ======================================================================
   Products as a catalog, with a quote list (js/quote.js) instead of a cart.
   ====================================================================== */
.buy-steps { list-style: none; counter-reset: step; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(20px, 3vw, 40px); margin: 28px 0 0; padding: 0; max-width: 64rem; }
.buy-steps li { counter-increment: step; display: flex; gap: 12px; align-items: baseline; padding: 14px 0 0; color: var(--cocoa-2); background: var(--rule-faint) top left / 100% 6px no-repeat; }
.buy-steps li::before { content: counter(step); flex: none; font: 700 1.6rem/1 var(--display); color: var(--pod-dark); }

.catalog-section { padding-top: clamp(40px, 6vw, 72px); }
.catalog { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(36px, 4vw, 56px) clamp(24px, 3vw, 40px); align-items: stretch; }
.catalog .product,
.catalog .product:nth-child(even) { display: flex; flex-direction: column; grid-template-columns: none; gap: 0; padding: 0; background: none; scroll-margin-top: 96px; }
.catalog .product:nth-child(even) > .shot { order: 0; }
.catalog .shot { aspect-ratio: 4 / 3; margin: 0 0 22px; --tilt: -.5deg; }
.catalog .product:nth-child(even) .shot { --tilt: .5deg; }
.catalog .product h2 { font-size: clamp(1.45rem, 1.9vw, 1.75rem); line-height: 1.1; margin: 0 0 .4em; }
.product-body { display: flex; flex-direction: column; flex: 1; }
.product-body > p:first-of-type { color: var(--muted); font-size: .96rem; line-height: 1.55; margin: 0 0 14px; }
.key-fact { margin: 0 0 6px; font-size: .92rem; color: var(--cocoa-2); }
.key-fact strong { color: var(--ink); }
.price { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0; padding: 12px 0 10px; background: var(--rule-faint) top left / 100% 6px no-repeat; }
.price span { font: 700 .78rem/1 var(--sans); font-stretch: 78%; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.price strong { font: 600 1.15rem/1.2 var(--display); color: var(--ink); }
.spec-box { margin: 0 0 18px; background: var(--rule-faint) top left / 100% 6px no-repeat; }
.spec-box summary { cursor: pointer; padding: 12px 0 10px; font: 700 .82rem/1 var(--sans); font-stretch: 85%; letter-spacing: .06em; text-transform: uppercase; color: var(--cocoa-2); list-style: none; display: flex; justify-content: space-between; }
.spec-box summary::-webkit-details-marker { display: none; }
.spec-box summary::after { content: "+"; font-size: 1.1rem; line-height: .7; }
.spec-box[open] summary::after { content: "–"; }
.spec-box .specs { margin: 0 0 6px; font-size: .9rem; }
.buy { margin-top: auto; display: grid; gap: 12px; }
.buy .btn { width: 100%; text-align: center; }
.buy-more { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; margin: 2px 0 0; font-size: .92rem; }
.add-quote { cursor: pointer; font-family: var(--sans); }
.add-quote.in-quote { background: var(--paper); color: var(--cocoa); border-color: var(--cocoa); }
.add-quote.in-quote::before { content: ""; display: inline-block; width: .55em; height: .9em; margin: 0 .6em -.05em 0; border: solid currentColor; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) translateY(-2px); }

/* without JavaScript: direct WhatsApp quote per product; with it: the quote list */
.add-quote, .quote-bar, .quote-dialog:not([open]) { display: none; }
.js .add-quote { display: block; }
.js .quote-direct { display: none; }

/* the bar: appears once something is in the quote */
.js .quote-bar:not([hidden]) { display: block; }
.quote-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--cocoa); color: var(--paper); box-shadow: 0 -10px 30px rgba(43, 20, 15, .18); }
.quote-bar-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 12px; }
.quote-bar-count { margin: 0; font-weight: 600; }
.quote-bar-count strong { display: inline-grid; place-items: center; min-width: 1.9em; height: 1.9em; margin-right: 6px; border-radius: 50%; background: var(--pod); color: var(--cocoa); font: 800 .95rem/1 var(--sans); }
.quote-bar .btn { background: var(--pod); color: var(--cocoa); }
.quote-bar .btn:hover { background: #ffe94d; }
.has-quote .wa-float { bottom: 84px; }
.has-quote .catalog-section, .has-quote .site-footer, .has-quote .engraved-footer { scroll-padding-bottom: 80px; }
body.has-quote { padding-bottom: 72px; }

/* the panel: a drawer on desktop, a sheet from the bottom on phones */
.quote-dialog {
  margin: 0 0 0 auto;
  width: min(460px, 100vw);
  height: 100dvh;
  max-height: none;
  max-width: none;
  padding: 0;
  border: 0;
  background: var(--paper);
  color: var(--ink);
  overflow-y: auto;
}
.quote-dialog::backdrop { background: rgba(43, 20, 15, .45); }
.quote-dialog[open] { animation: quote-in .26s cubic-bezier(.16, 1, .3, 1); }
@keyframes quote-in { from { transform: translateX(32px); opacity: 0; } }
.quote-form { display: flex; flex-direction: column; gap: 18px; min-height: 100%; padding: 26px clamp(20px, 3vw, 32px) 28px; }
.quote-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.quote-head h2 { font-size: 1.9rem; margin: 0; }
.quote-close { display: grid; place-items: center; width: 44px; height: 44px; border: 1.5px solid var(--line); border-radius: var(--radius); background: none; color: var(--ink); cursor: pointer; }
.quote-close svg, .quote-remove svg { width: 18px; height: 18px; }
.quote-close:hover, .quote-remove:hover { border-color: var(--cocoa); }
.quote-hint { margin: -6px 0 0; color: var(--muted); font-size: .95rem; }
.quote-items { list-style: none; margin: 0; padding: 0; }
.quote-item { display: grid; grid-template-columns: minmax(0, 1fr) 6.5rem 7.5rem 44px; gap: 8px; align-items: center; padding: 14px 0; background: var(--rule-faint) top left / 100% 6px no-repeat; }
.quote-item-name { grid-column: 1 / -1; margin: 0; font: 600 1.05rem/1.2 var(--display); }
.quote-qty { grid-column: 1 / 3; }
.quote-qty input, .quote-unit select, .quote-fields input, .quote-fields textarea {
  width: 100%;
  padding: 11px 12px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  font: 400 1rem/1.3 var(--sans);
  color: var(--ink);
}
.quote-qty input:focus, .quote-unit select:focus, .quote-fields input:focus, .quote-fields textarea:focus { outline: 2px solid var(--pod-dark); outline-offset: 1px; border-color: var(--cocoa-2); }
.quote-remove { display: grid; place-items: center; width: 44px; height: 44px; border: 1.5px solid var(--line); border-radius: var(--radius); background: none; color: var(--cocoa-2); cursor: pointer; }
.quote-empty { margin: 0; padding: 18px; border: 1.5px dashed var(--line); color: var(--muted); }
.quote-fields { display: grid; gap: 14px; }
.quote-fields label { display: block; font-weight: 600; font-size: .92rem; }
.quote-fields label input, .quote-fields label textarea { display: block; margin-top: 6px; font-weight: 400; }
.quote-fields .opt { font-weight: 400; color: var(--muted); }
.quote-actions { display: grid; gap: 10px; margin-top: auto; }
.quote-actions .btn { text-align: center; }
.quote-actions [aria-disabled] { opacity: .45; pointer-events: none; }
.quote-clear { align-self: start; padding: 0; border: 0; background: none; color: var(--muted); font: 600 .88rem var(--sans); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 1080px) { .catalog { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .buy-steps { grid-template-columns: minmax(0, 1fr); }
  .catalog { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
  .quote-dialog { margin: auto 0 0; width: 100vw; height: auto; max-height: 92dvh; }
  .quote-dialog[open] { animation-name: quote-up; }
  .quote-bar-inner { gap: 10px; }
  .quote-bar .btn { padding: 13px 16px; }
}
@keyframes quote-up { from { transform: translateY(40px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .quote-dialog[open] { animation: none; } }

/* Products, polish pass */
/* the buying block (fact, price, specs, buttons) sits at the bottom of every card,
   so prices and buttons line up across a row whatever the description length */
.catalog .product-body > p:first-of-type { margin-bottom: 18px; }
.catalog .key-fact { margin-top: auto; }
.catalog .product-body > .price { margin-top: auto; }
.catalog .key-fact + .price { margin-top: 0; }
.buy { margin-top: 0; }
/* a drawn plus that turns into a minus, instead of text glyphs */
.spec-box summary::after { content: ""; width: 12px; height: 12px; align-self: center; background: linear-gradient(currentColor 0 0) center / 12px 2px no-repeat, linear-gradient(currentColor 0 0) center / 2px 12px no-repeat; transition: transform .2s ease; }
.spec-box[open] summary::after { background: linear-gradient(currentColor 0 0) center / 12px 2px no-repeat; }
.spec-box summary:hover { color: var(--ink); }
/* visible keyboard focus on the new controls */
.add-quote:focus-visible, .spec-box summary:focus-visible, .quote-bar .btn:focus-visible, .quote-actions .btn:focus-visible, .quote-close:focus-visible, .quote-remove:focus-visible, .quote-clear:focus-visible, .buy-more a:focus-visible {
  outline: 3px solid var(--pod-dark);
  outline-offset: 3px;
}
.quote-bar .btn:focus-visible { outline-color: var(--pod); }
/* tablet: two columns; phones below 600 px: one */
@media (max-width: 860px) {
  .catalog { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; }
}
@media (max-width: 600px) {
  .catalog { grid-template-columns: minmax(0, 1fr); }
  /* get to the first product sooner */
  .page-hero:has(.buy-steps) { padding: 32px 0 28px; }
  .page-hero:has(.buy-steps) h1 { font-size: 2.1rem; }
  .page-hero:has(.buy-steps) .lead { font-size: 1rem; }
  .buy-steps { margin-top: 18px; }
  .buy-steps li { padding-top: 10px; font-size: .92rem; line-height: 1.45; }
  .buy-steps li::before { font-size: 1.25rem; }
  .catalog-section { padding-top: 32px; }
}

/* Products: more negative space (desktop and tablet; phones keep their tighter rhythm) */
@media (min-width: 601px) {
  .page-hero:has(.buy-steps) { padding: clamp(72px, 9vw, 128px) 0 clamp(56px, 7vw, 96px); }
  .page-hero:has(.buy-steps) .lead { max-width: 34rem; margin-bottom: 0; }
  .page-hero:has(.buy-steps) .buy-steps { margin-top: clamp(40px, 5vw, 64px); gap: 0 clamp(32px, 5vw, 72px); }
  .catalog-section { padding: clamp(80px, 9vw, 136px) 0 clamp(96px, 11vw, 160px); }
  .catalog { gap: clamp(72px, 8vw, 120px) clamp(32px, 4.5vw, 72px); }
  .catalog .shot { margin-bottom: 30px; }
  .catalog .product h2 { margin-bottom: .55em; }
  .catalog .product-body > p:first-of-type { margin-bottom: 26px; max-width: 34ch; }
  .catalog .key-fact { margin-bottom: 10px; }
  .catalog .price { padding: 16px 0 14px; }
  .catalog .spec-box { margin-bottom: 26px; }
  .catalog .spec-box summary { padding: 16px 0 14px; }
  .buy { gap: 16px; }
}

/* Products: let the page breathe. Three columns on desktop with wide gutters
   and tall gaps between rows */
@media (min-width: 1081px) {
  .catalog { gap: clamp(120px, 11vw, 176px) clamp(56px, 5.5vw, 88px); }
  .catalog .shot { margin-bottom: 36px; }
  .catalog .product h2 { font-size: clamp(1.5rem, 1.9vw, 1.85rem); margin-bottom: .6em; }
  .catalog .product-body > p:first-of-type { font-size: 1.02rem; line-height: 1.65; max-width: 42ch; margin-bottom: 32px; }
  .catalog .key-fact { margin-bottom: 14px; }
  .catalog .price { padding: 18px 0 16px; }
  .catalog .spec-box { margin-bottom: 32px; }
  .catalog .spec-box summary { padding: 18px 0 16px; }
  .buy { gap: 18px; }
  .buy .btn { padding-block: 17px; }
  .catalog-section { padding: clamp(112px, 11vw, 176px) 0 clamp(128px, 13vw, 200px); }
  .page-hero:has(.buy-steps) { padding: clamp(96px, 10vw, 152px) 0 clamp(72px, 8vw, 120px); }
}
@media (min-width: 601px) and (max-width: 1080px) {
  .catalog { gap: clamp(88px, 11vw, 120px) clamp(36px, 5vw, 56px); }
}