/* ============================================================
   Campground Launch — stylesheet
   1. self-hosted Hanken Grotesk  2. hand-written base
   3. layout + responsive (from the x-dc page)
   4. pseudo-class rules (were style-hover / style-focus)
   ============================================================ */

/* ---------- 1. fonts ---------- */
/* cyrillic-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/hanken-grotesk-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/hanken-grotesk-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: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/hanken-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;
}
/* latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/hanken-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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/hanken-grotesk-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/hanken-grotesk-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: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/hanken-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;
}
/* latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/hanken-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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/hanken-grotesk-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/hanken-grotesk-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: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/hanken-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;
}
/* latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/hanken-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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/hanken-grotesk-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/hanken-grotesk-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: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/hanken-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;
}
/* latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/hanken-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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/hanken-grotesk-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/hanken-grotesk-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: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/hanken-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;
}
/* latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/hanken-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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("fonts/hanken-grotesk-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("fonts/hanken-grotesk-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: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("fonts/hanken-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;
}
/* latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("fonts/hanken-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;
}

/* ---------- 2. base ---------- */
/* ============================================================
   Campground Launch — global styles
   Palette: deep green #034015 · sage #5FA878 · cream #F0EBE1
            ink #121212 · clay #C0531F · gold #D6A23A
   Type: Hanken Grotesk
   ============================================================ */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: #F0EBE1;
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  color: #121212;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
input, textarea { font-family: 'Hanken Grotesk', sans-serif; }
::selection { background: #C0531F; color: #fff; }

/* ---------- animations ---------- */
@keyframes cl-float   { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes cl-marquee { from { transform: translateX(0); }    to  { transform: translateX(-50%); } }

/* scroll-reveal — only active once JS adds .cl-anim to <html> */
.cl-anim [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s cubic-bezier(.22,.61,.36,1),
              transform .7s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.cl-anim [data-reveal][data-shown] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .cl-anim [data-reveal] { opacity: 1 !important; transform: none !important; transition: none; }
  .cl-marquee-track { animation: none !important; }
}

/* ---------- hover interactions (ported from style-hover) ---------- */
.cl-navlink { transition: color .15s ease; }
.cl-navlink:hover { color: #034015; }

.cl-btn-clay {
  transition: transform .15s ease, box-shadow .15s ease;
}
.cl-nav-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 13px 24px -8px rgba(192,83,31,.8);
}
.cl-hero-cta:hover,
.cl-footer-cta:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 38px -12px rgba(192,83,31,.85);
}

.cl-stat-card { transition: background .18s ease; }
.cl-stat-card:hover { background: #0A4622; }

.cl-marquee-track { animation: cl-marquee 32.4s linear infinite; }
.cl-marquee:hover .cl-marquee-track { animation-play-state: paused; }

.cl-play-btn { transition: transform .15s ease; }
.cl-play-overlay:hover .cl-play-btn { transform: scale(1.07); }

/* flywheel nodes get inline styles from JS; this just smooths the swap */
.cl-fly-node { transition: all .18s ease; }

/* ---------- 3. layout + responsive ---------- */
*{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;background:#F0EBE1}
  input,textarea{font-family:'Hanken Grotesk',sans-serif}
  ::selection{background:#C0531F;color:#fff}
  @keyframes cl-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
  @keyframes cl-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  .cl-anim [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1);will-change:opacity,transform}
  .cl-anim [data-reveal][data-shown]{opacity:1;transform:none}
  @media (prefers-reduced-motion:reduce){.cl-anim [data-reveal]{opacity:1 !important;transform:none !important;transition:none}}
  .cl-hamburger{display:none}
  @media (max-width:1160px){
    .cl-desktop-nav{display:none !important}
    .cl-desktop-actions{display:none !important}
    .cl-hamburger{display:flex !important}
  }
  .cl-mobile-menu{max-height:0;overflow:hidden;transition:max-height .34s cubic-bezier(.22,.61,.36,1)}
  .cl-mobile-menu[data-open]{max-height:600px}
  @media (max-width:620px){
    .cl-logo-track{gap:0 !important}
    .cl-logo-track > div{width:104px !important;height:62px !important;padding:1px !important}
    .cl-logo-mask{margin-top:24px !important;margin-left:-14px !important;margin-right:-14px !important;-webkit-mask-image:none !important;mask-image:none !important}
    .cl-logo-wall-inner{padding:26px 14px !important}
  }
  @media (max-width:700px){
    .cl-fly-wheel{display:none !important}
    .cl-fly-mobile{display:block !important}
    .cl-tg-card{padding:26px 22px !important}
    .cl-tg-stats{gap:12px !important}
    .cl-tg-num{font-size:21px !important}
    .cl-foot-cta{justify-content:flex-start !important}
    .cl-logo-track{animation-duration:15s !important}
  }
  @media (max-width:620px){
    .cl-shield{width:200px !important;height:auto !important}
  }
  @media (max-width:920px){
    .cl-hero-grid{padding-top:40px !important;padding-bottom:12px !important}
  }
  @media (max-width:760px){
    .cl-contact-grid{grid-template-columns:1fr !important}
  }
  @media (max-width:520px){
    .cl-field-row{grid-template-columns:1fr !important}
  }
  @media (max-width:560px){
    .cl-hero-grid{padding-top:30px !important;padding-bottom:8px !important}
    .cl-stat-grid{grid-template-columns:1fr 1fr !important;gap:32px 0 !important}
    .cl-stat-grid > div{padding:0 20px !important}
    .cl-stat-grid > div:nth-child(odd){border-left:none !important}
    .cl-stat-grid > div span{font-size:38px !important}
    .cl-stat-wrap{padding-top:28px !important}
  }
  @media (max-width:600px){
    .cl-lh-rings{grid-template-columns:1fr 1fr !important;gap:22px 10px !important}
  }

/* ---------- pseudo-class rules (were style-hover / style-focus) ---------- */
.cl-h1:hover { background:#fff; color:#034015; box-shadow:0 2px 8px -3px rgba(20,40,20,.3); }
.cl-h2:hover { color:#034015; }
.cl-h3:hover { transform:translateY(-2px); box-shadow:0 13px 24px -10px rgba(3,64,21,.55); }
.cl-h4:hover { transform:translateY(-2px); box-shadow:0 13px 24px -8px rgba(192,83,31,.8); }
.cl-h5:hover { transform:translateY(-3px); box-shadow:0 20px 38px -12px rgba(192,83,31,.85); }
.cl-h6:hover { background:rgba(214,162,58,.14); border-color:rgba(214,162,58,.85); }
.cl-h7:hover { background:rgba(214,162,58,.18); border-color:rgba(214,162,58,.75); }
.cl-h8:hover { transform:scale(1.07); }
.cl-h9:hover { animation-play-state:paused; }
.cl-f1:focus { border-color:#034015; box-shadow:0 0 0 3px rgba(3,64,21,.1); }
.cl-h10:hover { transform:translateY(-2px); box-shadow:0 20px 34px -14px rgba(192,83,31,.85); }
.cl-f2:focus { border-color:#034015; background:#fff; box-shadow:0 0 0 3px rgba(3,64,21,.1); }
.cl-h11:hover { border-color:#034015; background:#fff; }
.cl-h12:hover { transform:translateY(-3px); box-shadow:0 20px 38px -12px rgba(192,83,31,.78); }