@import url("brand-waves.css");
/* Homepage presentation inspired by the approved Kelly Stella business card.
 * Palette and metallic finishes are defined in theme.css. */
.home-page { color: var(--brand-ink); }
.home-page h1, .home-page h2, .home-page h3 { font-weight: 500; }
.home-page section p { line-height: 1.65; }
.home-page .btn-primary, .home-page .btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 14px 28px;
  border: 1px solid rgba(var(--brand-rgb), .5);
  border-radius: 999px;
  background: var(--brand-button-gradient);
  color: var(--section-heading);
  text-decoration: none;
  text-shadow: none;
  box-shadow: 0 6px 18px rgba(var(--black-rgb), .12);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.home-page .btn-primary:hover, .home-page .btn-secondary:hover {
  background: var(--section-heading);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(var(--black-rgb), .18);
}
.home-page .btn-primary:focus-visible, .home-page .btn-secondary:focus-visible {
  outline: 3px solid var(--brand-link);
  outline-offset: 4px;
}
.home-page .video-header { height: clamp(660px, 88svh, 880px); }
.home-page .video-header video {
  left: auto;
  right: 0;
  top: 0;
  width: 63%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  transform: none;
  object-position: center;
}
.home-page .content-wrapper {
  width: 55%;
  height: 100%;
  padding: 36px 5% 95px 4%;
  background: var(--silver-gradient);
  border-radius: 0 0 35% 0;
  border-right: 5px solid var(--silver-light);
  box-shadow: 16px 0 0 rgba(var(--brand-rgb), .85);
}
.home-page .video-header .content { width: 100%; padding: 0; color: var(--brand-ink); }
.home-page .icon-wrapper { width: clamp(150px, 18vw, 245px); max-width: 100%; margin-bottom: 12px; }
.home-page .content h1 {
  font-size: clamp(2.7rem, 4.6vw, 4.7rem);
  line-height: 1.1;
  color: var(--brand-ink);
  text-shadow: none;
  margin-bottom: 18px;
  letter-spacing: -.025em;
}
.home-page .hero-brand-line { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 0 auto 20px; max-width: 410px; }
.home-page .hero-brand-line::before, .home-page .hero-brand-line::after { content: ''; height: 1px; flex: 1; background: var(--silver-dark); }
.home-page .hero-brand-line span { font-size: .8rem; letter-spacing: .28em; text-transform: uppercase; white-space: nowrap; }
.home-page .hero-brand-line b { font-family: var(--font-heading); font-size: 1.55rem; font-weight: 400; color: var(--brand-link); margin: 0 7px; vertical-align: middle; }
.home-page .video-header p { font-size: 1.1rem; font-weight: 500; line-height: 1.5; color: var(--brand-copy); text-shadow: none; margin-bottom: 25px; }
.home-page .apparel-section { min-height: auto; padding: 85px 7%; background: var(--silver-gradient); border: 0; color: var(--brand-ink); }
.home-page .apparel-section .container { width: 100%; gap: 70px; }
.home-page .schedule-copy { flex: 1; max-width: 650px; text-align: left; }
.home-page .brand-eyebrow { display: block; color: var(--brand-link); font-size: .78rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; margin-bottom: 16px; }
.home-page .apparel-section h2 { color: var(--brand-ink); text-shadow: none; font-size: clamp(2.2rem, 3.6vw, 3.5rem); line-height: 1.2; }
.home-page .apparel-section p { color: var(--brand-copy); text-shadow: none; font-size: 1.1rem; margin-left: 0; }
.home-page .apparel-video { flex-shrink: 0; width: 280px; height: 460px; border: 4px solid var(--silver-light); box-shadow: 0 0 0 2px var(--brand), 0 20px 45px rgba(var(--black-rgb), .2); }
.home-page #section1 { min-height: 65vh; }
.home-page #section1 h2 { max-width: 1000px; margin-left: auto; margin-right: auto; font-size: clamp(2rem, 3.5vw, 3.5rem); }
.home-page .section2-left, .home-page .section3-right { background: var(--silver-gradient); }
.home-page #section2 h2, .home-page #section3 h2 { font-size: clamp(2.2rem, 3.8vw, 3.8rem); }
.home-page .video-showcase-section { padding: 90px 7%; }
.home-page .video-showcase-copy h2 { font-size: clamp(2.2rem, 3.4vw, 3.3rem); line-height: 1.15; text-shadow: 0 2px 3px rgba(var(--black-rgb), .3); }
.home-page .video-showcase-copy p { text-shadow: none; }
.home-page .featured-video-card { border: 1px solid var(--silver-dark); border-radius: 16px; }
.home-page .featured-video-play { color: var(--section-heading); box-shadow: 0 0 0 10px rgba(var(--brand-rgb), .2); }
.home-page .connect-section.section-gradient-light { position: relative; min-height: 470px; padding: 80px 24px 140px; border: 0; }
.home-page .connect-section h2 { font-size: clamp(2rem, 3.2vw, 3rem); }
.home-page .social-links a { box-shadow: 0 6px 18px rgba(var(--black-rgb), .2); }
.home-page .home-community-inner { padding: 85px 24px; }
.home-page .home-community-heading h2 { font-size: clamp(2.4rem, 4.5vw, 4rem); color: var(--silver-light); text-shadow: 0 2px 4px rgba(var(--black-rgb), .3); }
.home-page .home-community-heading p { color: var(--silver-light); text-shadow: none; }
.home-page .home-community-cards { grid-template-columns: repeat(auto-fit, minmax(240px, 360px)); justify-content: center; }
.home-page .home-community-card { border: 1px solid var(--silver-mid); border-radius: 14px; }
.home-page .home-community-card .community-card-label { color: var(--brand-link); }
.home-page .btn-secondary-community { text-decoration: none; }
@media (max-width: 900px) and (min-width: 769px) {
  .home-page .content-wrapper { width: 60%; padding-left: 3%; padding-right: 5%; }
  .home-page .apparel-section .container { gap: 30px; }
}
@media (max-width: 768px) {
  .home-page .video-header { height: auto; padding-bottom: 310px; }
  .home-page .video-header video { width: 100%; height: 350px; top: auto; bottom: 0; }
  .home-page .content-wrapper { width: 100%; height: auto; padding: 32px 24px 38px; border: 0; border-radius: 0 0 12% 0; box-shadow: 0 6px 0 var(--brand); }
  .home-page .icon-wrapper { width: 155px; }
  .home-page .content h1 { font-size: clamp(2.55rem, 10vw, 3.7rem); }
  .home-page .hero-brand-line span { font-size: .7rem; letter-spacing: .2em; }
  .home-page .apparel-section { padding: 60px 24px; }
  .home-page .schedule-copy { text-align: center; }
  .home-page .apparel-section .container { gap: 35px; }
  .home-page .apparel-video { width: min(280px, 100%); height: 460px; }
  .home-page #section1 { padding: 64px 24px; }
  .home-page .section2-left, .home-page .section3-right { padding: 55px 24px; }
  .home-page .video-showcase-section { padding: 65px 24px; }
  .home-page .connect-section.section-gradient-light { min-height: 430px; padding: 65px 24px 105px; }
  .home-page .home-community-inner { padding: 65px 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .home-page .btn-primary, .home-page .btn-secondary { transition: none; }
  .home-page .btn-primary:hover, .home-page .btn-secondary:hover { transform: none; }
}

/* One continuous ribbon language at every homepage section boundary.
 * Photo panels keep their full-bleed layout; text sections reserve ribbon space. */
.home-page > section {
  position: relative;
  border-top: 0;
  border-bottom: 0;
}
.home-page > .apparel-section { padding-bottom: 125px; }
.home-page > #section1 { padding-bottom: 125px; }
.home-page > .video-showcase-section,
.home-page > .paid-content-section { padding-bottom: 130px; }
.home-page > .home-community-section .home-community-inner { padding-bottom: 135px; }
.home-page > #section2 .section2-left,
.home-page > #section3 .section3-right { padding-bottom: 110px; }
@media (max-width: 768px) {
  .home-page > .apparel-section { padding-bottom: 95px; }
  .home-page > #section1 { padding-bottom: 100px; }
  .home-page > .video-showcase-section,
  .home-page > .paid-content-section { padding-bottom: 100px; }
  .home-page > .home-community-section .home-community-inner { padding-bottom: 100px; }
  .home-page > #section2 .section2-left,
  .home-page > #section3 .section3-right { padding-bottom: 55px; }
}

/* Class features share a continuous surface, with inset sculpted photo frames. */
.home-page #section2.class-feature,
.home-page #section3.class-feature {
  min-height: auto;
  padding: 85px 7% 120px;
  background: var(--silver-gradient);
  display: block;
}
.home-page #section3.class-feature {
  background: var(--section-gradient-light);
  background-color: var(--white);
}
.home-page .class-feature-inner {
  width: min(100%, 1100px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(40px, 6vw, 90px);
  align-items: center;
}
.home-page .class-feature-copy { min-width: 0; text-align: left; }
.home-page .class-feature-copy::before {
  content: '';
  display: block;
  width: 56px;
  height: 3px;
  margin-bottom: 24px;
  background: var(--brand-button-gradient);
}
.home-page .class-feature-copy h2 { line-height: 1.2; margin-bottom: 22px; }
.home-page .class-feature-copy p { max-width: 490px; margin: 0 0 24px; font-size: 1.15rem; }
.home-page .class-feature-photo {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 440px;
  margin: 12px auto;
  border-radius: 90px 24px 90px 24px;
}
.home-page .class-feature-photo::before {
  content: '';
  position: absolute;
  inset: -9px 12px 12px -12px;
  z-index: -1;
  background: linear-gradient(140deg, var(--brand), var(--silver-mid));
  border-radius: inherit;
  transform: rotate(-3deg);
}
.home-page .class-feature-photo img {
  display: block;
  width: 100%;
  height: auto;
  border: 5px solid var(--white);
  border-radius: inherit;
  box-shadow: 0 18px 35px rgba(var(--black-rgb), .17);
}
.home-page .class-feature--bungee .class-feature-inner { grid-template-columns: .85fr 1.15fr; }
.home-page .class-feature--bungee .class-feature-copy { grid-column: 2; grid-row: 1; }
.home-page .class-feature--bungee .class-feature-photo {
  grid-column: 1;
  grid-row: 1;
  max-width: 340px;
  border-radius: 24px 90px 24px 24px;
}
.home-page .class-feature--bungee .class-feature-photo::before {
  inset: 12px -12px -9px 12px;
  transform: rotate(3deg);
}
@media (max-width: 768px) {
  .home-page #section2.class-feature,
  .home-page #section3.class-feature { padding: 60px 28px 100px; }
  .home-page .class-feature-inner,
  .home-page .class-feature--bungee .class-feature-inner { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .home-page .class-feature-copy,
  .home-page .class-feature--bungee .class-feature-copy { grid-column: 1; grid-row: 1; text-align: center; }
  .home-page .class-feature-copy::before { margin: 0 auto 20px; }
  .home-page .class-feature-copy p { margin-left: auto; margin-right: auto; }
  .home-page .class-feature-photo,
  .home-page .class-feature--bungee .class-feature-photo { grid-column: 1; grid-row: 2; width: min(100%, 400px); }
  .home-page .class-feature--bungee .class-feature-photo { max-width: 310px; }
}

.home-page #section1.purpose-section { min-height: auto; padding: 80px 7% 120px; background: var(--section-gradient-dark); }
.home-page .purpose-inner { width: min(1180px, 100%); margin: auto; }
.home-page .purpose-intro { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(30px, 5vw, 80px); text-align: left; margin-bottom: 40px; }
.home-page #section1 .purpose-intro h2 { font-size: clamp(2.2rem, 3.7vw, 3.6rem); line-height: 1.15; margin: 0; }
.home-page #section1 .purpose-copy p { font-size: 1.1rem; color: var(--silver-light); margin: 0 0 22px; }
.home-page .purpose-photo { margin: 0; padding: 5px; border-radius: 65px 16px 65px 16px; background: linear-gradient(120deg, var(--brand), var(--silver-light), var(--silver-dark)); box-shadow: 0 18px 40px rgba(var(--black-rgb), .2); }
.home-page .purpose-photo img { display: block; width: 100%; height: auto; border-radius: 60px 12px 60px 12px; }
@media (max-width: 768px) {
  .home-page #section1.purpose-section { padding: 60px 24px 90px; }
  .home-page .purpose-intro { grid-template-columns: minmax(0, 1fr); gap: 24px; margin-bottom: 25px; }
  .home-page .purpose-photo { border-radius: 30px 12px 30px 12px; }
  .home-page .purpose-photo img { border-radius: 25px 9px 25px 9px; }
}


/* A compact credentials invitation above the footer credit. */
.home-page .home-certification-link {
  display: flex; align-items: center; gap: clamp(16px, 3vw, 30px);
  width: min(860px, calc(100% - 38px)); box-sizing: border-box;
  margin: 36px auto 32px; padding: clamp(22px, 3vw, 34px);
  border: 1px solid var(--silver-mid); border-left: 4px solid var(--brand);
  border-radius: 42px 14px 42px 14px; background: var(--silver-gradient);
  color: var(--brand-ink); text-decoration: none;
  box-shadow: 0 12px 32px rgba(var(--black-rgb), .22);
  transition: transform .22s ease, box-shadow .22s ease;
}
.home-certification-seal { display: grid; place-items: center; flex: 0 0 72px; height: 72px; border-radius: 50%; background: var(--section-gradient-dark); color: var(--brand-highlight-soft); }
.home-certification-seal svg { width: 43px; height: 43px; }
.home-certification-copy { flex: 1; min-width: 0; text-align: left; }
.home-certification-title { display: block; font-family: var(--font-heading); font-size: clamp(1.4rem, 2.4vw, 2rem); font-weight: 500; line-height: 1.2; }
.home-certification-description { display: block; margin-top: 9px; color: var(--brand-copy); font-size: .95rem; line-height: 1.5; }
.home-certification-arrow { display: grid; place-items: center; flex: 0 0 46px; height: 46px; border-radius: 50%; background: var(--brand-button-gradient); color: var(--section-heading); font-size: 1.6rem; }
.home-page .home-certification-link:hover { color: var(--brand-ink); transform: translateY(-3px); box-shadow: 0 15px 36px rgba(var(--brand-rgb), .18); }
.home-page .home-certification-link:focus-visible { outline: 3px solid var(--brand-highlight-soft); outline-offset: 5px; }
@media (max-width: 540px) {
  .home-page .home-certification-link { flex-wrap: wrap; gap: 16px; padding: 24px; }
  .home-certification-seal { flex-basis: 54px; height: 54px; }
  .home-certification-seal svg { width: 34px; height: 34px; }
  .home-certification-copy { flex-basis: calc(100% - 70px); }
  .home-certification-arrow { margin-left: auto; flex-basis: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) { .home-page .home-certification-link { transition: none; } .home-page .home-certification-link:hover { transform: none; } }