/* =========================================================
   The Flavor Lab — shared site styles (header, footer, fonts)
   Fonts are REBOUND: original CSS asks for 'Futura PT' and
   'Proxima Nova'; we serve self-hosted Jost / Montserrat under
   those exact names so page CSS needs zero changes.
   ========================================================= */

/* ---- Futura PT  ->  Jost ---- */
@font-face{font-family:'Futura PT';src:url('/assets/fonts/jost-300.woff2') format('woff2');font-weight:300;font-display:swap;}
@font-face{font-family:'Futura PT';src:url('/assets/fonts/jost-400.woff2') format('woff2');font-weight:400;font-display:swap;}
@font-face{font-family:'Futura PT';src:url('/assets/fonts/jost-500.woff2') format('woff2');font-weight:500;font-display:swap;}
@font-face{font-family:'Futura PT';src:url('/assets/fonts/jost-600.woff2') format('woff2');font-weight:600;font-display:swap;}
@font-face{font-family:'Futura PT';src:url('/assets/fonts/jost-700.woff2') format('woff2');font-weight:700;font-display:swap;}
/* ---- Proxima Nova  ->  Montserrat ---- */
@font-face{font-family:'Proxima Nova';src:url('/assets/fonts/montserrat-400.woff2') format('woff2');font-weight:400;font-display:swap;}
@font-face{font-family:'Proxima Nova';src:url('/assets/fonts/montserrat-500.woff2') format('woff2');font-weight:500;font-display:swap;}
@font-face{font-family:'Proxima Nova';src:url('/assets/fonts/montserrat-600.woff2') format('woff2');font-weight:600;font-display:swap;}
@font-face{font-family:'Proxima Nova';src:url('/assets/fonts/montserrat-700.woff2') format('woff2');font-weight:700;font-display:swap;}

:root{
  --tfl-dark:#2b3c45;
  --tfl-orange:#ff913d;
  --tfl-cream:#f7f4ef;
  --tfl-white:#ffffff;
  --header-h:76px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;font-family:'Proxima Nova',Arial,sans-serif;color:var(--tfl-dark);}
img{max-width:100%;display:block;}
a{color:inherit;}

/* ======================= HEADER ======================= */
.tfl-header{
  position:sticky;top:0;z-index:1000;
  background:var(--tfl-dark);
  height:var(--header-h);
  display:flex;align-items:center;
  box-shadow:0 2px 12px rgba(0,0,0,.18);
}
.tfl-header .tfl-bar{
  width:100%;max-width:1400px;margin:0 auto;padding:0 28px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.tfl-logo img{height:42px;width:auto;}
.tfl-nav{display:flex;align-items:center;gap:26px;}
.tfl-nav a{
  font-family:'Futura PT','Jost',sans-serif;
  color:var(--tfl-white);text-decoration:none;font-size:15px;font-weight:500;
  letter-spacing:.02em;text-transform:uppercase;transition:color .18s;white-space:nowrap;
}
.tfl-nav a:hover{color:var(--tfl-orange);}
.tfl-cta{
  background:var(--tfl-orange);color:var(--tfl-dark)!important;
  padding:11px 22px;border-radius:6px;font-weight:700!important;
  text-transform:uppercase;letter-spacing:.03em;transition:transform .15s,background .18s;
}
.tfl-cta:hover{background:#ffa458;color:var(--tfl-dark)!important;transform:translateY(-1px);}
.tfl-burger{display:none;background:none;border:0;cursor:pointer;padding:8px;}
.tfl-burger span{display:block;width:26px;height:3px;background:#fff;margin:5px 0;border-radius:2px;transition:.25s;}

/* mobile nav */
@media (max-width:1024px){
  .tfl-burger{display:block;}
  .tfl-nav{
    position:fixed;top:var(--header-h);right:0;
    height:calc(100vh - var(--header-h));width:min(320px,80vw);
    background:var(--tfl-dark);flex-direction:column;align-items:flex-start;
    gap:0;padding:18px 26px;transform:translateX(100%);transition:transform .28s ease;
    overflow-y:auto;box-shadow:-8px 0 24px rgba(0,0,0,.25);
  }
  .tfl-nav.open{transform:translateX(0);}
  .tfl-nav a{padding:15px 0;width:100%;border-bottom:1px solid rgba(255,255,255,.08);font-size:17px;}
  .tfl-cta{margin-top:14px;text-align:center;}
  .tfl-burger.active span:nth-child(1){transform:translateY(8px) rotate(45deg);}
  .tfl-burger.active span:nth-child(2){opacity:0;}
  .tfl-burger.active span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}
}

/* ======================= HERO (rebuilt native sections) ======================= */
.tfl-hero{position:relative;min-height:52vh;display:flex;align-items:center;justify-content:center;text-align:center;
  background-size:cover;background-position:center;color:#fff;padding:80px 24px;}
.tfl-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(43,60,69,.55),rgba(43,60,69,.72));}
.tfl-hero .tfl-hero-inner{position:relative;max-width:900px;}
.tfl-hero h1{font-family:'Futura PT','Jost',sans-serif;font-weight:700;font-size:clamp(2.2rem,5vw,4rem);
  line-height:1.08;margin:0 0 20px;text-shadow:0 2px 18px rgba(0,0,0,.3);}
.tfl-hero p{font-family:'Proxima Nova',Arial,sans-serif;font-size:clamp(1.05rem,2vw,1.4rem);
  margin:0 auto 30px;max-width:680px;color:#f2f2f2;}
.tfl-hero .tfl-hero-btn{display:inline-block;background:var(--tfl-orange);color:var(--tfl-dark);
  padding:15px 34px;border-radius:8px;font-family:'Futura PT','Jost',sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;text-decoration:none;transition:transform .15s,background .18s;}
.tfl-hero .tfl-hero-btn:hover{background:#ffa458;transform:translateY(-2px);}