:root{
    --espresso: #251712;
    --espresso-soft: #3a251c;
    --cream: #faf4ea;
    --cream-dim: #efe6d6;
    --copper: #b9682f;
    --copper-light: #e2b184;
    --ink: #241a14;
    --ink-soft: #6b5b4d;
    --academy: #6d7a4f;
    --academy-light: #dfe6cd;
    --line: rgba(36,26,20,0.1);
    --radius: 18px;
  }

  .container-x{ max-width: 1280px; margin: 0 auto; padding: 0 24px; }

  ::selection{ background: var(--copper); color: #fff; }

  /* ---------------- NAVBAR ---------------- */
  .site-nav{
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 32px;
    transition: background .35s ease, padding .35s ease, box-shadow .35s ease;
  }
  .site-nav.scrolled{
    background: rgba(250,244,234,0.92);
    backdrop-filter: blur(10px);
    padding: 12px 32px;
    box-shadow: 0 6px 24px rgba(36,26,20,0.08);
  }
  .brand{
    font-family:'Fraunces',serif;
    font-weight: 600;
    font-size: 1.3rem;
    color: var(--cream);
    letter-spacing: .01em;
    transition: color .35s ease;
  }
  .site-nav.scrolled .brand{ color: var(--ink); }
  .nav-links{ display:flex; gap: 36px; list-style:none; margin:0; padding:0; }
  .nav-links a{
    color: rgba(250,244,234,0.85);
    font-size: .93rem;
    font-weight: 500;
    position: relative;
    transition: color .3s ease;
  }
  .site-nav.scrolled .nav-links a{ color: var(--ink-soft); }
  .nav-links a:hover{ color: var(--copper-light); }
  .site-nav.scrolled .nav-links a:hover{ color: var(--copper); }
  .nav-cta{
    background: var(--copper);
    color: #fff !important;
    padding: 10px 22px;
    border-radius: 40px;
    font-size: .88rem;
    font-weight: 600;
    white-space: nowrap;
  }
  .nav-cta:hover{ background:#a45b28; color:#fff !important; }
  .nav-toggle{
    display:none;
    background:none;border:none;color:var(--cream);font-size:1.6rem;
  }
  .site-nav.scrolled .nav-toggle{ color: var(--ink); }

  @media (max-width: 900px){
    .nav-links{
      position: fixed; top: 0; right: -100%; height: 100vh; width: min(78vw,320px);
      background: var(--espresso); flex-direction: column; justify-content:center;
      gap: 26px; padding: 40px; transition: right .4s ease; z-index: 1001;
    }
    .nav-links.open{ right: 0; }
    .nav-links a{ color: var(--cream) !important; font-size: 1.05rem; }
    .nav-cta{ display:none; }
    .nav-toggle{ display:block; }
  }

  /* ---------------- HERO ---------------- */
  .hero{
    position: relative;
    min-height: 100vh;
    display:flex;
    align-items:center;
    color: var(--cream);
    overflow:hidden;
  }
  .hero::before{
    content:"";
    position:absolute; inset:0;
    background: linear-gradient(180deg, rgba(20,13,9,0.55), rgba(20,13,9,0.82) 70%);
    z-index:1;
  }
  .hero-bg{
    position:absolute; inset:-6%; z-index:0;
    background: url('https://images.unsplash.com/photo-1442512595331-e89e73853f31?auto=format&fit=crop&w=1800&q=80') center/cover;
    will-change: transform;
  }
  .hero-content{ position:relative; z-index:2; padding: 140px 0 90px; }
  .hero-eyebrow{
    display:inline-flex; align-items:center; gap:10px;
    font-size:.8rem; font-weight:600; letter-spacing:.16em;
    color: var(--copper-light); margin-bottom: 22px;
  }
  .hero-eyebrow::before{ content:""; width:34px; height:1px; background:var(--copper-light); }
  .hero h1{
    font-size: clamp(2.4rem, 5.4vw, 4.4rem);
    font-weight: 600;
    line-height: 1.08;
    max-width: 820px;
    margin: 0 0 22px;
  }
  .hero p{
    font-size: 1.12rem;
    line-height: 1.7;
    max-width: 560px;
    color: rgba(250,244,234,0.8);
    margin: 0 0 36px;
  }
  .hero-actions{ display:flex; gap:16px; flex-wrap:wrap; }
  .btn-primary-x{
    background: var(--copper); color:#fff; padding: 14px 30px; border-radius: 44px;
    font-weight:600; font-size:.95rem; display:inline-flex; align-items:center; gap:10px;
    transition: transform .25s ease, background .25s ease;
  }
  .btn-primary-x:hover{ background:#a45b28; transform: translateY(-2px); color:#fff; }
  .btn-ghost-x{
    border:1px solid rgba(250,244,234,0.35); color:var(--cream);
    padding: 14px 30px; border-radius: 44px; font-weight:600; font-size:.95rem;
    transition: border-color .25s ease, background .25s ease;
  }
  .btn-ghost-x:hover{ background: rgba(250,244,234,0.1); color:var(--cream); }

  .hero-scroll{
    position:absolute; bottom: 34px; left: 50%; transform: translateX(-50%);
    z-index:1; display:flex; flex-direction:column; align-items:center; gap:8px;
    color: rgba(250,244,234,0.65); font-size:.75rem; letter-spacing:.1em;
  }
  .hero-scroll .line{ width:1px; height:34px; background: rgba(250,244,234,0.4); animation: scrollpulse 1.8s ease-in-out infinite; }
  @keyframes scrollpulse{ 0%,100%{ opacity:.3; transform:scaleY(.7); } 50%{ opacity:1; transform:scaleY(1); } }

  .hero-spotlight{
    position:absolute; inset:0; z-index:1; pointer-events:none;
    background: radial-gradient(420px circle at var(--sx,50%) var(--sy,30%), rgba(226,177,132,0.16), transparent 65%);
    opacity:0; transition: opacity .4s ease;
  }
  .hero:hover .hero-spotlight{ opacity:1; }

  /* ---------------- CINEMATIC REVEAL (Apple-style pinned image) ---------------- */
  
  
  

  /* ---------------- SECTION SHELLS ---------------- */
  section{ position: relative; }
  .section-pad{ padding: 100px 0; }
  .eyebrow{
    font-size:.8rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
    color: var(--copper); margin-bottom: 16px; display:flex; align-items:center; gap:10px;
  }
  .eyebrow::before{ content:""; width:26px; height:2px; background:var(--copper); border-radius:2px; }
  .eyebrow.is-academy{ color: var(--academy); }
  .eyebrow.is-academy::before{ background: var(--academy); }

  /* ---------------- ECOSYSTEM INTRO ---------------- */
  .ecosystem-intro{ background: var(--cream); }
  .ecosystem-intro h2{
    font-size: clamp(1.9rem, 3.6vw, 2.8rem);
    font-weight: 600;
    max-width: 780px;
    line-height: 1.18;
    margin: 0 0 20px;
  }
  .word-mask{ display:inline-block; overflow:hidden; vertical-align:top; padding-bottom: .05em; }
  .word-mask .word{ display:inline-block; transform: translateY(112%); will-change: transform; }
  /* the underline SVG must live outside .word-mask's overflow:hidden,
     otherwise it gets clipped by the same mask that reveals the word */
  .highlight-wrap{ position:relative; display:inline-block; vertical-align:top; }
  .highlight-word{ color: var(--copper); }
  .highlight-underline{
    position:absolute; left:-4px; right:-4px; bottom:-6px; height:16px; width:calc(100% + 8px);
    overflow:visible; pointer-events:none;
  }
  .highlight-underline path{
    fill:none; stroke: var(--copper); stroke-width:3; stroke-linecap:round;
  }
  .ecosystem-intro p{
    max-width: 620px;
    font-size: 1.05rem;
    line-height: 1.75;
    color: var(--ink-soft);
    margin: 0 0 36px;
  }
  .jump-pills{ display:flex; gap:14px; flex-wrap:wrap; }
  .jump-pill{
    display:flex; align-items:center; gap:10px;
    background:#fff; border:1px solid var(--line); border-radius: 50px;
    padding: 10px 20px 10px 12px; font-weight:600; font-size:.92rem; color:var(--ink);
    transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
  }
  .jump-pill:hover{ border-color: var(--copper); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(185,104,47,0.15); color:var(--ink); }
  .jump-pill .dot{ width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.78rem; font-weight:700; color:#fff; }
  .jump-pill.roaster .dot{ background: var(--copper); }
  .jump-pill.academy .dot{ background: var(--academy); }

  /* ---------------- COMPANY SECTION HEADER ---------------- */

  .company-head{
    display:flex; justify-content:space-between; align-items:flex-end; gap: 40px;
    margin-bottom: 56px; flex-wrap: wrap;
  }
  .company-head h3{
    font-size: clamp(1.7rem, 3vw, 2.4rem);
    font-weight:600; margin:0 0 14px; max-width:560px;
  }
  .company-head p{ max-width: 520px; color: var(--ink-soft); font-size:1rem; line-height:1.7; margin:0; }
  .company-tag{
    display:inline-flex; align-items:center; gap:8px; font-size:.78rem; font-weight:700;
    letter-spacing:.08em; text-transform:uppercase; padding: 7px 16px; border-radius:30px; margin-bottom:14px;
  }
  .company-tag.roaster{ background: rgba(185,104,47,0.12); color: var(--copper); }
  .company-tag.academy{ background: rgba(109,122,79,0.14); color: var(--academy); }

  /* ---------------- SLIDER GROUP ---------------- */
  .slider-group{ margin-bottom: 60px; }
  .slider-group:last-child{ margin-bottom: 0; }
  .slider-heading{
    display:flex; align-items:center; justify-content:space-between; margin-bottom: 22px;
  }
  .slider-heading h4{margin:0; display:flex; align-items:center; gap:12px;}
  .slider-heading h4 .num{
    font-family:'Fraunces',serif; font-size:1rem; font-weight:600; color:#fff;
    background: var(--copper); width:30px; height:30px; border-radius:50%;
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }

  .slider-nav{ display:flex; gap:10px; }
  .slider-btn{
    width:42px; height:42px; border-radius:50%; border:1px solid var(--line);
    background:#fff; display:flex; align-items:center; justify-content:center;
    cursor:pointer; transition: background .25s ease, border-color .25s ease, transform .15s ease;
    color: var(--ink);
  }
  .slider-btn:hover{ background: #6B3F45; border-color: #6B3F45; color:#fff; }
  .slider-btn:active{ transform: scale(.92); }
  .company-block.academy .slider-btn:hover{ background: var(--academy); border-color: var(--academy); }

  .slider-row{ position:relative; }
  .slider-track{
    display:flex; gap:22px; overflow-x:auto; scroll-snap-type:x mandatory;
    padding: 6px 4px 18px; margin: 0 -4px;
    scrollbar-width:none; -ms-overflow-style:none; cursor:grab;
  }
  .slider-track::-webkit-scrollbar{ display:none; }
  .slider-track:active{ cursor:grabbing; }

  /* ---------------- CARD (full-bleed image, gradient overlay) ---------------- */
  .eco-card{
    position: relative;
    flex: 0 0 auto;
    width: 290px;
    height: 380px;
    scroll-snap-align: start;
    border-radius: var(--radius);
    overflow: hidden;
    cursor: pointer;
    background: #d8cbb6;
    transition: transform .35s ease, box-shadow .35s ease;
  }
  .eco-card-media{
    position:absolute; inset:0; overflow:hidden;
  }
  .eco-card-media img{
    width:100%; height:100%; object-fit:cover;
    transition: transform .6s cubic-bezier(.2,.8,.2,1);
  }
  .eco-card:hover .eco-card-media img{ transform: scale(1.08); }
  .eco-card::after{
    content:"";
    position:absolute; inset:0;
    background: linear-gradient(to top,
      rgba(15,9,6,0.92) 0%,
      rgba(15,9,6,0.68) 34%,
      rgba(15,9,6,0.18) 62%,
      rgba(15,9,6,0) 80%);
    pointer-events:none;
    transition: opacity .35s ease;
  }
  .eco-card:hover::after{ opacity: .92; }
  .eco-card-tag{
    position:absolute; top:14px; left:14px; z-index:2;
    background: rgba(250,244,234,0.94); color: var(--ink);
    font-size:.72rem; font-weight:700; letter-spacing:.04em;
    padding: 5px 12px; border-radius: 20px;
  }
  .eco-card-body{
    position:absolute; left:0; right:0; bottom:0; z-index:2;
    padding: 18px 20px 20px; display:flex; flex-direction:column;
  }
  .eco-card-actions{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.22);
  }
  
  .eco-card:hover .card-readmore svg{ transform: translateX(3px); }
  .company-block.academy .card-checkout:hover{ background: var(--academy); }

  /* ---------------- CTA CARD ---------------- */
  

  /* ---------------- STATS STRIP ---------------- */
 
  
  

  @media (max-width: 700px){ .stats-strip{ grid-template-columns: repeat(2,1fr); } }

  /* ---------------- CLOSING DUAL CTA ---------------- */
  .closing-cta{ background: var(--espresso); color: var(--cream); padding: 100px 0 70px; }
  .closing-head{ text-align:center; max-width:640px; margin: 0 auto 56px; }
  .closing-head .eyebrow{ justify-content:center; color: var(--copper-light); }
  .closing-head .eyebrow::before{ background: var(--copper-light); }
  .closing-head h2{ font-size: clamp(1.9rem,3.4vw,2.6rem); font-weight:600; margin:0; }
  .dual-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 26px; }
  @media (max-width: 800px){ .dual-grid{ grid-template-columns: 1fr; } }
  .dual-card{
    background: rgba(250,244,234,0.06); border:1px solid rgba(250,244,234,0.15);
    border-radius: 22px; padding: 38px; transition: background .3s ease, border-color .3s ease, transform .3s ease;
  }
  .dual-card:hover{ background: rgba(250,244,234,0.1); border-color: rgba(250,244,234,0.3); transform: translateY(-4px); }
  .dual-card .company-tag{ margin-bottom:18px; }
  .dual-card h3{ font-size:1.5rem; font-weight:600; margin:0 0 12px; }
  .dual-card p{ color: rgba(250,244,234,0.68); font-size:.95rem; line-height:1.65; margin:0 0 26px; }
  .contact-line{ text-align:center; margin-top: 54px; color: rgba(250,244,234,0.6); font-size:.95rem; }
  .contact-line a{ color: var(--copper-light); font-weight:600; }

  /* ---------------- FOOTER ---------------- */

  /* ---------------- MODAL ---------------- */
  .eco-modal-overlay{
    position:fixed; inset:0; background: rgba(20,13,9,0.72);
    display:flex; align-items:center; justify-content:center; padding: 24px;
    z-index: 2000; opacity:0; pointer-events:none; transition: opacity .3s ease;
  }
  .eco-modal-overlay.open{ opacity:1; pointer-events:auto; }
  .eco-modal{
    background:#fff; border-radius: 22px; max-width: 780px; width:100%;
    max-height: 88vh; overflow-y:auto; position:relative;
    transform: translateY(24px) scale(.97); opacity:0; transition: transform .35s ease, opacity .35s ease;
    display:grid; grid-template-columns: 1fr 1fr;
  }
  .eco-modal-overlay.open .eco-modal{ transform: translateY(0) scale(1); opacity:1; }
  @media (max-width: 700px){ .eco-modal{ grid-template-columns: 1fr; } }
  .eco-modal-media{ background:#e8ded0; min-height: 220px; }
  .eco-modal-media img{ width:100%; height:100%; object-fit:cover; min-height:220px; }
  .eco-modal-body{ padding: 32px; display:flex; flex-direction:column; }
  .eco-modal-tag{
    display:inline-block; align-self:flex-start; font-size:.72rem; font-weight:700; letter-spacing:.05em;
    background: rgba(185,104,47,0.12); color: var(--copper); padding:5px 14px; border-radius:20px; margin-bottom:14px;
  }
  .eco-modal-body h3{ font-size:1.5rem; font-weight:600; margin:0 0 14px; }
  .eco-modal-body p{ font-size:.95rem; line-height:1.7; color: var(--ink-soft); margin:0 0 26px; }
  .eco-modal-actions{ margin-top:auto; display:flex; gap:12px; flex-wrap:wrap; }
  .eco-modal-close{
    position:absolute; top:16px; right:16px; width:38px; height:38px; border-radius:50%;
    background: rgba(36,26,20,0.06); border:none; display:flex; align-items:center; justify-content:center;
    cursor:pointer; z-index:5; color: var(--ink); transition: background .2s ease;
  }
  .eco-modal-close:hover{ background: rgba(36,26,20,0.14); }

  /* ---------------- SHARED REVEAL ---------------- */
  .reveal{ opacity:0; transform: translateY(28px); }

  @media (max-width: 600px){
    .eco-card{ width: 250px; }
    .section-pad, .company-block{ padding: 70px 0; }
    .cinematic-frame{ width: 78vw; height: 38vh; border-radius: 20px; }
  }

  @media (max-width: 700px){
    .slider-btn{
        width: 32px;
        height: 32px;
    }
  }