:root{
    --paper: #fff;
    --paper-alt: #faf9f6;
    --ink:#17140F;
    --ink-soft:#59544A;
    --ink-faint:#8C8677;
    --line:#E3D9BF;
    --primary: #f70f05;
    --primary-dark: #f70f05;
    --primary-bright: #f70f05;
    --gold: #f70f05;
    --gold-tint: #f4ebd8;
    --near-black: #000;
    --serif:'Roboto', serif;
    --sans:'Roboto', sans-serif;
    --mono:'Roboto', monospace;
    --max: 1240px;
  }
  .b2b-page, .b2b-page *{ box-sizing:border-box; margin:0; padding:0; }
  html:has(.b2b-page){scroll-behavior:smooth;}
  @media (prefers-reduced-motion: reduce){ html:has(.b2b-page){scroll-behavior:auto;} .b2b-page *{animation-duration:.001ms !important; transition-duration:.001ms !important;} }
  .b2b-page{ background:var(--paper); color:var(--ink); font-family:var(--sans); -webkit-font-smoothing:antialiased; }
  .b2b-page a{/* color:inherit; */text-decoration:none;}
  .b2b-page img, .b2b-page svg{ display:block; max-width:100%; }
  .wrap{ max-width:var(--max); margin:0 auto; padding:0 32px; }
  @media (max-width:720px){ .wrap{ padding:0 20px; } }
  /* ::selection{ background:var(--gold-tint); color:var(--primary-dark); } */
  .b2b-page h1, .b2b-page h2, .b2b-page h3, .b2b-page h4{font-family:var(--serif);font-weight: 600;line-height: 1.15;color:var(--ink);}

  .eyebrow{
    font-family:var(--mono);
    font-size: 12px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--primary);
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:14px;
    font-weight: 700;
  }
  .eyebrow::before{content:'';width:20px;height:1px;background:var(--primary);display: none;}
  .eyebrow.on-dark{color: var(--gold-tint);} .eyebrow.on-dark::before{ background:var(--gold); }
  .eyebrow.center{ justify-content:center; }

  /* ---------- buttons ---------- */
  .cs-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    font-weight:700;
    font-size: 1rem;
    padding:14px 26px;
    border-radius: 5px;
    border:1.5px solid transparent;
    cursor:pointer;
    transition:transform .18s ease, box-shadow .18s ease, background .2s ease, color .2s ease, border-color .2s ease;
    line-height: 1.575;
  }
  .cs-btn-primary{background:var(--primary);color: #fff !important;box-shadow:0 8px 20px rgba(140,42,30,0.28);}
  .cs-btn-primary:hover{ background:#000000; transform:translateY(-1px); box-shadow:0 12px 26px rgba(140,42,30,0.34); }
  .cs-btn-outline{ background:transparent; border-color:var(--ink); color:var(--ink); }
  .cs-btn-outline:hover{ background:var(--ink); color:#fff; }
  .cs-btn-outline-light{ background:transparent; border-color:rgba(255,255,255,0.4); color:#fff; }
  .cs-btn-outline-light:hover{border-color:#fff;background: #fff;color: #000;}
  .cs-btn-white{ background:#fff; color:#000 !important; }
  .cs-btn-white:hover{ background: #fff; }
  .cs-btn-sm{ padding:10px 18px; font-size:0.78rem; }
  .cs-btn-lg{padding:16px 32px;font-size: 14px;}
  .cta-note{ font-size:0.78rem; color:var(--ink-faint); margin-top:12px; }

  /* ---------- utility bar + nav ---------- */
  .utilbar{ background:var(--near-black); color:#D8D2C2; font-size:0.76rem; }
  .utilbar .wrap{ display:flex; justify-content:space-between; align-items:center; padding:9px 32px; gap:10px 20px; flex-wrap:wrap; }
  .utilbar .wa{ display:flex; align-items:center; gap:7px; font-family:var(--mono); }
  .utilbar .dot{ width:6px; height:6px; border-radius:50%; background:#25D366; }

  nav{ background:rgba(250,246,236,0.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:900; }
  nav .wrap{ display:flex; align-items:center; justify-content:space-between; padding:18px 32px; }
  .brand{ display:flex; align-items:center; gap:10px; }
  .brand .word{ font-family:var(--serif); font-weight:600; font-size:1.35rem; color:var(--primary-dark); }
  .brand .tag{ font-family:var(--mono); font-size:0.62rem; font-weight:600; letter-spacing:0.1em; color:var(--gold); border:1px solid var(--gold); padding:3px 8px; border-radius:2px; }
  .navlinks{ display:flex; gap:30px; font-size:0.84rem; font-weight:500; }
  .navlinks a{ color:var(--ink-soft); }
  .navlinks a:hover{ color:var(--ink); }
  @media (max-width:980px){ .navlinks{ display:none; } }

  /* ---------- section shell ---------- */
  p {letter-spacing: normal;}
  .pd_90 { padding: 75px 0; }
  .pd_60 { padding: 60px 0; }
  .section-head{max-width: 780px;margin-bottom:52px;}
  .section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
  .section-head.center .eyebrow{ justify-content:center; }
  .section-head h2{font-size: clamp(1.8rem, 3vw, 2.9rem);}
  .section-head p{margin-top:16px;font-size: 15px;color:var(--ink-soft);line-height:1.65;max-width: 610px;margin-left: auto;margin-right: auto;}
  [data-reveal]{ opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
  [data-reveal].in{ opacity:1; transform:translateY(0); }

  .sprockets{ height:12px; background-color:var(--near-black); background-image:radial-gradient(circle at center, var(--paper) 3.6px, transparent 4px); background-size:24px 12px; background-position:12px center; background-repeat:repeat-x; }

  /* ---------- hero ---------- */
  .hero{ background:var(--paper-alt); padding:72px 0 0; overflow:hidden; }
  .hero .wrap{display:grid;grid-template-columns: 1.07fr 0.95fr;gap: 30px;align-items:center;padding-bottom:64px;}
  @media (max-width:980px){ .hero .wrap{ grid-template-columns:1fr; } }
  h1.headline{font-size: clamp(2.1rem, 4vw, 3.15rem);letter-spacing:-0.01em;}
  h1.headline em{font-style:italic;font-weight: 600;color:var(--primary);}
  .hero-sub{margin-top:20px;font-size:1.02rem;color:var(--ink-soft);line-height:1.65;max-width:50ch;}
  .hero-ctas{ margin-top:30px; display:flex; gap:14px; flex-wrap:wrap; }
  .hero-stats{display:flex;gap:0;margin-top:48px;border-top:1px solid var(--line);padding-top:24px;max-width: 55ch;gap: 20px;}
  .hero-stats .stat{flex:1;padding-right: 10px;border-right:1px solid var(--line);}
  .hero-stats .stat:last-child{ border-right:none; }
  .hero-stats .stat b{ display:block; font-family:var(--serif); font-size:1.7rem; font-weight:500; color:var(--primary); }
  .hero-stats .stat span{ font-size:0.7rem; text-transform:uppercase; letter-spacing:0.04em; color:var(--ink-faint); font-weight:600; }
  .hero-stats .stat b {
    font-size: 19px;
  }

  .spec-plate{
    /* background:var(--near-black); */
    color:#EDE7D6;
    border-radius:6px;
    padding: 0px;
    position:relative;
    box-shadow:0 30px 60px rgba(20,18,16,0.28);
    transform:rotate(1.2deg);
  }
  .spec-plate img {
    border-radius: 4px;
    aspect-ratio: 1;
    object-fit: cover;
    width: 100%;
    height: 100%;
    object-position: right;
}
  .spec-plate::before{ content:''; position:absolute; inset:8px; border:1px solid rgba(169,132,63,0.4); border-radius:3px; pointer-events:none; }
  .spec-plate .sp-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:22px; }
  .spec-plate .sp-head span:first-child{ font-family:var(--serif); font-style:italic; font-size:1.2rem; color:var(--gold); }
  .spec-plate .sp-head span:last-child{ font-family:var(--mono); font-size:0.62rem; color:rgba(237,231,214,0.5); letter-spacing:0.08em; }
  .spec-row{ display:flex; justify-content:space-between; padding:13px 0; border-top:1px solid rgba(237,231,214,0.12); font-family:var(--mono); font-size:0.78rem; }
  .spec-row:last-of-type{ border-bottom:1px solid rgba(237,231,214,0.12); }
  .spec-row span:first-child{ color:rgba(237,231,214,0.5); }
  .spec-row span:last-child{ color:#EDE7D6; text-align:right; }
  .rivet{ position:absolute; width:6px; height:6px; border-radius:50%; background:rgba(169,132,63,0.6); }
  .rivet.tl{ top:14px; left:14px; } .rivet.tr{ top:14px; right:14px; } .rivet.bl{ bottom:14px; left:14px; } .rivet.br{ bottom:14px; right:14px; }
  .spec-badge{ position:absolute; bottom:-18px; left:26px; background:var(--paper); border:1px solid var(--line); border-radius:6px; padding:12px 16px; box-shadow:0 16px 30px rgba(20,18,16,0.14); }
  .spec-badge b{ display:block; font-family:var(--serif); font-size:1.2rem; color:var(--primary); }
  .spec-badge span{ font-size:0.65rem; text-transform:uppercase; letter-spacing:0.04em; color:var(--ink-faint); }
    @media (max-width:980px){
        .hero-ctas {
            justify-content: center;

        }
        .spec-plate-wrap {
            max-width: 590px;
            margin-left: auto;
            margin-right: auto;
        }
        .hero-txt {
            text-align: center;
        }
        .hero-txt p{
            margin-left: auto;
            margin-right: auto;
        }
        .hero-stats {
            text-align: left;
            margin-left: auto;
            margin-right: auto;
        }
        .hero .eyebrow {
            justify-content: center;
        }
        .hero-stats .stat {
            text-align: center;
        }
        .hero-stats {
            gap: 10px;
        }
        .hero-stats .stat:last-child {
            padding-right: 0;
        }
    }
    @media (max-width:560px){
        .hero-stats .stat b {
            font-size: 16px;
            white-space: nowrap;
        }
    }

  /* ---------- trust signal ---------- */
  .trust-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
  @media (max-width:900px){ .trust-grid{ grid-template-columns:1fr 1fr; } }
  @media (max-width:560px){ .trust-grid{ grid-template-columns:1fr; } }
  .trust-card{background:var(--paper);padding: 30px 26px;}
  .trust-card .tcode{font-family:var(--mono);font-size: 13px;color:var(--gold);letter-spacing:0.08em;margin-bottom:16px;display:block;font-weight: 600;}
  .trust-card h3{font-size: 14px;margin-bottom:10px;font-weight:700;}
  .trust-card p{font-size: 14px;line-height:1.6;color:var(--ink-soft);}

  /* ---------- problem section ---------- */
  .problem{background: linear-gradient(155deg, #000000, #3d3d3d);color:#EDE7D6;}
  .problem .section-head h2, .problem .section-head p{color: #fff;}
  .problem .section-head p{color: #fff;}
  .problem-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:rgba(237,231,214,0.12); border:1px solid rgba(237,231,214,0.12); }
  @media (max-width:820px){ .problem-grid{ grid-template-columns:1fr; } }
  .problem-card{background: var(--near-black);padding:34px 30px;}
  .problem-card .qtag{font-family:var(--mono);font-size: 13px;color:var(--primary-bright);letter-spacing:0.1em;margin-bottom:16px;display:block;font-weight: 600;}
  .problem-card h3{ font-size:1.12rem; color:#fff; margin-bottom:12px; font-weight:500; }
  .problem-card p{font-size: 0.9rem;line-height:1.65;color: #fff;}
  .problem .section-head {
        max-width: 100%;
    }

  /* ---------- solution section ---------- */
  .solution-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
  @media (max-width:820px){ .solution-grid{ grid-template-columns:1fr; } }
  .solution-card{position:relative;background: var(--paper-alt);border:1px solid var(--line);border-radius:6px;padding:28px 26px;overflow:hidden;}
  .solution-card .mark{/* position:absolute; *//* inset:8px; *//* pointer-events:none; *//* z-index:0; */}
  .solution-card .mark ellipse{ fill:none; stroke:var(--primary); stroke-width:2; stroke-dasharray:100; stroke-dashoffset:100; transition:stroke-dashoffset .6s ease; }
  .solution-card:hover .mark ellipse{ stroke-dashoffset:0; }
  .solution-card h3{ font-size:1.05rem; margin-bottom:8px; position:relative; z-index:1; font-weight:500; }
  .solution-card p{ font-size:1rem; line-height:1.6; color:var(--ink-soft); position:relative; z-index:1; }

  /* ---------- product showcase (bento) ---------- */
    .cat-grid{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:200px; gap:2px; background:var(--near-black); border:1px solid var(--near-black); }
    @media (max-width:900px){ .cat-grid{
        grid-template-columns: repeat(6,1fr);grid-auto-rows:190px;}
        a.cat-tile.g2 {
            grid-column: span 3;
            grid-row: span 1;
        }
        a.cat-tile {
            grid-column: span 2;
        }

    }

  .cat-tile{ position:relative; overflow:hidden; display:block; }
  .cat-tile.large{ grid-column:span 2; grid-row:span 2; }
  @media (min-width:901px){ .cat-tile.large .cat-info h3{ font-size:1.5rem; } }
  @media (max-width:900px){ .cat-tile.large{grid-column: span 3;grid-row:span 1;} }
  .cat-tile .img{position:absolute;inset:0;background:var(--g);width: 100%;transition:transform .6s ease;height: 100%;object-fit: cover;}
  .cat-tile:hover .img{ transform:scale(1.06); }
  .cat-tile::after{content:'';position:absolute;inset:0;background: linear-gradient(180deg, rgba(20,18,16,0) 27%, rgba(20,18,16,0.75) 100%);}
  .cat-code{ position:absolute; top:16px; left:18px; z-index:2; font-family:var(--mono); font-size:0.62rem; color:rgba(250,246,236,0.8); letter-spacing:0.08em; }
  .cat-info{ position:absolute; left:20px; right:20px; bottom:18px; z-index:2; color:#fff; }
  .cat-info h3{ color:#fff; font-size:1.1rem; font-weight:500; }

  .cat-info p{font-size: 14px;opacity:0.82;margin-top:6px;max-width: 320px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
  .cat-cta{display:inline-flex;gap:6px;margin-top:12px;font-family:var(--mono);font-size: 14px;letter-spacing:0.06em;text-transform:uppercase;color: #fff;/* opacity:0; *//* transform:translateY(6px); */transition:opacity .3s ease, transform .3s ease;font-weight: 600;}
  .cat-tile:hover .cat-cta{/* opacity:1; *//* transform:translateY(0); */}
  .g1{ --g:linear-gradient(155deg,#d8b48f,#7a4d29 65%,#3d2612); }
  .g2{ --g:linear-gradient(155deg,#c9ccc4,#6b7069 65%,#33342f); }
  .g3{ --g:linear-gradient(155deg,#9a3346,#4a1420 70%); }
  .center-cta{ text-align:center; margin-top:38px; }
    @media (max-width:560px){
      .cat-grid{ grid-template-columns:1fr; } .cat-tile.large{ grid-row:span 1 !important; }
      .cat-tile.large, a.cat-tile.g2, a.cat-tile {
        grid-column: span 1;
      }

    }

  /* ---------- partner / why choose us ---------- */
  .partner .wrap{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:40px; align-items:center; }
  @media (max-width:800px){ .partner .wrap{ grid-template-columns:1fr; } }
  .partner-visual{ position:relative; height:420px; border-radius:6px; background:linear-gradient(155deg,#4A2622,var(--near-black) 70%); overflow:hidden; }
  .partner-visual::after{ content:''; position:absolute; inset:0; background:linear-gradient(155deg,rgba(169,132,63,0.16),transparent 55%); }
  .partner-visual .frame{ position:absolute; inset:22px; border:1px solid rgba(169,132,63,0.35); border-radius:3px; }
  .partner p{ margin-top:14px; font-size:0.98rem; line-height:1.68; color:var(--ink-soft); }
  .partner-stats{ display:flex; gap:36px; margin:28px 0; flex-wrap:wrap; }
  .partner-stats div b{ display:block; font-family:var(--serif); font-size:1.7rem; color:var(--primary); font-weight:500; }
  .partner-stats div span{ font-size:0.7rem; text-transform:uppercase; letter-spacing:0.04em; color:var(--ink-faint); font-weight:600; }
  .partner-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .benefits{ background:var(--paper-alt); }
  .benefit-row {
    /* display: grid; */
    grid-template-columns: 60px 1fr;
    gap: 14px;
    padding: 28px 20px;
    border: 1px solid var(--line);
    width: calc(100%/2 - 10px);
    border-radius: 6px;
    background: #fff;
  }
  .benefit-row:first-child{/* border-top:none; */}
  .benefit-row .idx{font-family:var(--mono);font-weight:600;font-size: 15px;color:var(--gold);padding-top:4px;}
  .benefit-row h3{font-size: 16px;margin-bottom:8px;font-weight: 600;}
  .benefit-row p{font-size: 14px;color:var(--ink-soft);line-height:1.6;/* max-width:66ch; */}
  .benefit-wrap {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
  }
  .partner h2 {
    font-size: clamp(1.8rem, 3vw, 2.9rem);
  }
  @media (max-width:768px){
    .benefit-row{
      width: 100%;
    }
   }

  /* ---------- our work (contact sheet) ---------- */
  .sheet{border: none;}
  .work-grid{/* display:grid; */grid-template-columns:repeat(3,1fr);}
  @media (max-width:820px){ .work-grid{ grid-template-columns:1fr; } }
  .work-tile{ position:relative; height:340px; overflow:hidden; border-right:1px solid rgba(250,246,236,0.14); }
  .work-tile:last-child{ border-right:none; }
  .work-tile .bg{position:absolute;inset:0;background:var(--g);width: 100%;height: 100%;object-fit: cover;}
  .work-tile::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,18,16,0) 45%, rgba(20,18,16,0.7) 100%); }
  .work-tile .wcode{ position:absolute; top:16px; left:16px; z-index:2; font-family:var(--mono); font-size:0.64rem; color:rgba(250,246,236,0.75); letter-spacing:0.08em; }
  .work-tile .wlabel{ position:absolute; left:16px; bottom:16px; z-index:2; color:#fff; font-family:var(--serif); font-style:italic; font-size:1.15rem; }
  .w1{ --g:linear-gradient(155deg,#8fa0ab,#33424f 70%); } .w2{ --g:linear-gradient(155deg,#c9a668,#6d4f21 70%); } .w3{ --g:linear-gradient(155deg,#9a3346,#4a1420 70%); }
   /* Reset anchor defaults since .work-tile is now a link */
  .work-tile {
    position: relative;
    display: block;
    overflow: hidden;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
  }

  /* --- Play icon overlay --- */
  .work-tile .play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 64px;
    height: 64px;
    transform: translate(-50%, -50%) scale(0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(2px);
    opacity: 1;
    transition: opacity 0.25s ease, transform 0.25s ease, background 0.25s ease;
    pointer-events: none;
    z-index: 2;
  }

  .work-tile .play-icon svg {
    width: 26px;
    height: 26px;
    fill: #fff;
    margin-left: 3px; /* optical centering for the triangle */
  }

  .work-tile:hover .play-icon {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    background: rgba(0, 0, 0, 0.65);
  }

  .work-tile .bg {
    transition: filter 0.25s ease;
  }
  .work-tile:hover .bg {
    filter: brightness(0.75);
  }

  /* Optional: restyle GLightbox's own video container to match your brand */
  .glightbox-container .gvideo-wrapper {
    max-width: 1100px;
  }
  /* ---------- how it works (production line) ---------- */
  .how{ background:var(--paper-alt); }
  .how-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative; }
  @media (max-width:820px){ .how-row{ grid-template-columns:1fr 1fr; row-gap:34px; } }
  @media (max-width:560px){ .how-row{ grid-template-columns:1fr; } }
  .how-step{ position:relative; padding:0 22px; text-align:left; }
  .how-step .station{ display:flex; align-items:center; gap:10px; margin-bottom:18px; }
  .how-step .num{width:34px;height:34px;border-radius:50%;background:var(--near-black);color: #fff;font-family:var(--mono);font-size:0.78rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
  .how-step .line{ flex:1; height:1px; background:var(--line); }
  .how-row > .how-step:last-child .line{ display:none; }
  @media (max-width:820px){
    .how-step .line{ display:none; }
    .st_wrap {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 16px;
    }

    .st_wrap h3, .st_wrap div.station {
      margin: 0;
    }
   }
  .how-step h3{ font-size:1rem; margin-bottom:8px; font-weight:500; }
  .how-step p{ font-size:1rem; color:var(--ink-soft); line-height:1.6; }

  /* ---------- CTA dark ---------- */
  .cta-dark {
    background: linear-gradient(155deg, #000000, #3d3d3d);
    color: #EDE7D6;
    text-align: center;
  }
  .cta-dark h2{color:#fff;font-size:clamp(1.9rem, 3vw, 2.6rem);/* max-width:18ch; */margin:16px auto 0;}
  .cta-dark p{color: #fff;font-size:1rem;max-width: 640px;margin:18px auto 0;line-height:1.65;}
  .cta-dark .hero-ctas{ justify-content:center; margin-top:32px; }

  /* ---------- shipping ---------- */
  .shipping-shell{ background:var(--paper-alt); border:1px solid var(--line); border-radius:8px; padding:52px 54px; display:grid; grid-template-columns:1.1fr 0.9fr; gap:44px; align-items:center; }
  @media (max-width:860px){ .shipping-shell{ grid-template-columns:1fr; padding:36px 30px; } }
  .shipping-copy p{ margin-top:16px; font-size:0.98rem; line-height:1.7; color:var(--ink-soft); }
  .shipping-copy a.link{display:inline-block;margin-top:18px;color:var(--primary);font-weight:700;font-size: 13px;}
  .shipping-facts{ display:flex; flex-direction:column; gap:14px; }
  .fact{background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:16px 20px;display:flex;justify-content:space-between;align-items: center;}
  .fact b{ font-family:var(--serif); font-weight:500; font-size:1.3rem; color:var(--primary); }
  .fact span{ font-size:0.7rem; text-transform:uppercase; letter-spacing:0.04em; color:var(--ink-faint); font-weight:600; }

  /* ---------- sample band ---------- */
  .sample-band{background: linear-gradient(155deg, #000000, #3d3d3d);color:#fff;text-align:center;}
  .sample-band .eyebrow{ color:var(--gold-tint); justify-content:center; }
  .sample-band .eyebrow::before{ background:var(--gold-tint); }
  .sample-band h2{color:#fff;font-size:clamp(1.9rem, 3vw, 2.6rem);/* max-width:18ch; */margin:16px auto 0;}
  .sample-band p{color:rgba(255,255,255,0.82);font-size:1rem;margin:18px auto 0;line-height:1.6;max-width: 640px;}
  .sample-band .hero-ctas{ justify-content:center; margin-top:30px; }

/* ---------- blog / articles grid ---------- */
.blog-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
@media (max-width:900px) {
  .blog-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width:767px) {
  .blog-grid { grid-template-columns: 1fr; }
}
.blog-card {display: block;background: #fff;border-radius: 8px;overflow: hidden;border: 1px solid var(--line);transition: box-shadow .25s ease, transform .25s ease;display: flex;flex-direction: column;}
.blog-card:hover { transform: translateY(-3px); box-shadow: 0 20px 40px rgba(27,26,23,0.1); }
.blog-media {/* height: 200px; */overflow: hidden;background: linear-gradient(155deg,#f2f2f0,#e1e1e1);aspect-ratio: 2.06/1;}
.blog-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.blog-card:hover .blog-media img {/* transform: scale(1.06); */}
.blog-card .blog-body {padding: 20px 22px 24px;flex: 1;display: flex;flex-direction: column;}
.blog-tag {display: inline-block;font-size: 11px;font-weight: 700;letter-spacing: 0.06em;text-transform: uppercase;color: rgb(51, 51, 51);margin-bottom: 10px;}
.blog-card h3 {font-family: var(--serif);font-weight: 600;font-size: 16px;line-height: 1.35;color: var(--ink);}
.blog-card p {margin-top: 10px;font-size: 1rem;line-height: 1.6;color: var(--ink-soft);margin-bottom: 10px;}
.blog-read {
  display: block;
  align-items: center;
  gap: 6px;
  /* margin-top: 14px; */
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--primary);
  margin-top: auto;
}
  /* ---------- faq ---------- */
  .faq{ background:var(--paper-alt); }
  .faq-list{ max-width:760px; margin:0 auto; }
  .faq-item{ background:var(--paper); border:1px solid var(--line); border-radius:6px; margin-bottom:12px; overflow:hidden; }
  .faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:14px;padding:20px 22px;background:none;border:none;text-align:left;cursor:pointer;font-family:var(--sans);font-weight:600;font-size: 16px;color:var(--ink);}
  .faq-q .plus{width:26px;height:26px;border-radius:50%;background:var(--gold-tint);color: #000;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size: 20px;font-weight: 400;transition:transform .2s ease;}
  .faq-item.open .plus{ transform:rotate(45deg); }
  .faq-a{ max-height:0; overflow:hidden; transition:max-height .25s ease; }
  .faq-a p{padding:0 22px 20px;font-size: 14px;color:var(--ink-soft);line-height:1.65;}

  /* ---------- newsletter + footer ---------- */
  .newsletter{ background:var(--near-black); color:#fff; text-align:center; border-bottom:1px solid rgba(237,231,214,0.1); padding:56px 0; }
  .newsletter h3{ color:#fff; font-size:1.4rem; margin-bottom:22px; font-weight:500; }
  .nl-form{ display:flex; justify-content:center; gap:10px; max-width:420px; margin:0 auto; flex-wrap:wrap; }
  .nl-form input{ flex:1; min-width:220px; padding:13px 16px; border-radius:5px; border:1px solid rgba(237,231,214,0.2); background:rgba(237,231,214,0.06); color:#fff; font-size:0.88rem; font-family:inherit; }
  .nl-form input::placeholder{ color:rgba(237,231,214,0.4); }

  /* ---------- floating cta ---------- */
  .fab-wa{ position:fixed; right:24px; bottom:24px; z-index:950; width:54px; height:54px; border-radius:50%; background:#25D366; display:flex; align-items:center; justify-content:center; box-shadow:0 12px 26px rgba(37,211,102,0.4); transition:transform .18s ease; }
  .fab-wa:hover{ transform:scale(1.07); }
  .fab-wa svg{ width:26px; height:26px; stroke:#fff; fill:none; }
  .sticky-cta{ display:none; }
  @media (max-width:720px){
    .fab-wa{ bottom:78px; }
    .sticky-cta{ display:flex; position:fixed; left:0; right:0; bottom:0; z-index:940; background:var(--paper); border-top:1px solid var(--line); padding:10px 14px; gap:10px; box-shadow:0 -10px 22px rgba(20,18,16,0.1); }
    .sticky-cta .cs-btn{ flex:1; justify-content:center; padding:12px 14px; }
    .sticky-cta .cs-btn-outline{ flex:0 0 auto; padding:12px 15px; }
    /* body{ padding-bottom:66px; } */
    /* section{ padding:68px 0; } */
    .sample-band .hero-ctas .cs-btn {
      min-width: 220px;
    }
    .cta-dark .hero-ctas .cs-btn {
      min-width: 280px;
    }
  }
section#products {
  background: var(--paper-alt);
}
.swiper-pagination.work-pagination {
  position: static;
  margin-top: 20px;
}
.swiper-pagination-bullet-active {
    background: var(--primary);
}
@media (max-width: 1200px) {
    .b2b-page {
        padding-top: 140px;
    }
}
@media (max-width: 767px) {
    .b2b-page {
        padding-top: 120px;
    }
}
@media (max-width: 1024px) {
    .whatsapp-icon {
        right: 20px;
        bottom: 20px;
    }
}