/* ============================================================
   Fjällräven Campfire Poland 2026 — site styles
   Colors, type, and layout extracted from the approved design.
   ============================================================ */

/* ---- Fonts ---- */
@font-face{font-family:'ArcticFox';src:url('/fonts/ArcticFox-Regular.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'ArcticFox';src:url('/fonts/ArcticFox-Bold.otf') format('opentype');font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'ArcticFox';src:url('/fonts/ArcticFox-Italic.otf') format('opentype');font-weight:400;font-style:italic;font-display:swap;}
@font-face{font-family:'ArcticFoxHead';src:url('/fonts/ArcticFox-Headline.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap;}

/* ---- Reset / base ---- */
*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:#003954;}
body{font-family:'ArcticFox',system-ui,sans-serif;color:#eaf1f4;width:100%;overflow-x:hidden;}
a{color:#FB9E00;}
a:hover{color:#ffb733;}

/* ---- Layout primitives ---- */
.wrap{max-width:660px;margin:0 auto;text-align:center;}
.eyebrow{font-weight:700;font-size:15px;letter-spacing:.01em;margin:0 0 26px;color:#eaf1f4;}
.h1{font-family:'ArcticFoxHead';font-weight:400;font-size:clamp(44px,9vw,72px);line-height:.98;letter-spacing:.01em;margin:0 0 38px;color:#fff;}
.lead{font-size:17px;line-height:1.6;margin:0 0 34px;color:#dce6ea;max-width:600px;margin-left:auto;margin-right:auto;}
.lead-sm{font-size:15px;line-height:1.65;margin:0 0 8px;color:#b9c8cf;max-width:560px;margin-left:auto;margin-right:auto;}
.body{font-size:15px;line-height:1.7;margin:0;color:#dce6ea;max-width:560px;margin-left:auto;margin-right:auto;}
.body strong{font-weight:700;color:#fff;}

/* ---- Hero ---- */
.ot-hero{width:100%;aspect-ratio:16/9;max-height:520px;overflow:hidden;}
.ot-hero img{width:100%;height:100%;object-fit:cover;object-position:center 50%;display:block;}

/* ---- Badge ---- */
.ot-badge{display:flex;justify-content:center;margin-top:-150px;position:relative;z-index:2;}
.ot-badge .badge-img{width:200px;height:250px;object-fit:contain;border-radius:18px;filter:drop-shadow(0 12px 30px rgba(0,0,0,.45));}
.ot-badge .badge-ph{width:200px;height:250px;border-radius:18px;border:2px dashed rgba(255,255,255,.4);display:flex;align-items:center;justify-content:center;text-align:center;font-size:13px;color:rgba(255,255,255,.6);padding:16px;filter:drop-shadow(0 12px 30px rgba(0,0,0,.35));}

/* ---- Metrics grid ---- */
.ot-metrics{width:100%;display:grid;grid-template-columns:repeat(4,1fr);}
.ot-metrics > div{position:relative;overflow:hidden;color:#fff;min-height:190px;padding:26px 18px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:14px;}
.ot-metrics > div::before{content:"";position:absolute;inset:0;background-image:url("/contours.svg");background-repeat:no-repeat;background-size:400% 200%;opacity:.10;pointer-events:none;}
.ot-metrics > div > *{position:relative;z-index:1;}
.ot-metrics > div:nth-child(1)::before{background-position:0% 0%;}
.ot-metrics > div:nth-child(2)::before{background-position:33.333% 0%;}
.ot-metrics > div:nth-child(3)::before{background-position:66.666% 0%;}
.ot-metrics > div:nth-child(4)::before{background-position:100% 0%;}
.ot-metrics > div:nth-child(5)::before{background-position:0% 100%;}
.ot-metrics > div:nth-child(6)::before{background-position:33.333% 100%;}
.ot-metrics > div:nth-child(7)::before{background-position:66.666% 100%;}
.ot-metrics > div:nth-child(8)::before{background-position:100% 100%;}
.metric-label{font-size:12.5px;opacity:.9;margin-bottom:6px;}
.metric-value{font-weight:700;font-size:15px;letter-spacing:.04em;}
.metric-value.small{font-size:12px;letter-spacing:.03em;line-height:1.45;}
.metric-icon-img{width:auto;object-fit:contain;filter:brightness(0) invert(1);}

/* CTA tile button */
.tile-cta-lead{font-weight:700;font-size:12px;letter-spacing:.04em;line-height:1.45;}
.tile-cta-btn{display:inline-flex;align-items:center;gap:8px;background:#FB9E00;color:#003954;text-decoration:none;font-weight:700;font-size:12px;letter-spacing:.06em;padding:11px 20px;border-radius:4px;}

/* ---- Section paddings ---- */
.sec-intro{padding:26px 28px 8px;}
.sec-support{padding:44px 28px 60px;}
.sec-audience{padding:70px 28px 8px;}
.sec-why{padding:46px 28px 60px;}
.sec-ig{padding:8px 28px 58px;}
.support-title{font-weight:700;font-size:16px;margin:0 0 14px;color:#fff;}
.support-lines{font-size:15px;line-height:1.85;margin:0;color:#dce6ea;}
.audience-title{font-weight:700;font-size:19px;margin:0 0 26px;color:#fff;}

/* ---- Instagram follow card ---- */
.ig-card{position:relative;overflow:hidden;background:linear-gradient(155deg,rgba(255,255,255,.09),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.15);border-radius:24px;padding:46px 32px;text-align:center;}
.ig-badge{width:66px;height:66px;margin:0 auto 22px;border-radius:20px;background:linear-gradient(45deg,#feda75,#fa7e1e 22%,#d62976 52%,#962fbf 78%,#4f5bd5);display:flex;align-items:center;justify-content:center;box-shadow:0 10px 26px rgba(214,41,118,.4);}
.ig-eyebrow{font-weight:700;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#FB9E00;margin:0 0 12px;}
.ig-body{font-size:17px;line-height:1.55;margin:0 0 28px;color:#eaf1f4;max-width:440px;margin-left:auto;margin-right:auto;}
.ig-btn{display:inline-flex;align-items:center;gap:10px;background:#FB9E00;color:#003954;text-decoration:none;font-weight:700;font-size:14px;letter-spacing:.03em;padding:14px 28px;border-radius:999px;box-shadow:0 8px 22px rgba(251,158,0,.32);transition:transform .18s ease,box-shadow .18s ease;}
.ig-btn:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(251,158,0,.45);color:#003954;}

/* ---- Photo pair ---- */
.ot-photos{width:100%;display:grid;grid-template-columns:1fr 1fr;}
.ot-photos > div{aspect-ratio:3/4;overflow:hidden;}
.ot-photos img{width:100%;height:100%;object-fit:cover;display:block;}

/* ---- Footer ---- */
.ot-footer{position:relative;padding:90px 28px 96px;display:flex;flex-direction:column;align-items:center;gap:34px;overflow:hidden;}
.ot-footer .footer-img{width:min(1120px,94vw);height:440px;object-fit:contain;}
.ot-footer .footer-ph{width:min(1120px,94vw);height:440px;border-radius:10px;border:2px dashed rgba(255,255,255,.3);display:flex;align-items:center;justify-content:center;text-align:center;color:rgba(255,255,255,.55);font-size:14px;}

/* ---- Scroll reveal ---- */
[data-reveal]{opacity:0;transform:translateY(30px);transition:opacity .75s cubic-bezier(.4,0,.2,1),transform .75s cubic-bezier(.4,0,.2,1);}
[data-reveal].is-visible{opacity:1;transform:none;}
@media (prefers-reduced-motion: reduce){[data-reveal]{opacity:1 !important;transform:none !important;}}

/* ---- Responsive ---- */
@media (max-width:640px){
  .ot-hero{aspect-ratio:4/5;max-height:none;}
  .ot-hero img{object-position:center 42%;}
  .ot-badge{margin-top:-112px;}
  .ot-badge .badge-img,.ot-badge .badge-ph{width:172px;height:215px;}
  .ot-metrics{grid-template-columns:repeat(2,1fr);}
  .ot-metrics > div{min-height:160px;padding:22px 14px;}
}
@media (max-width:400px){
  .ot-photos{grid-template-columns:1fr;}
  .ot-photos > div{aspect-ratio:4/3;}
}

/* ---- Language switcher (added on top of the approved single-page design) ---- */
.lang-switch{position:fixed;top:14px;right:14px;z-index:50;display:flex;gap:4px;background:rgba(0,57,84,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:5px 7px;}
.lang-switch a{color:#eaf1f4;text-decoration:none;font-weight:700;font-size:12px;letter-spacing:.06em;padding:4px 9px;border-radius:999px;line-height:1;transition:background .15s ease,color .15s ease;}
.lang-switch a:hover{color:#fff;}
.lang-switch a.active{background:#FB9E00;color:#003954;}
.lang-switch a.active:hover{color:#003954;}
@media (max-width:640px){.lang-switch{top:10px;right:10px;padding:4px 6px;}.lang-switch a{padding:3px 7px;font-size:11px;}}