/* ============================================================
   Yobgoo Coconut Biomass (YCBC) — site styles
   Palette drawn from the material world of coconut biomass:
   bark, palm frond, husk/kraft, and shell charcoal.
   ============================================================ */

:root{
  --bark:#3a2414;      /* deep brown ink            */
  --brown:#5a3a22;     /* brand brown               */
  --frond:#4f5c1c;     /* deep palm green (actions) */
  --palm:#6b7a2a;      /* brand olive/green accent  */
  --char:#201d18;      /* warm near-black (charcoal)*/
  --kraft:#efe4d2;     /* warm cream page bg        */
  --paper:#fbf6ed;     /* card / raised surfaces    */
  --line:#ddcfb7;      /* hairline                  */
  --muted:#7c6a52;     /* muted brown-grey text     */
  --shadow:0 1px 2px rgba(58,36,20,.06),0 12px 28px -14px rgba(58,36,20,.22);

  --display:'Montserrat',system-ui,-apple-system,sans-serif;
  --body:'Work Sans',system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace;

  --wrap:1180px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:var(--body);color:var(--bark);background:var(--kraft);
  line-height:1.62;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:24px}
.section{padding-block:clamp(56px,8vw,112px)}
.section--tight{padding-block:clamp(40px,6vw,72px)}

/* ---------- type ---------- */
h1,h2,h3,h4{font-family:var(--display);color:var(--bark);line-height:1.08;
  letter-spacing:-.01em;font-weight:800;margin:0 0 .5em}
h1{font-size:clamp(2.3rem,1.2rem+3.6vw,4rem)}
h2{font-size:clamp(1.7rem,1.1rem+2.2vw,2.7rem)}
h3{font-size:clamp(1.15rem,.95rem+.8vw,1.5rem);font-weight:700}
p{margin:0 0 1rem}
.lead{font-size:clamp(1.05rem,.98rem+.5vw,1.28rem);color:#4a3826;max-width:60ch}
.muted{color:var(--muted)}

.eyebrow{font-family:var(--mono);text-transform:uppercase;letter-spacing:.18em;
  font-size:.72rem;font-weight:500;color:var(--palm);margin:0 0 1rem;display:inline-flex;
  align-items:center;gap:.6ch}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--palm);display:inline-block}

/* ---------- buttons ---------- */
.btn{--bg:var(--frond);--fg:var(--paper);
  font-family:var(--display);font-weight:600;font-size:.95rem;letter-spacing:.01em;
  display:inline-flex;align-items:center;gap:.6ch;background:var(--bg);color:var(--fg);
  padding:.82em 1.4em;border-radius:2px;border:1.5px solid var(--bg);text-decoration:none;
  transition:transform .15s ease,background .2s ease,box-shadow .2s ease;cursor:pointer;line-height:1}
.btn:hover{background:#3f4a15;border-color:#3f4a15;transform:translateY(-1px);box-shadow:var(--shadow)}
.btn--ghost{--bg:transparent;--fg:var(--bark);border-color:var(--line)}
.btn--ghost:hover{--bg:var(--paper);background:var(--paper);border-color:var(--brown);color:var(--brown)}
.btn--paper{--bg:var(--paper);--fg:var(--brown)}
.btn--paper:hover{background:#fff;border-color:#fff;color:var(--bark)}
.btn--lg{padding:.95em 1.7em;font-size:1rem}

.arrow{transition:transform .15s ease}
.btn:hover .arrow,.tlink:hover .arrow{transform:translateX(3px)}
.tlink{font-family:var(--display);font-weight:600;text-decoration:none;color:var(--brown);
  display:inline-flex;align-items:center;gap:.5ch;border-bottom:2px solid transparent;padding-bottom:2px}
.tlink:hover{border-color:var(--palm)}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(239,228,210,.86);
  backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;height:74px}
.brand{display:flex;align-items:center;text-decoration:none;flex:0 0 auto}
.brand img{height:42px;width:auto}
.brand .brand-sr{position:absolute;left:-9999px}
.nav-links{display:flex;align-items:center;gap:26px;list-style:none;margin:0;padding:0}
.nav-links a{font-family:var(--body);font-weight:500;text-decoration:none;color:var(--bark);
  font-size:.94rem;padding:.3em 0;border-bottom:2px solid transparent;transition:color .15s,border-color .15s}
.nav-links a:hover{color:var(--brown)}
.nav-links a[aria-current="page"]{color:var(--brown);border-color:var(--palm)}
.nav-cta{display:flex;align-items:center;gap:14px}
.nav-toggle{display:none;background:none;border:1.5px solid var(--line);border-radius:2px;
  width:44px;height:40px;cursor:pointer;color:var(--bark)}
.nav-toggle svg{margin:auto}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,60px);align-items:center}
.hero h1{margin-bottom:.35em}
.hero .lead{margin-bottom:1.6rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:1.5rem}
.chip{display:inline-flex;align-items:center;gap:.7ch;font-family:var(--mono);font-size:.76rem;
  color:var(--muted);letter-spacing:.03em}
.chip .dot{width:8px;height:8px;border-radius:50%;background:var(--palm);flex:0 0 auto;
  box-shadow:0 0 0 4px rgba(107,122,42,.16)}
.hero-media{position:relative}
.hero-media .frame{border-radius:4px;overflow:hidden;box-shadow:var(--shadow);aspect-ratio:4/5}
.hero-media .frame img{width:100%;height:100%;object-fit:cover}
.hero-media .tag{position:absolute;left:-14px;bottom:22px;background:var(--char);color:var(--paper);
  font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;padding:.6em 1em;border-radius:2px}
.hero-media .tag b{color:#cdd39a;font-weight:500}

/* ---------- value chain (signature) ---------- */
.chain{background:var(--char);color:#efe6d6}
.chain h2{color:#fff}
.chain .eyebrow{color:#b9c17e}
.chain .lead{color:#d8ccb6}
.chain-track{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:2.6rem}
.stage{position:relative;display:flex;flex-direction:column}
.stage .num{font-family:var(--mono);font-size:.78rem;color:#b9c17e;letter-spacing:.1em;margin-bottom:.7rem}
.stage .shot{aspect-ratio:1/1;border-radius:3px;overflow:hidden;margin-bottom:.9rem;
  border:1px solid rgba(255,255,255,.08)}
.stage .shot img{width:100%;height:100%;object-fit:cover}
.stage h3{color:#fff;font-size:1.02rem;margin-bottom:.15em}
.stage .role{font-family:var(--mono);font-size:.72rem;color:#9f8f77;letter-spacing:.03em}
.stage:not(:last-child)::after{content:"";position:absolute;top:calc(.78rem + .35em);right:-13px;
  width:10px;height:10px;border-top:2px solid #6b7a2a;border-right:2px solid #6b7a2a;
  transform:rotate(45deg)}

/* ---------- product cards ---------- */
.cards{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:2.4rem}
.card{background:var(--paper);border:1px solid var(--line);border-radius:4px;overflow:hidden;
  display:flex;flex-direction:column;box-shadow:var(--shadow);transition:transform .18s ease}
.card:hover{transform:translateY(-3px)}
.card .ph{aspect-ratio:16/10;overflow:hidden;background:#e7dcc7}
.card .ph img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.card:hover .ph img{transform:scale(1.03)}
.card .body{padding:26px 26px 30px}
.card .kicker{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--palm);margin-bottom:.7rem}
.card h3{margin-bottom:.5rem}
.card p{color:#4a3826;font-size:.98rem}
.card--sm .body{padding:20px 22px 24px}
.card--sm h3{font-size:1.1rem}

/* ---------- spec chips ---------- */
.specs{display:flex;flex-wrap:wrap;gap:8px;margin:.2rem 0 1.3rem;padding:0;list-style:none}
.specs li{font-family:var(--mono);font-size:.74rem;color:var(--brown);background:rgba(107,122,42,.1);
  border:1px solid rgba(107,122,42,.22);border-radius:2px;padding:.4em .7em;letter-spacing:.01em}

/* ---------- generic split rows ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,60px);align-items:center}
.split.rev .split-media{order:-1}
.split-media img{border-radius:4px;box-shadow:var(--shadow);width:100%;aspect-ratio:16/11;object-fit:cover}
.stack{display:flex;flex-direction:column;gap:14px}

/* lists */
.ticks{list-style:none;padding:0;margin:0 0 1.2rem}
.ticks li{position:relative;padding-left:1.7em;margin-bottom:.55em;color:#43331f}
.ticks li::before{content:"";position:absolute;left:0;top:.55em;width:9px;height:9px;
  border-right:2.5px solid var(--palm);border-bottom:2.5px solid var(--palm);transform:rotate(45deg)}

/* trust strip */
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--line);
  border:1px solid var(--line);border-radius:4px;overflow:hidden}
.fact{background:var(--kraft);padding:26px 22px}
.fact .n{font-family:var(--display);font-weight:800;font-size:1.5rem;color:var(--brown);
  line-height:1.1;margin-bottom:.35rem;letter-spacing:-.01em}
.fact .t{font-family:var(--mono);font-size:.76rem;color:var(--muted);letter-spacing:.02em}

/* markets */
.pills{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:1.4rem 0 0}
.pills li{font-family:var(--mono);font-size:.82rem;color:var(--bark);background:var(--paper);
  border:1px solid var(--line);border-radius:2px;padding:.55em 1em}
.pills li b{color:var(--brown);font-weight:600}

/* timeline */
.timeline{list-style:none;padding:0;margin:2rem 0 0;display:grid;gap:2px}
.tl{display:grid;grid-template-columns:150px 1fr;gap:20px;background:var(--paper);
  border:1px solid var(--line);padding:20px 22px;align-items:start}
.tl .when{font-family:var(--mono);font-size:.82rem;color:var(--palm);letter-spacing:.04em;
  padding-top:.2em}
.tl h3{font-size:1.08rem;margin-bottom:.2em}
.tl p{margin:0;color:#4a3826;font-size:.96rem}

/* CTA band */
.cta{background:var(--frond);color:var(--paper)}
.cta h2{color:#fff}
.cta .lead{color:#e9edcf}
.cta-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,4vw,56px);align-items:start}
.detail{margin:0 0 1.5rem}
.detail .k{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--palm);margin-bottom:.25rem}
.detail .v{font-size:1.06rem;color:var(--bark)}
.detail .v a{color:var(--brown);text-decoration:none;border-bottom:1px solid var(--line)}
.detail .v a:hover{border-color:var(--brown)}

.form{background:var(--paper);border:1px solid var(--line);border-radius:4px;padding:28px;box-shadow:var(--shadow)}
.field{margin-bottom:16px}
.field label{display:block;font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);margin-bottom:.4rem}
.field input,.field select,.field textarea{width:100%;font-family:var(--body);font-size:1rem;
  color:var(--bark);background:#fff;border:1px solid var(--line);border-radius:2px;padding:.7em .8em;
  transition:border-color .15s,box-shadow .15s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--palm);
  box-shadow:0 0 0 3px rgba(107,122,42,.18)}
.field textarea{min-height:120px;resize:vertical}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-note{font-family:var(--mono);font-size:.74rem;color:var(--muted);margin:.9rem 0 0}

/* ---------- footer ---------- */
.site-footer{background:var(--char);color:#d9cdba}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1.2fr;gap:40px;padding-block:56px}
.site-footer .brand img{height:40px;filter:none}
.foot-blurb{color:#b4a58e;max-width:34ch;margin-top:1rem;font-size:.95rem}
.foot-h{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:#8f7f68;margin:0 0 1rem}
.foot-links{list-style:none;padding:0;margin:0;display:grid;gap:.6rem}
.foot-links a{color:#d9cdba;text-decoration:none;font-size:.96rem}
.foot-links a:hover{color:#fff}
.foot-contact{font-size:.94rem;line-height:1.9;color:#cdbfa9}
.foot-contact a{color:#cdbfa9;text-decoration:none}
.foot-contact a:hover{color:#fff}
.foot-legal{border-top:1px solid rgba(255,255,255,.09);padding-block:22px;
  font-family:var(--mono);font-size:.72rem;color:#8f7f68;letter-spacing:.02em}
.foot-legal .wrap{display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:space-between}

/* ---------- page hero (inner) ---------- */
.page-hero{padding-block:clamp(48px,7vw,88px) clamp(20px,3vw,36px)}
.page-hero .lead{margin-top:.3rem}

/* ---------- reveal ---------- */
[data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
[data-reveal].in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .hero-grid,.split,.contact-grid{grid-template-columns:1fr}
  .split.rev .split-media{order:0}
  .hero-media{max-width:440px}
  .chain-track{grid-template-columns:1fr 1fr}
  .stage:not(:last-child)::after{display:none}
  .cards{grid-template-columns:1fr}
  .facts{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr 1fr;gap:32px}
  .tl{grid-template-columns:1fr}
}
@media (max-width:620px){
  .nav-links{position:fixed;inset:74px 0 auto 0;background:var(--kraft);flex-direction:column;
    align-items:flex-start;gap:0;padding:8px 24px 20px;border-bottom:1px solid var(--line);
    transform:translateY(-8px);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;
    box-shadow:var(--shadow)}
  .nav-links.open{opacity:1;transform:none;pointer-events:auto}
  .nav-links a{width:100%;padding:.8em 0;border-bottom:1px solid var(--line)}
  .nav-links a[aria-current="page"]{border-color:var(--line)}
  .nav-toggle{display:inline-flex}
  .nav .btn{display:none}
  .facts,.grid-2{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .cta-inner{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important}
  [data-reveal]{opacity:1!important;transform:none!important;transition:none!important}
  .card:hover,.btn:hover{transform:none}
}