@font-face {
  font-family: bebas;
  src: url("fonts/BebasNeue.woff2") format("woff2"),
       url("fonts/BebasNeue.woff") format("woff");
}
@font-face {
  font-family: chandler;
  src: url("fonts/Chandler42.woff2") format("woff2"),
       url("fonts/Chandler42.woff") format("woff");
  font-weight: normal;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { overflow-x: hidden; }
body {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: none;
  -webkit-font-smoothing: antialiased !important;
  font-family: 'chandler', Arial, sans-serif;
  color: #444334;
  font-size: 16px;
  line-height: 1.7;
  background: url("images/bg.jpg") top center repeat;
  position: relative;
  overflow-x: hidden;
  width: 100%;
}

ul { list-style: none; margin: 0; padding: 0; }

a, a:hover {
  -webkit-transition: color 0.2s linear;
  transition: color 0.2s linear;
  text-decoration: none;
}

#container { width: 100%; max-width: 1040px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; }

/* ---------- HEADER ---------- */
.header-wrapper { position: absolute; top: 0; left: 0; right: 0; }

header {
  position: fixed;
  z-index: 999 !important;
  top: 0; right: 0; left: 0;
  background: url("images/bg-header.png") bottom center no-repeat;
  background-size: cover;
  padding: 20px 0 0 0;
  height: 110px;
  line-height: 75px;
}

header #logo { position: absolute; left: 3%; top: 50%; transform: translateY(-50%); z-index: 5; }
header #logo img { display: block; height: 75px; width: auto; }

nav#main {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
}
nav#main ul { font-family: 'bebas'; margin: 0 auto; }
nav#main li { display: inline-block; font-size: 28px; }
nav#main a { color: #f6e7c2; padding: 8px 1.6vw; text-transform: uppercase; }
nav#main a:hover {
  color: #f6e7c2;
  background: url("images/ITP_Stroke-6c.png");
  background-size: 100% 100%;
}

/* hamburger toggle (hidden on desktop) */
.nav-toggle { display: none; }
#nav-burger {
  display: none;
  position: absolute;
  right: 6%;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 28px;
  cursor: pointer;
  z-index: 1001;
}
#nav-burger span {
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  height: 3px;
  background: #f6e7c2;
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
#nav-burger span:nth-child(1) { top: 0; }
#nav-burger span:nth-child(2) { top: 50%; transform: translateY(-50%); }
#nav-burger span:nth-child(3) { bottom: 0; }

header #socials { position: absolute; right: 3%; top: 50%; transform: translateY(-50%); }
header #socials li { float: left; margin: 0 0 0 0.8vw; }
header #socials a {
  color: #f6e7c2;
  display: inline-flex;
  align-items: center;
  transition: all 0.2s linear;
}
header #socials svg { width: 20px; height: 20px; fill: #f6e7c2; display: block; }
header #socials a:hover { opacity: 0.8; }

/* socials inside the mobile drawer (hidden on desktop) */
.mobile-socials { display: none; }

/* ---------- SECTION HEADINGS ---------- */
#section-head {
  font-family: 'bebas';
  color: #444334;
  font-size: 64px;
  text-transform: uppercase;
  text-align: center;
  margin: 0 0 50px 0;
}
#section-head span {
  background: url("images/ITP_Stroke-2.png") bottom center no-repeat;
  padding: 0 40px 14px 40px;
  background-size: 100% 55%;
  display: inline-block;
  max-width: 100%;
  box-sizing: border-box;
}

/* ---------- EXPERIENCE HERO ---------- */
#experience {
  padding-top: 200px;
  padding-bottom: 120px;
  text-align: center;
}
.exp-eyebrow {
  font-family: 'bebas';
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 22px;
  color: #a9683a;
  margin: 0 0 18px 0;
}
#hero-title {
  font-family: 'bebas';
  color: #444334;
  font-size: 130px;
  line-height: 0.92;
  text-transform: uppercase;
  margin: 0 0 30px 0;
  max-width: 100%;
  word-break: break-word;
}
.exp-hero-body {
  max-width: 680px;
  margin: 0 auto 28px auto;
  font-size: 21px;
  line-height: 1.7;
  color: #444334;
}
.exp-tag {
  font-family: 'bebas';
  text-transform: uppercase;
  font-size: 26px;
  letter-spacing: 1px;
  color: #444334;
  margin: 0 auto 40px auto;
  max-width: 620px;
  line-height: 1.3;
}

/* ---------- SHARED CTA BUTTON ---------- */
.exp-btn {
  margin: 0 auto;
  width: 50%;
  max-width: 460px;
  text-transform: uppercase;
  font-size: 30px;
  font-family: 'bebas';
  text-align: center;
}
.exp-btn a {
  color: #f6e7c2 !important;
  padding: 22px 60px;
  display: block;
  background: url("images/ITP_Button-Stroke-Sm.png") !important;
  background-size: 100% 100% !important;
}
.exp-btn a:hover {
  color: #f6e7c2;
  background: url("images/ITP_Button-Stroke-Sm-hover.png") !important;
  background-size: 100% 100% !important;
}

/* ---------- HOW IT WORKS ---------- */
#how { margin: 0 0 130px 0; }
.steps {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 50px;
}
.steps li {
  text-align: center;
  border-top: 2px solid #444334;
  padding-top: 28px;
}
.steps h3 {
  font-family: 'bebas';
  text-transform: uppercase;
  color: #a9683a;
  font-size: 28px;
  letter-spacing: 1px;
  margin: 0 0 16px 0;
}
.steps p {
  font-size: 17px;
  line-height: 1.7;
  color: #444334;
}

/* ---------- STORIES / TESTIMONIALS ---------- */
#stories { margin: 0 0 130px 0; }
.testimonials {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
}
.testimonial {
  background: rgba(246, 231, 194, 0.35);
  border: 2px solid #444334;
  padding: 40px 38px;
}
.testimonial .quote {
  font-size: 20px;
  line-height: 1.7;
  color: #444334;
  margin: 0 0 26px 0;
}
.testimonial .attribution {
  border-top: 1px dashed #444334;
  padding-top: 18px;
  display: flex;
  flex-direction: column;
}
.testimonial .name {
  font-family: 'bebas';
  text-transform: uppercase;
  font-size: 26px;
  letter-spacing: 1px;
  color: #a9683a;
}
.testimonial .meta {
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #444334;
  opacity: 0.8;
}

/* ---------- VIDEOS ---------- */
#videos { margin: 0 0 130px 0; }
#videos #section-head span {
  background: url("images/ITP_Stroke-6.png") bottom center no-repeat;
  padding: 0 40px 16px 40px;
  background-size: 100% 70%;
  display: inline-block;
  max-width: 100%;
  box-sizing: border-box;
}
#videos .video-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  margin: 0 0 20px 0;
}
#videos .video-wrapper iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: 10px solid #FFF;
  box-shadow: 0 0 15px 0 rgba(68,67,52,0.5);
}
.epyt-gallery-allthumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 30px;
}
.epyt-gallery-thumb a { display: block; }
.epyt-gallery-img-box {
  border: 1px solid #444334;
  padding: 3%;
  display: block;
}
.epyt-gallery-img-box img { width: 100%; display: block; }
.epyt-gallery-title { margin: 6px 0 0 0; font-size: 15px !important; }
.epyt-gallery-title:hover {
  color: #f6e7c2;
  background: url("images/video-scribble.png") !important;
  background-size: 100% 100% !important;
}

/* ---------- ABOUT ---------- */
#about { margin: 0 0 130px 0; }
#about #section-head span {
  background: url("images/ITP_Stroke-2.png") bottom center no-repeat;
  padding: 0 40px 14px 40px;
  background-size: 100% 55%;
  display: inline-block;
  max-width: 100%;
  box-sizing: border-box;
}
#about #col-1 { float: left; width: 49%; }
#about #col-2 { float: right; width: 49%; }
#about #col-1 img { display: block; width: 100%; height: auto; max-width: 100%; }
#about a { color: #444334; border-bottom: 1px dashed #444334; }
#about a:hover { color: #444334; border-bottom: 1px solid #444334; }
#about p { margin: 0 0 20px 0; font-size: 16px; line-height: 1.7; color: #444334; }
#about p:last-child { margin: 0; }
#about::after { content: ""; display: block; clear: both; }

/* ---------- CONTACT CTA ---------- */
#apply { margin: 0 0 130px 0; text-align: center; }
.apply-body {
  max-width: 680px;
  margin: 0 auto 18px auto;
  font-size: 20px;
  line-height: 1.7;
  color: #444334;
}
.apply-body .contact-link {
  color: #a9683a;
  border-bottom: 2px solid #a9683a;
  font-weight: 600;
}
.apply-body .contact-link:hover { color: #444334; border-bottom-color: #444334; }
.apply-tagline {
  font-family: 'bebas';
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 26px;
  color: #a9683a;
  margin: 0 auto 40px auto;
}

/* ---------- FOOTER ---------- */
footer {
  background: url("images/bg-footer.png") top center repeat;
  padding: 20px 0 15px 0;
  text-align: center;
  color: #FFF;
  font-size: 12px;
}
footer a { color: #f6e7c2; text-decoration: underline; }
footer a:hover { color: #FFF; text-decoration: none; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1100px) {
  #container { padding: 0 18px; }
}

/* tablets: keep the full nav but scale it down */
@media (max-width: 900px) {
  #experience { padding-top: 150px; }
  #hero-title { font-size: 84px; }
  nav#main a { padding: 8px 0.9vw; }
  nav#main li { font-size: 22px; }
  .exp-btn { width: 80%; }
}

/* phones: hamburger drawer + tighter layout */
@media (max-width: 760px) {
  header { height: 84px; }
  header #socials { display: none; }
  #nav-burger { display: block; }
  #experience { padding-top: 120px; }

  /* torn header texture draped over the header/body seam */
  header::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    margin-top: -14px;      /* pull up so the solid part overlaps the header edge (no gap) */
    height: 32px;
    background: url("images/header-edge.png") top center no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
    z-index: 2;
  }

  /* dim backdrop behind the open drawer */
  .nav-toggle:checked ~ nav#main::before {
    content: "";
    position: fixed;
    left: 0; right: 0; top: 84px; bottom: 0;
    background: rgba(12, 11, 8, 0.55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: -1;
    animation: drawer-fade 0.35s ease both;
  }

  nav#main {
    position: fixed;
    left: 0; right: 0; top: 84px;
    transform: none;
    background: #1d1b16 url("images/bg-header.png") top center repeat-x;
    background-size: 100% 84px;
    background-color: #1d1b16;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.42s cubic-bezier(0.4, 0.0, 0.2, 1);
    box-shadow: inset 0 6px 12px -8px rgba(0,0,0,0.8), 0 16px 30px -8px rgba(0,0,0,0.55);
    border-top: 1px solid rgba(246,231,194,0.18);
  }
  nav#main ul { padding: 6px 0 4px 0; }
  nav#main li {
    display: block;
    font-size: 24px;
    border-bottom: 1px solid rgba(246,231,194,0.08);
  }
  nav#main li:last-child { border-bottom: none; }
  nav#main a {
    display: block;
    padding: 16px 8%;
    color: #f6e7c2;
    letter-spacing: 1px;
    position: relative;
    transition: background 0.2s ease, padding-left 0.2s ease, color 0.2s ease;
  }
  /* subtle scribble-stroke accent bar on tap/hover */
  nav#main a::before {
    content: "";
    position: absolute;
    left: 0; top: 50%;
    transform: translateY(-50%) scaleY(0);
    width: 4px; height: 60%;
    background: #a9683a;
    transition: transform 0.22s ease;
    transform-origin: center;
  }
  nav#main a:hover,
  nav#main a:active {
    background: rgba(246,231,194,0.06);
    color: #fff;
    padding-left: calc(8% + 10px);
  }
  nav#main a:hover::before,
  nav#main a:active::before { transform: translateY(-50%) scaleY(1); }

  .nav-toggle:checked ~ nav#main {
    max-height: calc(100vh - 84px);
    overflow-y: auto;
  }

  /* staggered fade-in of drawer items when opened */
  nav#main li, .mobile-socials { opacity: 0; }
  .nav-toggle:checked ~ nav#main li,
  .nav-toggle:checked ~ nav#main .mobile-socials {
    animation: drawer-item 0.4s ease forwards;
  }
  .nav-toggle:checked ~ nav#main li:nth-child(1) { animation-delay: 0.06s; }
  .nav-toggle:checked ~ nav#main li:nth-child(2) { animation-delay: 0.10s; }
  .nav-toggle:checked ~ nav#main li:nth-child(3) { animation-delay: 0.14s; }
  .nav-toggle:checked ~ nav#main li:nth-child(4) { animation-delay: 0.18s; }
  .nav-toggle:checked ~ nav#main li:nth-child(5) { animation-delay: 0.22s; }
  .nav-toggle:checked ~ nav#main li:nth-child(6) { animation-delay: 0.26s; }
  .nav-toggle:checked ~ nav#main li:nth-child(7) { animation-delay: 0.30s; }
  .nav-toggle:checked ~ nav#main .mobile-socials { animation-delay: 0.34s; }

  @keyframes drawer-item {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @keyframes drawer-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  /* socials row inside the open drawer */
  .mobile-socials {
    display: flex;
    justify-content: center;
    gap: 26px;
    padding: 22px 0 28px 0;
    margin: 8px 8% 0 8%;
    border-top: 1px solid rgba(246,231,194,0.2);
  }
  .mobile-socials li { display: inline-flex; margin: 0; border: none; }
  .mobile-socials a {
    display: inline-flex;
    align-items: center;
    padding: 0;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }
  .mobile-socials a::before { display: none; }
  .mobile-socials svg { width: 26px; height: 26px; fill: #f6e7c2; display: block; }
  .mobile-socials a:hover,
  .mobile-socials a:active {
    opacity: 0.85;
    background: none;
    transform: translateY(-3px) scale(1.12);
  }

  /* burger -> X when open (smoother) */
  #nav-burger span { transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), opacity 0.2s ease; }
  .nav-toggle:checked ~ #nav-burger span:nth-child(1) { top: 50%; transform: translateY(-50%) rotate(45deg); }
  .nav-toggle:checked ~ #nav-burger span:nth-child(2) { opacity: 0; transform: translateY(-50%) scaleX(0); }
  .nav-toggle:checked ~ #nav-burger span:nth-child(3) { bottom: auto; top: 50%; transform: translateY(-50%) rotate(-45deg); }

  #hero-title { font-size: 60px; }
  .exp-hero-body { font-size: 18px; }

  #section-head { font-size: 44px; }
  #section-head span { padding: 0 16px 12px 16px; }
  #videos #section-head span { padding: 0 16px 14px 16px; }

  .steps { grid-template-columns: 1fr; gap: 36px; }
  .testimonials { grid-template-columns: 1fr; }
  .exp-btn { width: 88%; }
  .exp-btn a { padding: 18px 28px; font-size: 26px; }

  #about #col-1, #about #col-2 { float: none; width: 100%; }
  #about #col-2 { margin-top: 30px; }
  .epyt-gallery-allthumbs { grid-template-columns: repeat(2, 1fr); }
  .apply-body { font-size: 18px; }
}

@media (max-width: 420px) {
  #hero-title { font-size: 46px; }
  #section-head { font-size: 36px; }
  .epyt-gallery-allthumbs { grid-template-columns: 1fr; }
  .exp-btn a { padding: 16px 20px; font-size: 23px; }
}

/* ---------- PRIVACY POLICY PAGE (matches morganwallen.com #container.page) ---------- */
#container.page {
  padding: 200px 0 150px 0;
}

#container.page h2.page-title {
  font-family: 'bebas';
  color: #444334;
  font-size: 70px;
  text-transform: uppercase;
  margin: 0 0 30px 0;
  background: url("images/ITP_Stroke-4.png?v=1.01") bottom left no-repeat;
  padding: 0 80px 20px 0px;
  background-size: 100% 80%;
  display: inline-block;
}

#container.page p {
  margin: 0 0 25px 0;
  line-height: 160%;
}

#container.page ul {
  margin: 0 0 25px 0;
  padding-left: 22px;
  line-height: 160%;
}

#container.page li {
  margin: 0 0 10px 0;
}

#container.page a {
  color: #444334;
  border-bottom: 1px dashed #444334;
  text-decoration: none;
}

#container.page a:hover {
  border-bottom: 1px solid #444334;
}

#container.page strong {
  font-weight: 700;
}

@media (max-width: 760px) {
  #container.page { padding: 130px 0 90px 0; }
  #container.page h2.page-title { font-size: 44px; padding: 0 24px 12px 24px; }
}

/* ---------- CLUB / FANCLUB PAGE (clone of Club Wallen) ---------- */
#container.page .section-head-club {
  font-family: 'bebas';
  color: #444334;
  font-size: 50px;
  text-transform: uppercase;
  text-align: center;
  margin: 60px 0 25px 0;
}

#container.page ul.steps {
  list-style: none;
  padding-left: 0;
  margin: 0 0 30px 0;
}

#container.page ul.steps li {
  margin: 0 0 35px 0;
}

#container.page ul.steps h3 {
  font-family: 'bebas';
  color: #444334;
  font-size: 30px;
  text-transform: uppercase;
  margin: 0 0 10px 0;
  background: url("images/ITP_Stroke-6c.png") bottom left no-repeat;
  background-size: 60% 100%;
  display: inline-block;
  padding: 0 12px 8px 0;
}

#container.page ul.steps p {
  margin: 0;
  line-height: 160%;
}

.join-btn {
  display: inline-block;
  font-family: 'bebas';
  font-size: 30px;
  letter-spacing: 1px;
  color: #f6e7c2 !important;
  text-transform: uppercase;
  text-decoration: none !important;
  border: none !important;
  padding: 18px 60px;
  background: url("images/ITP_Button-Stroke-Sm.png") center center no-repeat;
  background-size: 100% 100%;
  transition: opacity 0.2s linear;
}

.join-btn:hover { opacity: 0.85; }

.join-btn-sm { font-size: 22px; padding: 14px 40px; }

@media (max-width: 760px) {
  #container.page .section-head-club { font-size: 34px; margin: 45px 0 20px 0; }
  .join-btn { font-size: 24px; padding: 16px 40px; }
}