@charset "utf-8";

/* ============================================================
   Brazil Specialty Foods — static rebuild of the Wix site
   Layout is a fixed 1440 x 4319 canvas (the exact geometry of the
   original page), with a stacked layout for narrow screens.
   ============================================================ */

/* ---------- Self-hosted fonts (open-source substitutes) ---------- */
@font-face{font-family:"Jost";font-style:normal;font-weight:300;font-display:swap;
  src:url("../fonts/jost-300-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Jost";font-style:normal;font-weight:300;font-display:swap;
  src:url("../fonts/jost-300-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

@font-face{font-family:"Jost";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/jost-400-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Jost";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/jost-400-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

@font-face{font-family:"Jost";font-style:normal;font-weight:500;font-display:swap;
  src:url("../fonts/jost-500-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Jost";font-style:normal;font-weight:500;font-display:swap;
  src:url("../fonts/jost-500-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

@font-face{font-family:"Jost";font-style:normal;font-weight:700;font-display:swap;
  src:url("../fonts/jost-700-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Jost";font-style:normal;font-weight:700;font-display:swap;
  src:url("../fonts/jost-700-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

@font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;
  src:url("../fonts/poppins-600-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;
  src:url("../fonts/poppins-600-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

@font-face{font-family:"Amatic SC";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/amaticsc-400-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Amatic SC";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/amaticsc-400-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

@font-face{font-family:"Montserrat";font-style:normal;font-weight:700;font-display:swap;
  src:url("../fonts/montserrat-700-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:700;font-display:swap;
  src:url("../fonts/montserrat-700-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

/* ---------- Design tokens ---------- */
:root{
  --band1:#E3DF4D;
  --band2:#74AE23;
  --lime:#BADA55;
  --green:#1C800A;
  --body-text:#385539;
  --ink:#323232;
  --footer-ink:#0E2E47;
  --field-border:#8D8C8C;
  --to-top:#A0A09F;

  --sans:"Jost","Futura","Futura PT","Century Gothic",Verdana,sans-serif;
  --heads:"Poppins","Jost",sans-serif;
  --script:"Amatic SC","Jost",cursive;
  --cjk:"Noto Sans SC","Noto Sans CJK SC","Source Han Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;

  --canvas:1440;
  --canvas-h:3832px;
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  background:#fff;
  color:var(--body-text);
  font-family:var(--sans);
  font-size:18px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:auto;
}

img{max-width:100%}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:#fff;color:var(--green);padding:10px 16px;font-weight:700;
}
.skip-link:focus{left:8px;top:8px}

/* ---------- Fixed top navigation ---------- */
.site-header{
  position:fixed;top:0;left:0;right:0;height:50px;z-index:60;
}
.nav{height:50px;display:flex;justify-content:flex-end;align-items:stretch;padding:0 19px 0 0}
.nav__list{display:flex;margin:0;padding:0;list-style:none;gap:0}
.nav__link{
  display:block;line-height:50px;padding:0 12px;
  font-family:var(--heads);font-weight:600;font-size:17px;
  color:var(--green);text-decoration:none;white-space:nowrap;
}
.nav__link:hover,.nav__link:focus-visible{text-decoration:underline}
.nav__link.is-active{color:var(--ink)}

/* ---------- Fixed 1440 x 4319 canvas ---------- */
.fit{
  position:relative;
  width:100%;
  max-width:1440px;
  margin:0 auto;
  overflow:hidden;
}
.stage{
  position:relative;
  transform-origin:top left;
  width:1440px;
  height:var(--canvas-h);
  margin:0 auto;
  background:#fff;
}
.layer{
  position:absolute;left:0;top:0;
  width:1440px;height:var(--canvas-h);
  pointer-events:none;           /* children opt back in */
}
.layer a,.layer button,.layer input,.layer textarea,.layer video,.layer label{
  pointer-events:auto;
}
.abs{position:absolute;left:calc(var(--x) * 1px);top:calc(var(--y) * 1px)}

img.abs,.box,.band,.lime,.film__video,.prod,.field,.btn-send,.to-top,.hero__title,.contact__form,.footer__bg{
  width:calc(var(--w) * 1px);
  height:calc(var(--h) * 1px);
}

.anchor{position:absolute;left:0;width:1px;height:1px;top:calc(var(--y) * 1px);scroll-margin-top:56px}

/* ---------- HERO ---------- */
.hero__bg{object-fit:cover;object-position:50% 50%;display:block}
.hero__title{margin:0}
.hero__logo{display:block;width:100%;height:100%;object-fit:contain}

/* ---------- ABOUT ---------- */
.about__en,.about__zh{width:calc(var(--w) * 1px);text-align:center;color:var(--body-text)}
.about__en p,.about__zh p{margin:0;font-size:18px;line-height:28.8px}
.about__en p{font-weight:700}
.about__zh p{font-weight:400}
.about__zh{font-family:var(--sans),var(--cjk)}
.about__zh p{font-family:var(--cjk)}
.about__bg{object-fit:cover;object-position:50% 50%;display:block}

/* ---------- PRODUCTS ---------- */
.band{overflow:hidden}
.band--1{background:var(--band1)}
.band--2{background:var(--band2)}

.prod{margin:0}
.prod__img{display:block;width:100%;height:100%;object-fit:cover}
.rot{transform:rotate(var(--r))}

img.abs[src$="arrow.png"],img.abs[src$="arrow-yellow.png"]{object-fit:contain}

.cap{color:var(--green);white-space:nowrap}
.cap__en{
  display:block;
  font-family:var(--script);
  font-size:30px;line-height:30px;letter-spacing:.6px;font-weight:400;
}
.cap__zh{
  display:block;
  font-family:var(--cjk);
  font-size:23px;line-height:23px;letter-spacing:.46px;margin-top:2px;
  margin-left:calc(var(--zx,0) * 1px);
}

/* ---------- FILM / CATALOGUE CTA ---------- */
.lime{background:var(--lime)}
.film__video{object-fit:cover;background:#000;display:block}

/* ---------- CONTACT ---------- */
.contact__title{
  margin:0;color:var(--lime);
  font-family:var(--sans);font-weight:700;font-size:23px;line-height:1.2;
  white-space:nowrap;
}
.contact__form{margin:0;border:0;padding:0}

.field{
  display:block;
  background:#fff;border:1px solid var(--field-border);border-radius:0;
  color:var(--ink);font-family:var(--sans);font-weight:300;font-size:16px;
  padding:0 6px;
  -webkit-appearance:none;appearance:none;
}
.field::placeholder{color:#5E5C5C;opacity:1}
.field:focus{outline:2px solid var(--lime);outline-offset:1px}
.field--area{padding:5px 6px;resize:vertical;line-height:1.35;font-family:var(--sans)}

.btn-send{
  background:transparent;border:2px solid var(--lime);border-radius:20px;
  color:var(--ink);font-family:var(--sans);font-weight:500;font-size:13px;
  line-height:1;cursor:pointer;padding:0;
}
.btn-send:hover,.btn-send:focus-visible{background:rgba(186,218,85,.18)}

.contact__phone{
  margin:0;color:var(--body-text);font-size:18px;line-height:28.8px;white-space:nowrap;
}
.contact__phone strong{font-weight:700}
.contact__phone .fw400{font-weight:400}

.contact__mark{object-fit:contain;display:block}

.to-top{
  display:flex;align-items:center;justify-content:center;
  background:var(--to-top);border-radius:50%;
}
.to-top__chev{
  width:9px;height:9px;margin-top:3px;
  border-top:2px solid #fff;border-left:2px solid #fff;
  transform:rotate(45deg);
}

/* ---------- FOOTER ---------- */
.footer__bg{background:rgba(255,255,255,.94)}
.footer__line{
  margin:0;color:var(--footer-ink);
  font-family:var(--sans);font-weight:300;font-size:14px;line-height:18px;
  text-align:center;
}

/* ============================================================
   Narrow screens: drop the fixed canvas, stack everything
   ============================================================ */
@media (max-width:1100px){
  body{overflow-x:hidden}
  .site-header{position:sticky;background:#fff;border-bottom:1px solid var(--band1);height:auto}
  .nav{height:auto;padding:0;justify-content:center;flex-wrap:wrap}
  .nav__list{flex-wrap:wrap;justify-content:center}
  .nav__link{line-height:1.2;padding:12px 10px;font-size:15px}

  .fit{max-width:none;overflow:visible}
  .stage{width:100%;height:auto;min-width:0;padding-top:0;transform:none !important}

  .layer{position:static;width:100%;height:auto;pointer-events:auto}
  .abs{position:static;left:auto;top:auto;width:auto;height:auto}
  /* beat the higher-specificity `img.abs` rule from the desktop layout */
  img.abs{width:auto;height:auto;max-width:100%}
  .anchor{display:none}

  /* hero */
  .hero{position:relative;display:flex;justify-content:center}
  img.hero__bg{width:100%;height:auto;max-width:none}
  .hero__title{
    position:absolute;left:50%;top:47%;transform:translate(-50%,-50%);
    width:46%;height:auto;margin:0;
  }

  /* about */
  .about{padding:34px 22px 34px;
        background:linear-gradient(165deg,#1b8a0c 0%,#4ea61c 32%,#7ebd45 58%,#b6d894 82%,#cfe4b4 100%)}
  .about__bg{display:none}
  .about__en,.about__zh{width:auto;max-width:760px;margin:0 auto}
  .about__en p,.about__zh p{font-size:16px;line-height:1.65}
  .about__zh{margin-top:22px}

  /* products */
  .products{display:block;margin-top:0}
  .band{width:100%;height:auto;overflow:visible;padding:36px 18px;display:flex;flex-wrap:wrap;
        align-items:center;justify-content:center;gap:22px 26px}
  .prod{position:static;width:auto;height:auto;max-width:74vw;flex:0 0 auto}
  .prod__img{width:auto;max-width:74vw;height:auto;max-height:300px;transform:none}
  .band img.abs[src$="arrow.png"],.band img.abs[src$="arrow-yellow.png"]{display:none}
  .band > img.abs:not([src$="arrow.png"]):not([src$="arrow-yellow.png"]){
     width:auto;max-width:74vw;height:auto;max-height:130px;object-fit:contain;display:block
  }
  .cap{position:static;width:100%;text-align:center;order:3;flex:1 0 100%}

  /* film */
  .film{padding:26px 0 0;background:#fff}
  .lime{display:none}
  .film__video{width:100%;height:auto;aspect-ratio:846/480;object-fit:cover}

  /* contact */
  .contact{padding:34px 22px 30px}
  .contact__title{font-size:21px;margin-bottom:18px}
  .contact__form{width:100%;max-width:460px}
  .contact__form .field{width:100%;height:38px;font-size:15px}
  .contact__form .field--area{height:110px}
  .contact__form .field[style*="--y:64"],.btn-send{margin-top:12px}
  .contact__form .field[style*="--y:64"][style*="--w:211"]{margin-left:0}
  .btn-send{width:140px;height:34px;margin-top:16px}
  .contact__phone{font-size:16px;line-height:1.6;margin-top:24px;white-space:normal}
  img.contact__mark{position:static;display:block;width:60px;height:auto;margin:20px 0 0}
  .to-top{display:none}

  /* footer */
  .footer{padding:18px 12px;text-align:center}
  .footer__bg{display:none}
  .footer__line{position:static;width:auto;font-size:13px;line-height:1.5}
}