/* ==========================================================================
   Traffox — shared stylesheet
   Fonts: Inter (400/500/600) + Schibsted Grotesk (400/500/600/700/800),
   self-hosted below (no Google Fonts request — DSGVO).
   ========================================================================== */

/* cyrillic-ext */
@font-face { font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap;
  src:url("../fonts/inter-cyrillic-ext.woff2") format('woff2');
  unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
/* cyrillic */
@font-face { font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap;
  src:url("../fonts/inter-cyrillic.woff2") format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
/* greek-ext */
@font-face { font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap;
  src:url("../fonts/inter-greek-ext.woff2") format('woff2');
  unicode-range:U+1F00-1FFF; }
/* greek */
@font-face { font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap;
  src:url("../fonts/inter-greek.woff2") format('woff2');
  unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF; }
/* vietnamese */
@font-face { font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap;
  src:url("../fonts/inter-vietnamese.woff2") format('woff2');
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
/* latin-ext */
@font-face { font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap;
  src:url("../fonts/inter-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; }
/* latin */
@font-face { font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap;
  src:url("../fonts/inter-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:'Inter'; font-style:normal; font-weight:500; font-display:swap;
  src:url("../fonts/inter-cyrillic-ext.woff2") format('woff2');
  unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap;
  src:url("../fonts/inter-cyrillic.woff2") format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap;
  src:url("../fonts/inter-greek-ext.woff2") format('woff2');
  unicode-range:U+1F00-1FFF; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap;
  src:url("../fonts/inter-greek.woff2") format('woff2');
  unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap;
  src:url("../fonts/inter-vietnamese.woff2") format('woff2');
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap;
  src:url("../fonts/inter-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:'Inter'; font-style:normal; font-weight:500; font-display:swap;
  src:url("../fonts/inter-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:'Inter'; font-style:normal; font-weight:600; font-display:swap;
  src:url("../fonts/inter-cyrillic-ext.woff2") format('woff2');
  unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap;
  src:url("../fonts/inter-cyrillic.woff2") format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap;
  src:url("../fonts/inter-greek-ext.woff2") format('woff2');
  unicode-range:U+1F00-1FFF; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap;
  src:url("../fonts/inter-greek.woff2") format('woff2');
  unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap;
  src:url("../fonts/inter-vietnamese.woff2") format('woff2');
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap;
  src:url("../fonts/inter-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:'Inter'; font-style:normal; font-weight:600; font-display:swap;
  src:url("../fonts/inter-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:'Schibsted Grotesk'; font-style:normal; font-weight:400; font-display:swap;
  src:url("../fonts/schibsted-grotesk-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:'Schibsted Grotesk'; font-style:normal; font-weight:400; font-display:swap;
  src:url("../fonts/schibsted-grotesk-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:'Schibsted Grotesk'; font-style:normal; font-weight:500; font-display:swap;
  src:url("../fonts/schibsted-grotesk-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:'Schibsted Grotesk'; font-style:normal; font-weight:500; font-display:swap;
  src:url("../fonts/schibsted-grotesk-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:'Schibsted Grotesk'; font-style:normal; font-weight:600; font-display:swap;
  src:url("../fonts/schibsted-grotesk-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:'Schibsted Grotesk'; font-style:normal; font-weight:600; font-display:swap;
  src:url("../fonts/schibsted-grotesk-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:'Schibsted Grotesk'; font-style:normal; font-weight:700; font-display:swap;
  src:url("../fonts/schibsted-grotesk-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:'Schibsted Grotesk'; font-style:normal; font-weight:700; font-display:swap;
  src:url("../fonts/schibsted-grotesk-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:'Schibsted Grotesk'; font-style:normal; font-weight:800; font-display:swap;
  src:url("../fonts/schibsted-grotesk-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:'Schibsted Grotesk'; font-style:normal; font-weight:800; font-display:swap;
  src:url("../fonts/schibsted-grotesk-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; }

/* ==========================================================================
   Base
   ========================================================================== */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;font-family:'Inter',system-ui,sans-serif;color:#011627;background:#fff;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip;}
h1,h2,h3,h4,h5,h6{margin:0;font-family:'Schibsted Grotesk','Inter',sans-serif;font-weight:700;letter-spacing:-0.02em;line-height:1.08;color:#011627;}
p{margin:0;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;}
::selection{background:#499F68;color:#fff;}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px;}
.wrap-narrow{max-width:760px;margin:0 auto;padding:0 24px;}

/* ==========================================================================
   Header / nav
   ========================================================================== */
.site-header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,0.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid #E2E8E5;}
.site-header .wrap{height:74px;display:flex;align-items:center;justify-content:space-between;gap:24px;}
.brand{display:flex;align-items:center;gap:11px;}
.brand img{height:34px;width:auto;display:block;}
.brand-name{font-family:'Schibsted Grotesk',sans-serif;font-weight:800;font-size:23px;letter-spacing:-0.03em;color:#011627;}
.brand-name--light{color:#fff;font-size:22px;}

.nav-desktop{display:flex;align-items:center;gap:34px;}
.nav-link{font-size:15px;font-weight:500;color:#1d3242;transition:color .15s;}
.nav-link:hover{color:#499F68;}
.nav-cta{display:inline-flex;align-items:center;gap:8px;background:#499F68;color:#fff;font-weight:600;font-size:15px;padding:11px 20px;border-radius:11px;box-shadow:0 6px 16px rgba(73,159,104,0.26);transition:background .18s,transform .18s;}
.nav-cta:hover{background:#3d8a59;transform:translateY(-1px);}

.burger{display:none;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid #E2E8E5;border-radius:11px;background:#fff;cursor:pointer;color:#011627;}

.drawer-overlay{position:fixed;inset:0;z-index:70;background:rgba(1,22,39,0.45);backdrop-filter:blur(2px);}
.drawer-overlay[hidden]{display:none;}
.drawer{position:absolute;top:0;right:0;width:min(86vw,360px);height:100%;background:#fff;padding:24px;display:flex;flex-direction:column;gap:6px;box-shadow:-20px 0 50px rgba(1,22,39,0.18);}
.drawer-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;}
.drawer-close{width:42px;height:42px;border:1px solid #E2E8E5;border-radius:11px;background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.drawer-link{padding:14px 12px;border-radius:10px;font-size:17px;font-weight:500;}
.drawer-link:hover{background:#F4F7F5;}
.drawer-cta{margin-top:14px;display:inline-flex;align-items:center;justify-content:center;gap:8px;background:#499F68;color:#fff;font-weight:600;font-size:16px;padding:15px 20px;border-radius:12px;}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:600;font-size:16px;padding:16px 28px;border-radius:12px;cursor:pointer;transition:background .18s,transform .18s,box-shadow .18s;}
.btn-primary{background:#499F68;color:#fff;box-shadow:0 10px 28px rgba(73,159,104,0.34);}
.btn-primary:hover{background:#56b078;transform:translateY(-1px);}
.btn-primary-pop:hover{background:#56b078;transform:scale(1.03);box-shadow:0 16px 36px rgba(73,159,104,0.42);}
.btn-outline-dark{color:#fff;border:1px solid rgba(255,255,255,0.22);}
.btn-outline-dark:hover{background:rgba(255,255,255,0.07);}
.btn-outline{border:1px solid #d6ded9;color:#011627;padding:14px 20px;font-size:15px;}
.btn-outline:hover{border-color:#499F68;background:#F4F7F5;}

/* ==========================================================================
   Cards / hover lifts
   ========================================================================== */
.lift-sm{transition:box-shadow .2s,transform .2s;}
.lift-sm:hover{box-shadow:0 12px 28px rgba(1,22,39,0.07);transform:translateY(-2px);}
.lift-md{transition:box-shadow .2s,transform .2s;}
.lift-md:hover{box-shadow:0 14px 34px rgba(1,22,39,0.08);transform:translateY(-3px);}
.lift-lg{transition:transform .2s ease,box-shadow .2s ease;}
.lift-lg:hover{transform:translateY(-4px);box-shadow:0 16px 38px rgba(1,22,39,0.10);}
.lift-dark{transition:transform .2s ease,box-shadow .2s ease;}
.lift-dark:hover{transform:translateY(-4px);box-shadow:0 30px 72px rgba(1,22,39,0.32);}

.eyebrow{color:#499F68;font-size:13px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;}

.footer-link{color:#8fa3b2;}
.footer-link:hover{color:#fff;}
.green-hover:hover{color:#499F68;}

/* ==========================================================================
   FAQ accordion
   ========================================================================== */
.faq{border:1px solid #E2E8E5;border-radius:16px;overflow:hidden;background:#fff;}
.faq-q{width:100%;background:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:24px 26px;text-align:left;font-family:'Inter',sans-serif;}
.faq-q-text{font-family:'Schibsted Grotesk',sans-serif;font-weight:700;font-size:18px;color:#011627;}
.faq-chevron{display:flex;flex:none;transition:transform .3s ease;color:#499F68;}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease;}
.faq-a p{color:#5B6B63;font-size:16px;line-height:1.7;padding:0 26px 24px;}
.faq[data-open="1"] .faq-chevron{transform:rotate(180deg);}

/* ==========================================================================
   Scroll reveal
   ========================================================================== */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1);}
.reveal.is-visible{opacity:1;transform:none;}
.reveal-fade{opacity:0;transition:opacity .6s cubic-bezier(.16,1,.3,1);}
.reveal-fade.is-visible{opacity:1;}
.reveal-pop{opacity:0;transform:translateY(30px) scale(.95);transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1);}
.reveal-pop.is-visible{opacity:1;transform:none;}
.reveal-left{opacity:0;transform:translateX(-40px);transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1);}
.reveal-left.is-visible{opacity:1;transform:none;}
.reveal-right{opacity:0;transform:translateX(40px);transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1);}
.reveal-right.is-visible{opacity:1;transform:none;}

@keyframes tfxIconBounce{0%{transform:scale(0);}60%{transform:scale(1.12);}100%{transform:scale(1);}}
.icon-bounce.is-visible i{animation:tfxIconBounce .5s cubic-bezier(.34,1.56,.64,1) both;}

@media (prefers-reduced-motion: reduce){
  .reveal,.reveal-fade,.reveal-pop,.reveal-left,.reveal-right{opacity:1 !important;transform:none !important;transition:none !important;}
  .icon-bounce i{animation:none !important;}
}

/* ==========================================================================
   Responsive grids (shared layout hooks used across pages)
   ========================================================================== */
@media (max-width:940px){
  .nav-desktop{display:none !important;}
  .burger{display:inline-flex !important;}
  .hero-grid{grid-template-columns:1fr !important;}
  .hero-grid .hero-art{order:-1;min-height:240px !important;}
  .split-grid{grid-template-columns:1fr !important;}
  .split-grid .split-art{min-height:260px !important;}
  .grid-2col{grid-template-columns:1fr !important;}
  .grid-3col{grid-template-columns:1fr !important;}
  .foot-grid{grid-template-columns:1fr 1fr !important;}
  .trust-grid{grid-template-columns:1fr 1fr !important;}
}
@media (max-width:560px){
  .grid-4col{grid-template-columns:1fr !important;}
  .trust-grid{grid-template-columns:1fr !important;}
  .tl-line{display:none !important;}
  .foot-grid{grid-template-columns:1fr !important;}
}
