/* =====================================================================
   THOMASBRUSH.COM
   GLOBAL KAJABI THEME
   ===================================================================== */


/* =====================================================================
   FONTS
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Libre+Bodoni:ital,wght@0,400;0,500;1,400&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;1,8..60,400&family=Inter:wght@400;500;600&display=swap');


/* =====================================================================
   DESIGN SYSTEM
   ===================================================================== */

:root {

  /* BACKGROUNDS */
  --tb-black: #090908;
  --tb-black-soft: #0d0d0c;
  --tb-panel: #11100f;

  /* TEXT */
  --tb-cream: #b7a890;
  --tb-cream-bright: #c7b79d;
  --tb-muted: #9d907c;
  --tb-muted-dark: #70675b;

  /* ACCENT */
  --tb-orange: #bd5118;
  --tb-orange-bright: #d05b1c;

  /* BORDERS */
  --tb-border-soft: rgba(183, 168, 144, 0.12);
  --tb-border-medium: rgba(183, 168, 144, 0.16);
  --tb-border-strong: rgba(183, 168, 144, 0.24);

  /* DIVIDER */
  --tb-divider-gradient:
    linear-gradient(
      90deg,
      rgba(183, 168, 144, 0) 0%,
      rgba(183, 168, 144, 0.02) 8%,
      rgba(183, 168, 144, 0.04) 18%,
      rgba(183, 168, 144, 0.07) 30%,
      rgba(183, 168, 144, 0.12) 42%,
      rgba(183, 168, 144, 0.16) 50%,
      rgba(183, 168, 144, 0.12) 58%,
      rgba(183, 168, 144, 0.07) 70%,
      rgba(183, 168, 144, 0.04) 82%,
      rgba(183, 168, 144, 0.02) 92%,
      rgba(183, 168, 144, 0) 100%
    );

  /* DISPLAY */
  --tb-display:
    "Libre Bodoni",
    Didot,
    "Didot LT STD",
    "Bodoni 72",
    "Bodoni MT",
    "Times New Roman",
    serif;

  /* BODY */
  --tb-serif:
    "Source Serif 4",
    Georgia,
    serif;

  /* SANS */
  --tb-sans:
    "Inter",
    Helvetica,
    Arial,
    sans-serif;

  /* LAYOUT */
  --tb-content-width: 1440px;
}


/* =====================================================================
   GLOBAL FOUNDATION
   ===================================================================== */

html {
  scroll-behavior: smooth;
  background: var(--tb-black) !important;
}

body {
  margin: 0;

  background: var(--tb-black) !important;
  color: var(--tb-muted) !important;

  font-family: var(--tb-serif) !important;

  font-size: 18px;
  font-weight: 400;
  line-height: 1.6;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  text-rendering: optimizeLegibility;
}

main {
  background: var(--tb-black) !important;
}

* {
  box-sizing: border-box;
}


/* =====================================================================
   KAJABI SECTION FOUNDATION
   ===================================================================== */

section,
.section,
.section-sm,
.section-lg {
  color: var(--tb-muted);
}


/* =====================================================================
   HEADER DIVIDER
   ===================================================================== */

header,
.header {

  background: rgba(9, 9, 8, 0.97) !important;

  color: var(--tb-cream);

  border-top: 0 !important;
  border-right: 0 !important;
  border-left: 0 !important;

  border-bottom-width: 1px !important;
  border-bottom-style: solid !important;
  border-bottom-color: transparent !important;

  border-image-source: var(--tb-divider-gradient) !important;
  border-image-slice: 1 !important;

  box-shadow: none !important;
}


/* =====================================================================
   SECTION DIVIDERS
   ===================================================================== */

main [id^="section-"],
main [data-section-id],

#main-content [id^="section-"],
#main-content [data-section-id],

body > [id^="section-"],
body > [data-section-id] {

  border-top-width: 1px !important;
  border-top-style: solid !important;
  border-top-color: transparent !important;

  border-right: 0 !important;
  border-bottom: 0 !important;
  border-left: 0 !important;

  border-image-source: var(--tb-divider-gradient) !important;
  border-image-slice: 1 !important;

  box-shadow: none !important;
}


/* =====================================================================
   REMOVE DUPLICATE INTERNAL SECTION BORDERS
   ===================================================================== */

main .section,
main .section-sm,
main .section-lg,

#main-content .section,
#main-content .section-sm,
#main-content .section-lg {

  border: 0 !important;
  border-image: none !important;

  box-shadow: none !important;
}


.tb-section,
.tb-hero,
.tb-story,
.tb-contact {

  border-top: 0 !important;
  border-bottom: 0 !important;

  border-image: none !important;

  box-shadow: none !important;
}


/* =====================================================================
   TEXT SELECTION
   ===================================================================== */

::selection {
  background: var(--tb-orange);
  color: var(--tb-black);
}


/* =====================================================================
   ALL HEADINGS
   EDITORIAL SMALL CAPS
   ===================================================================== */

/*
   Type headings normally:

   Thomas Brush
   Selected Works
   The Marriage of Film & Games

   Do NOT type them in all caps.
*/

h1,
h2,
h3,
h4,
h5,
h6,

h1 *,
h2 *,
h3 *,
h4 *,
h5 *,
h6 *,

.tb-hero__title,
.tb-card__title,
.tb-watch-item__title {

  font-family: var(--tb-display) !important;

  color: var(--tb-cream) !important;

  font-weight: 400 !important;

  font-optical-sizing: auto;

  font-variant-caps: small-caps !important;

  font-feature-settings:
    "smcp" 1,
    "kern" 1 !important;

  text-transform: none !important;

  font-style: normal !important;
}


/* Prevent Kajabi bold overrides */

h1 strong,
h1 b,
h2 strong,
h2 b,
h3 strong,
h3 b,
h4 strong,
h4 b,
h5 strong,
h5 b,
h6 strong,
h6 b {

  font-family: inherit !important;

  font-weight: 400 !important;
}


/* =====================================================================
   H1
   ===================================================================== */

h1 {

  margin-top: 0;
  margin-bottom: 26px;

  font-size:
    clamp(68px, 7.7vw, 126px) !important;

  line-height: 1 !important;

  letter-spacing: 0.24em !important;
}


/* =====================================================================
   H2
   ===================================================================== */

h2 {

  margin-top: 0;
  margin-bottom: 28px;

  font-size:
    clamp(40px, 4.3vw, 68px) !important;

  line-height: 1.08 !important;

  letter-spacing: 0.18em !important;
}


/* =====================================================================
   H3
   ===================================================================== */

h3 {

  margin-top: 0;
  margin-bottom: 12px;

  font-size:
    clamp(28px, 2.5vw, 40px) !important;

  line-height: 1.12 !important;

  letter-spacing: 0.16em !important;
}


/* =====================================================================
   H4
   ===================================================================== */

h4 {

  margin-top: 0;
  margin-bottom: 10px;

  font-size:
    clamp(23px, 2vw, 32px) !important;

  line-height: 1.15 !important;

  letter-spacing: 0.15em !important;
}


/* =====================================================================
   H5
   ===================================================================== */

h5 {

  margin-top: 0;
  margin-bottom: 8px;

  font-size:
    clamp(19px, 1.6vw, 25px) !important;

  line-height: 1.18 !important;

  letter-spacing: 0.14em !important;
}


/* =====================================================================
   H6
   ===================================================================== */

h6 {

  margin-top: 0;
  margin-bottom: 8px;

  font-size:
    clamp(16px, 1.3vw, 20px) !important;

  line-height: 1.2 !important;

  letter-spacing: 0.13em !important;
}


/* =====================================================================
   SMALL CAPS UTILITY
   ===================================================================== */

.tb-smallcaps {

  font-family: var(--tb-display) !important;

  color: var(--tb-cream) !important;

  font-weight: 400 !important;

  font-variant-caps: small-caps !important;

  font-feature-settings:
    "smcp" 1,
    "kern" 1 !important;

  text-transform: none !important;

  letter-spacing: 0.18em !important;
}


/* =====================================================================
   BODY COPY
   ===================================================================== */

p,
li {

  font-family: var(--tb-serif) !important;

  color: var(--tb-muted) !important;

  font-size: 18px;
  font-weight: 400;

  line-height: 1.62;

  letter-spacing: normal !important;

  font-variant-caps: normal !important;
}

p {
  margin-top: 0;
  margin-bottom: 18px;
}

strong,
b {
  color: var(--tb-cream);
}


/* =====================================================================
   ORANGE SANS LABEL
   ===================================================================== */

.tb-label {

  display: block;

  margin: 0 0 10px 0;

  color: var(--tb-orange) !important;

  font-family: var(--tb-sans) !important;

  font-size: 12px !important;
  font-weight: 600 !important;

  line-height: 1.2 !important;

  letter-spacing: 0.28em !important;

  text-transform: uppercase !important;

  font-style: normal !important;

  font-variant-caps: normal !important;
}


.tb-eyebrow {

  display: block;

  margin-bottom: 10px;

  color: var(--tb-orange) !important;

  font-family: var(--tb-sans) !important;

  font-size: 10px !important;
  font-weight: 600 !important;

  line-height: 1.2;

  letter-spacing: 0.25em !important;

  text-transform: uppercase !important;

  font-style: normal !important;

  font-variant-caps: normal !important;
}


/* =====================================================================
   LINKS
   ===================================================================== */

a {

  color: inherit;

  text-decoration: none;

  transition:
    color 180ms ease,
    opacity 180ms ease,
    border-color 180ms ease,
    background-color 180ms ease;
}

a:hover {
  color: var(--tb-orange-bright);
}


/* =====================================================================
   HEADER
   ===================================================================== */

header .container,
.header .container {

  max-width: var(--tb-content-width);
}


/* =====================================================================
   HEADER NAVIGATION
   ===================================================================== */

header a,
.header a,
header nav a,
.header nav a,
.header__content a,
.header__nav a {

  font-family: var(--tb-sans) !important;

  color: var(--tb-cream) !important;

  font-size: 10px !important;
  font-weight: 500 !important;

  line-height: 1 !important;

  letter-spacing: 0.21em !important;

  text-transform: uppercase !important;

  font-variant-caps: normal !important;

  transition:
    color 180ms ease,
    opacity 180ms ease !important;
}


/* =====================================================================
   HEADER MENU HOVER
   ===================================================================== */

header a:hover,
header a:focus,

.header a:hover,
.header a:focus,

header nav a:hover,
header nav a:focus,

.header nav a:hover,
.header nav a:focus,

.header__content a:hover,
.header__content a:focus,

.header__nav a:hover,
.header__nav a:focus {

  color: var(--tb-orange) !important;

  opacity: 1 !important;
}


/* HEADER LOGO */

header img,
.header img {

  border-radius: 0 !important;

  box-shadow: none !important;
}


/* =====================================================================
   BUTTONS
   IMPORTANT: ONLY STYLE KAJABI CTA BUTTONS.
   DO NOT TARGET BARE <button> ELEMENTS OR GENERIC .button CLASSES,
   BECAUSE WISTIA USES THOSE FOR PLAYER CONTROLS.
   ===================================================================== */

.btn,
a.btn,
.btn-primary,
.btn-secondary,
form button[type="submit"],
input[type="submit"] {

  appearance: none;

  background: transparent !important;

  color: var(--tb-cream) !important;

  border-width: 1px !important;
  border-style: solid !important;
  border-color: var(--tb-orange) !important;

  border-radius: 0 !important;

  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;

  font-family: var(--tb-sans) !important;

  font-size: 10px !important;
  font-weight: 600 !important;

  line-height: 1 !important;

  letter-spacing: 0.20em !important;

  text-transform: uppercase !important;

  font-variant-caps: normal !important;

  padding: 16px 27px !important;

  box-shadow: none !important;

  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    color 180ms ease;
}


/* BUTTON HOVER */

.btn:hover,
a.btn:hover,
.btn-primary:hover,
.btn-secondary:hover,
form button[type="submit"]:hover,
input[type="submit"]:hover {

  background: var(--tb-orange) !important;

  border-color: var(--tb-orange) !important;

  color: var(--tb-black) !important;

  opacity: 1 !important;
}


/* =====================================================================
   FORCE KAJABI CTA BUTTONS SQUARE
   ===================================================================== */

.btn,
a.btn,
.btn-primary,
.btn-secondary,
form button[type="submit"],

.btn *,
a.btn *,

.btn::before,
.btn::after,

a.btn::before,
a.btn::after,

.btn-wrapper,
[class*="btn_wrapper"] {

  border-radius: 0 !important;

  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}


/* =====================================================================
   CUSTOM SECTION STRUCTURE
   ===================================================================== */

.tb-section {
  padding: 90px 0;
}

.tb-section--compact {
  padding: 60px 0;
}

.tb-container {

  width:
    min(
      calc(100% - 80px),
      var(--tb-content-width)
    );

  margin-left: auto;
  margin-right: auto;
}


/* =====================================================================
   SMALL ORANGE RULE
   ===================================================================== */

.tb-rule {

  display: block;

  width: 30px;
  height: 1px;

  margin: 18px 0 24px;

  background: var(--tb-orange);
}


/* =====================================================================
   KAJABI FEATURE CARDS
   EQUAL HEIGHT
   ===================================================================== */

/*
   This is intentionally targeted ONLY at rows containing
   an actual .feature card.

   It does NOT alter Kajabi's column widths.
*/

@media (min-width: 901px) {

  /* Row gets height from tallest card */
  .row:has(.feature) {
    align-items: stretch !important;
  }


  /* All columns in that row stretch equally */
  .row:has(.feature) > [class*="col-"] {

    display: flex !important;
    flex-direction: column !important;

    align-self: stretch !important;
  }


  /* Immediate Kajabi wrapper fills column height */
  .row:has(.feature) > [class*="col-"] > * {

    display: flex !important;
    flex-direction: column !important;

    flex: 1 1 auto !important;

    width: 100% !important;
  }


  /* Common Kajabi block wrapper */
  .row:has(.feature) > [class*="col-"] > .block {

    display: flex !important;
    flex-direction: column !important;

    flex: 1 1 auto !important;

    width: 100% !important;
  }


  /* Actual bordered feature card fills available height */
  .row:has(.feature) .feature {

    display: flex !important;
    flex-direction: column !important;

    flex: 1 1 auto !important;

    width: 100% !important;
    height: 100% !important;
  }


  /* Common internal wrappers */
  .row:has(.feature) .feature__inner,
  .row:has(.feature) .feature-inner {

    display: flex !important;
    flex-direction: column !important;

    flex: 1 1 auto !important;

    width: 100% !important;
    height: 100% !important;
  }


  /* Text/content area consumes remaining vertical space */
  .row:has(.feature) .feature__body,
  .row:has(.feature) .feature__content,
  .row:has(.feature) .feature-body,
  .row:has(.feature) .feature-content {

    display: flex !important;
    flex-direction: column !important;

    flex: 1 1 auto !important;
  }
}


/* =====================================================================
   FEATURE IMAGES
   ===================================================================== */

.feature img {

  display: block !important;

  width: 100% !important;

  height: auto !important;

  max-width: 100% !important;

  object-fit: contain !important;

  aspect-ratio: auto !important;

  border-top:
    2px solid
    var(--tb-orange) !important;

  border-radius: 0 !important;
}


/* =====================================================================
   FEATURE TEXT PADDING
   ===================================================================== */

.feature h1,
.feature h2,
.feature h3,
.feature h4,
.feature h5,
.feature h6 {

  padding-left: 28px !important;
  padding-right: 28px !important;
}


.feature p {

  padding-left: 28px !important;
  padding-right: 28px !important;
}


/* First heading beneath image */

.feature h1:first-of-type,
.feature h2:first-of-type,
.feature h3:first-of-type,
.feature h4:first-of-type,
.feature h5:first-of-type,
.feature h6:first-of-type {

  margin-top: 22px !important;
}


/* Bottom breathing room */

.feature p:last-child {

  margin-bottom: 28px !important;
}


/* =====================================================================
   CUSTOM GRID
   ===================================================================== */

.tb-grid {

  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 18px;

  align-items: stretch;
}


/* =====================================================================
   CUSTOM TB CARDS
   ===================================================================== */

.tb-card {

  position: relative;

  display: flex;

  flex-direction: column;

  height: 100%;

  overflow: hidden;

  background: var(--tb-black-soft);

  border:
    1px solid
    var(--tb-border-soft);

  border-radius: 0 !important;
}


.tb-card__image-wrap {

  position: relative;

  overflow: hidden;

  flex: 0 0 auto;

  border-top:
    2px solid
    var(--tb-orange);
}


.tb-card__image {

  display: block;

  width: 100%;

  aspect-ratio: 16 / 9;

  object-fit: cover;

  transform: scale(1);

  transition:
    transform 450ms cubic-bezier(.2,.7,.2,1),
    opacity 250ms ease;
}


.tb-card:hover .tb-card__image {

  transform: scale(1.025);
}


.tb-card__content {

  display: flex;

  flex-direction: column;

  flex: 1 1 auto;

  padding: 22px 28px 28px;
}


.tb-card__title {

  margin-bottom: 10px;

  color: var(--tb-cream) !important;

  font-family: var(--tb-display) !important;

  font-size: 20px;

  font-weight: 400;

  line-height: 1.15;

  letter-spacing: 0.14em !important;

  font-variant-caps: small-caps !important;

  text-transform: none !important;
}


.tb-card__description {

  color: var(--tb-muted) !important;

  font-family: var(--tb-serif) !important;

  font-size: 16px;

  line-height: 1.5;

  letter-spacing: normal !important;
}


/* =====================================================================
   PRESS
   ===================================================================== */

.tb-press {

  margin-top: 22px;

  padding-top: 20px;

  border-top:
    1px solid
    var(--tb-border-soft);
}


.tb-press__quote {

  margin-bottom: 17px;

  color: var(--tb-cream) !important;

  font-family: var(--tb-serif) !important;

  font-size: 18px;

  font-style: italic;

  line-height: 1.4;

  letter-spacing: normal !important;
}


.tb-press__logo {

  display: block;

  width: auto;
  height: auto;

  max-width: 120px;
  max-height: 40px;

  object-fit: contain;

  opacity: 0.9;
}


/* =====================================================================
   PRESS QUOTE + LOGO
   ===================================================================== */

.tb-press-quote {

  margin: 22px auto 0 !important;

  max-width: 90%;

  color: var(--tb-cream) !important;

  font-family: var(--tb-serif) !important;

  font-size: 17px !important;

  font-weight: 400 !important;

  font-style: italic !important;

  line-height: 1.4 !important;

  letter-spacing: 0 !important;

  text-align: center;

  font-variant-caps: normal !important;
}


.tb-press-logo {

  display: block !important;

  width: auto !important;
  height: auto !important;

  max-width: 110px !important;
  max-height: 34px !important;

  margin: 16px auto 4px !important;

  object-fit: contain;

  border: 0 !important;

  opacity: 0.92;
}


/* =====================================================================
   FILM META
   ===================================================================== */

.tb-meta {

  display: flex;

  align-items: center;

  gap: 14px;

  margin-top: 15px;

  color: var(--tb-muted) !important;

  font-family: var(--tb-sans) !important;

  font-size: 9px !important;

  letter-spacing: 0.15em;

  text-transform: uppercase;

  font-variant-caps: normal !important;
}


.tb-status {

  color: var(--tb-orange) !important;

  font-family: var(--tb-serif) !important;

  font-style: italic;
}


/* =====================================================================
   HERO
   ===================================================================== */

.tb-hero {

  position: relative;

  display: flex;

  align-items: stretch;

  min-height: 700px;

  overflow: hidden;
}


.tb-hero__image {

  position: absolute;

  top: 0;
  right: 0;

  width: 67%;
  height: 100%;

  object-fit: cover;

  object-position: center;

  opacity: 0.94;
}


.tb-hero::after {

  content: "";

  position: absolute;

  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      rgba(9, 9, 8, 1) 0%,
      rgba(9, 9, 8, 0.99) 22%,
      rgba(9, 9, 8, 0.82) 42%,
      rgba(9, 9, 8, 0.28) 68%,
      rgba(9, 9, 8, 0.08) 100%
    );
}


.tb-hero__content {

  position: relative;

  z-index: 2;

  display: flex;

  flex-direction: column;

  justify-content: center;

  width: min(48%, 700px);

  padding: 90px 0;
}


.tb-hero__title {

  margin: 0 0 28px;

  color: var(--tb-cream) !important;

  font-family: var(--tb-display) !important;

  font-size:
    clamp(74px, 8.2vw, 136px) !important;

  font-weight: 400 !important;

  line-height: 1 !important;

  letter-spacing: 0.24em !important;

  font-variant-caps: small-caps !important;

  text-transform: none !important;
}


.tb-hero__tagline {

  margin-bottom: 22px;

  color: var(--tb-orange) !important;

  font-family: var(--tb-sans) !important;

  font-size: 11px !important;

  font-weight: 500 !important;

  line-height: 1.2 !important;

  letter-spacing: 0.25em !important;

  text-transform: uppercase !important;

  font-variant-caps: normal !important;
}


.tb-hero__description {

  max-width: 440px;

  color: var(--tb-muted) !important;

  font-family: var(--tb-serif) !important;

  font-size: 18px !important;

  line-height: 1.6;

  letter-spacing: normal !important;
}


/* =====================================================================
   STORY
   ===================================================================== */

.tb-story {

  display: grid;

  grid-template-columns:
    46% 54%;

  min-height: 520px;
}


.tb-story__image {

  width: 100%;
  height: 100%;

  min-height: 520px;

  object-fit: cover;
}


.tb-story__content {

  display: flex;

  flex-direction: column;

  justify-content: center;

  padding: 70px;
}


.tb-story__quote {

  max-width: 600px;

  margin-top: 30px;

  color: var(--tb-cream) !important;

  font-family: var(--tb-serif) !important;

  font-size: 22px;

  font-style: italic;

  line-height: 1.35;

  letter-spacing: normal !important;
}


/* =====================================================================
   WATCH
   ===================================================================== */

.tb-watch {

  display: grid;

  grid-template-columns:
    1.15fr 1fr;

  gap: 40px;
}


.tb-watch__featured-image {

  display: block;

  width: 100%;

  aspect-ratio: 16 / 9;

  object-fit: cover;

  border-top:
    2px solid
    var(--tb-orange);
}


.tb-watch__list {

  display: flex;

  flex-direction: column;
}


.tb-watch-item {

  display: grid;

  grid-template-columns:
    180px 1fr;

  gap: 20px;

  align-items: center;

  padding: 18px 0;

  border-bottom:
    1px solid
    var(--tb-border-soft);
}


.tb-watch-item:first-child {

  padding-top: 0;
}


.tb-watch-item img {

  display: block;

  width: 100%;

  aspect-ratio: 16 / 9;

  object-fit: cover;
}


.tb-watch-item__meta {

  margin-bottom: 6px;

  color: var(--tb-orange) !important;

  font-family: var(--tb-sans) !important;

  font-size: 9px !important;

  font-weight: 600;

  letter-spacing: 0.18em;

  text-transform: uppercase;

  font-variant-caps: normal !important;
}


.tb-watch-item__title {

  color: var(--tb-cream) !important;

  font-family: var(--tb-display) !important;

  font-size: 21px;

  font-weight: 400;

  line-height: 1.15;

  letter-spacing: 0.14em !important;

  font-variant-caps: small-caps !important;

  text-transform: none !important;
}


/* =====================================================================
   WORK WITH ME
   ===================================================================== */

.tb-contact {

  position: relative;

  display: flex;

  align-items: center;

  min-height: 400px;

  overflow: hidden;
}


.tb-contact__background {

  position: absolute;

  inset: 0 0 0 auto;

  width: 55%;

  height: 100%;

  object-fit: cover;

  opacity: 0.34;
}


.tb-contact::after {

  content: "";

  position: absolute;

  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      var(--tb-black) 0%,
      var(--tb-black) 40%,
      rgba(9,9,8,0.80) 62%,
      rgba(9,9,8,0.25) 100%
    );
}


.tb-contact__content {

  position: relative;

  z-index: 2;

  max-width: 620px;

  padding: 80px 0;
}


/* =====================================================================
   GENERIC IMAGES
   ===================================================================== */

img {

  max-width: 100%;

  height: auto;

  border-radius: 0 !important;
}


.card,
.panel,
.feature,
.image,
.image img {

  border-radius: 0 !important;
}


/* =====================================================================
   FORMS
   Text inputs only. Checkboxes/radios are deliberately excluded.
   ===================================================================== */

input:not([type="checkbox"]):not([type="radio"]),
textarea,
select {

  background: transparent !important;

  color: var(--tb-cream) !important;

  border:
    1px solid
    var(--tb-border-strong) !important;

  border-radius: 0 !important;

  font-family: var(--tb-serif) !important;

  box-shadow: none !important;
}


input:not([type="checkbox"]):not([type="radio"]),
select {

  min-height: 50px;
}


textarea {

  min-height: 140px;
}


input:not([type="checkbox"]):not([type="radio"]):focus,
textarea:focus,
select:focus {

  border-color:
    var(--tb-orange) !important;

  outline: none !important;

  box-shadow: none !important;
}


input[type="checkbox"],
input[type="radio"] {

  appearance: auto !important;
  -webkit-appearance: auto !important;

  width: 14px !important;
  height: 14px !important;

  min-width: 14px !important;
  min-height: 14px !important;

  margin: 0 !important;
  padding: 0 !important;

  background: initial !important;
  border: initial !important;
  box-shadow: none !important;

  vertical-align: middle !important;
}


::placeholder {

  color: var(--tb-muted-dark);
}


/* =====================================================================
   QUOTES
   ===================================================================== */

blockquote,
.quote,
.testimonial__quote {

  color: var(--tb-cream) !important;

  font-family: var(--tb-serif) !important;

  font-size:
    clamp(24px, 2.2vw, 36px);

  font-style: italic;

  font-weight: 400 !important;

  line-height: 1.35;

  letter-spacing: normal !important;

  font-variant-caps: normal !important;
}


blockquote::before,
blockquote::after {

  color: var(--tb-orange) !important;
}


/* =====================================================================
   FOOTER
   ===================================================================== */

footer,
.footer {

  background: var(--tb-black) !important;

  color: var(--tb-muted) !important;

  border-top-width: 1px !important;
  border-top-style: solid !important;
  border-top-color: transparent !important;

  border-image-source:
    var(--tb-divider-gradient) !important;

  border-image-slice: 1 !important;

  box-shadow: none !important;
}


footer a,
.footer a {

  color: var(--tb-muted) !important;

  font-family: var(--tb-sans) !important;

  font-size: 9px;

  letter-spacing: 0.18em;

  text-transform: uppercase;

  font-variant-caps: normal !important;
}


footer a:hover,
.footer a:hover {

  color: var(--tb-orange) !important;

  opacity: 1 !important;
}


/* =====================================================================
   UTILITIES
   ===================================================================== */

.tb-orange {
  color: var(--tb-orange) !important;
}

.tb-cream {
  color: var(--tb-cream) !important;
}

.tb-muted {
  color: var(--tb-muted) !important;
}

.tb-center {
  text-align: center;
}


/* =====================================================================
   TABLET
   ===================================================================== */

@media (max-width: 900px) {

  body {
    font-size: 17px;
  }


  .tb-container {

    width:
      min(
        calc(100% - 40px),
        var(--tb-content-width)
      );
  }


  .tb-section {
    padding: 65px 0;
  }


  /* HERO */

  .tb-hero {

    display: block;

    min-height: 720px;
  }


  .tb-hero__image {

    position: absolute;

    width: 100%;

    height: 100%;

    opacity: 0.60;

    object-position: 62% center;
  }


  .tb-hero::after {

    background:
      linear-gradient(
        180deg,
        rgba(9,9,8,0.14) 0%,
        rgba(9,9,8,0.40) 35%,
        rgba(9,9,8,0.88) 70%,
        rgba(9,9,8,1) 100%
      );
  }


  .tb-hero__content {

    justify-content: flex-end;

    width: 100%;

    min-height: 720px;

    padding: 80px 0 60px;
  }


  /* CUSTOM GRID */

  .tb-grid {

    grid-template-columns: 1fr;
  }


  /* STORY */

  .tb-story {

    display: block;
  }


  .tb-story__image {

    min-height: 400px;
  }


  .tb-story__content {

    padding: 50px 25px;
  }


  /* WATCH */

  .tb-watch {

    grid-template-columns: 1fr;
  }


  .tb-watch-item {

    grid-template-columns:
      130px 1fr;
  }


  /* CONTACT */

  .tb-contact__background {

    width: 100%;
  }


  .tb-contact::after {

    background:
      rgba(9,9,8,0.80);
  }


  /* HEADINGS */

  h1,
  .tb-hero__title {

    letter-spacing:
      0.16em !important;
  }


  h2 {

    letter-spacing:
      0.14em !important;
  }


  h3,
  h4 {

    letter-spacing:
      0.12em !important;
  }


  h5,
  h6 {

    letter-spacing:
      0.10em !important;
  }


  .tb-card__title,
  .tb-watch-item__title {

    letter-spacing:
      0.11em !important;
  }


  .tb-label {

    font-size: 11px !important;

    letter-spacing:
      0.24em !important;
  }
}


/* =====================================================================
   MOBILE
   ===================================================================== */

@media (max-width: 560px) {

  .tb-container {

    width:
      calc(100% - 30px);
  }


  .tb-watch-item {

    grid-template-columns:
      105px 1fr;

    gap: 15px;
  }


  .tb-card__content {

    padding:
      18px 20px 22px;
  }


  .btn,
  a.btn,
  .btn-primary,
  .btn-secondary,
  form button[type="submit"],
  input[type="submit"] {

    padding:
      14px 20px !important;
  }


  p,
  li {

    font-size: 17px;
  }


  /* FEATURE COPY */

  .feature h1,
  .feature h2,
  .feature h3,
  .feature h4,
  .feature h5,
  .feature h6,
  .feature p {

    padding-left: 20px !important;

    padding-right: 20px !important;
  }


  /* HEADINGS */

  h1,
  .tb-hero__title {

    letter-spacing:
      0.12em !important;
  }


  h2 {

    letter-spacing:
      0.10em !important;
  }


  h3,
  h4 {

    letter-spacing:
      0.09em !important;
  }


  h5,
  h6 {

    letter-spacing:
      0.08em !important;
  }


  .tb-card__title,
  .tb-watch-item__title {

    letter-spacing:
      0.09em !important;
  }


  .tb-label {

    font-size: 10px !important;

    letter-spacing:
      0.22em !important;
  }
}

/* =====================================================================
   KAJABI FORM SUBMIT BUTTONS
   Matches the site's normal CTA buttons without touching Wistia.
   ===================================================================== */

form button[type="submit"],
form input[type="submit"] {

  appearance: none !important;
  -webkit-appearance: none !important;

  background: transparent !important;
  color: var(--tb-cream) !important;

  border: 1px solid var(--tb-orange) !important;

  border-radius: 0 !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;

  font-family: var(--tb-sans) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: 0.20em !important;
  text-transform: uppercase !important;
  font-variant-caps: normal !important;

  padding: 16px 27px !important;

  box-shadow: none !important;
  text-shadow: none !important;

  cursor: pointer !important;

  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    color 180ms ease !important;
}

form button[type="submit"]:hover,
form input[type="submit"]:hover {

  background: var(--tb-orange) !important;
  border-color: var(--tb-orange) !important;
  color: var(--tb-black) !important;
  opacity: 1 !important;
}


/* =====================================================================
   RISE LOGIN / AUTH PAGE FIXES
   Scoped by the presence of a password field so these rules affect the
   Kajabi Rise login page without changing the rest of the site.
   ===================================================================== */

/* Keep the login title refined instead of inheriting the huge global H1. */
body:has(input[type="password"]) h1,
body:has(input[type="password"]) h1 * {

  font-family: var(--tb-display) !important;
  color: var(--tb-cream) !important;
  font-size: 52px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: 0.16em !important;
  font-variant-caps: small-caps !important;
  text-transform: none !important;
}

/* Style only the login submit button. This does not touch Wistia. */
body:has(input[type="password"]) button[type="submit"],
body:has(input[type="password"]) input[type="submit"] {

  appearance: none !important;
  -webkit-appearance: none !important;

  width: 100% !important;
  min-height: 48px !important;

  padding: 14px 22px !important;

  background: var(--tb-orange) !important;
  color: var(--tb-black) !important;

  border: 1px solid var(--tb-orange) !important;
  border-radius: 0 !important;

  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;

  box-shadow: none !important;
  text-shadow: none !important;

  font-family: var(--tb-sans) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  font-variant-caps: normal !important;

  cursor: pointer !important;
}

body:has(input[type="password"]) button[type="submit"]:hover,
body:has(input[type="password"]) input[type="submit"]:hover {

  background: var(--tb-orange-bright) !important;
  border-color: var(--tb-orange-bright) !important;
  color: var(--tb-black) !important;
}

/* Keep the Remember Me checkbox and label aligned on one baseline. */
body:has(input[type="password"]) label:has(input[type="checkbox"]),
body:has(input[type="password"]) .form-check:has(input[type="checkbox"]),
body:has(input[type="password"]) .checkbox:has(input[type="checkbox"]),
body:has(input[type="password"]) .form-group:has(input[type="checkbox"]) {

  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 9px !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
  line-height: 1.2 !important;
}

body:has(input[type="password"]) input[type="checkbox"] {

  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  min-height: 14px !important;

  margin: 0 !important;
  padding: 0 !important;

  flex: 0 0 14px !important;
}

body:has(input[type="password"]) label {

  color: var(--tb-cream) !important;
}

@media (max-width: 560px) {

  body:has(input[type="password"]) h1,
  body:has(input[type="password"]) h1 * {

    font-size: 40px !important;
    letter-spacing: 0.12em !important;
  }
}

/* =====================================================================
   FINAL KAJABI CTA CORNER OVERRIDE
   Keeps every site CTA perfectly square without touching Wistia controls.
   ===================================================================== */

html body a.btn,
html body a.btn-primary,
html body a.btn-secondary,
html body a[class*="btn-"],
html body form button[type="submit"],
html body form input[type="submit"] {

  border-radius: 0 !important;

  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;

  border-start-start-radius: 0 !important;
  border-start-end-radius: 0 !important;
  border-end-start-radius: 0 !important;
  border-end-end-radius: 0 !important;

  -webkit-border-radius: 0 !important;

  clip-path: none !important;
}

/* Inner CTA content must not reintroduce rounded corners. */
html body a.btn *,
html body a.btn-primary *,
html body a.btn-secondary *,
html body a[class*="btn-"] * {

  border-radius: 0 !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;

  border-start-start-radius: 0 !important;
  border-start-end-radius: 0 !important;
  border-end-start-radius: 0 !important;
  border-end-end-radius: 0 !important;
}

/* Kajabi CTA wrappers can clip the lower corners. */
html body .btn-wrapper,
html body .button-wrapper,
html body [class*="btn_wrapper"],
html body [class*="button_wrapper"],
html body .block-type-button,
html body .block--button {

  border-radius: 0 !important;

  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;

  border-start-start-radius: 0 !important;
  border-start-end-radius: 0 !important;
  border-end-start-radius: 0 !important;
  border-end-end-radius: 0 !important;

  -webkit-border-radius: 0 !important;

  overflow: visible !important;
}

/* Pseudo-elements can also carry Kajabi's radius. */
html body a.btn::before,
html body a.btn::after,
html body a.btn-primary::before,
html body a.btn-primary::after,
html body a.btn-secondary::before,
html body a.btn-secondary::after,
html body a[class*="btn-"]::before,
html body a[class*="btn-"]::after {

  border-radius: 0 !important;

  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;

  border-start-start-radius: 0 !important;
  border-start-end-radius: 0 !important;
  border-end-start-radius: 0 !important;
  border-end-end-radius: 0 !important;
}