/* ==========================================================================
   TYRONEHARRISON - FRONT PAGE

   1. Hero
   2. Biography
   3. Core Focus Areas
   4. Results-Oriented Approach
   5. Logo marquee
   6. Watch. Learn. Take Action.
   7. Lead magnet
   8. Contact CTA
   9. Responsive
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Hero

   A full-height photographic band with everything centred over it. The
   transparent header sits on top of this section, so the top padding is the
   measured header stack plus breathing room - that is what keeps the headline
   clear of the bar at every width.
   -------------------------------------------------------------------------- */
.th-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100vh;
  padding-top: calc(var(--th-header-stack) + 3.5rem);
  padding-bottom: 4rem;
  overflow: hidden;
  background-color: #000;
  color: rgba(255, 255, 255, 0.82);
}

/*
 * The photograph. The default sits in the theme; a different image can be set
 * in Appearance > Customize > Brand & Contact Details, which prints an inline
 * background-image over this rule.
 */
.th-hero-bg {
  position: absolute;
  inset: 0;
  background-image: url("../../asserts/images/HeroHome.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Flat black overlay, holding the white type at a readable contrast. */
.th-hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.75);
}

.th-hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1050px;
  margin: 0 auto;
  text-align: center;
}

.th-hero-title {
  color: var(--color-text-light);
  margin-bottom: 1.5rem;
  text-wrap: balance;
}

.th-hero-text {
  max-width: 68ch;
  margin: 0 auto 2.5rem;
  font-size: 1.0625rem;
  color: rgba(255, 255, 255, 0.82);
}

/* The outline button needs its light-on-dark variant here. */
.th-hero .th-btn-outline {
  color: var(--color-text-light);
  border-color: rgba(255, 255, 255, 0.55);
}

.th-hero .th-btn-outline:hover {
  color: var(--color-text-light);
  border-color: var(--color-text-light);
  background-color: rgba(255, 255, 255, 0.12);
}

/* --------------------------------------------------------------------------
   2. Biography
   -------------------------------------------------------------------------- */
.th-bio {
  padding: var(--section-pad) 0;
}

.th-bio-grid {
  display: grid;
  gap: 4.5rem;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: start;
}

.th-bio-title {
  font-size: clamp(2.5rem, 4.5vw, 3.25rem);
  margin-bottom: 1.25rem;
}

/*
 * Looser leading than the site default. This is a long read set at body size,
 * and the extra air is what keeps three dense paragraphs approachable.
 */
.th-bio-text {
  line-height: 2;
  margin-bottom: 2.5rem;
}

.th-bio-text p {
  margin-bottom: 1.25rem;
}

.th-bio-text p:last-child {
  margin-bottom: 0;
}

.th-bio-image {
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
}

/* --------------------------------------------------------------------------
   3. Core Focus Areas

   A dark photographic band carrying three outlined cards. The cards are
   deliberately unfilled so the photograph reads through them; only the border
   and the orange icon chip separate them from the background.
   -------------------------------------------------------------------------- */
.th-focus {
  position: relative;
  overflow: hidden;
  padding: var(--section-pad) 0;
  background-color: #000;
  color: rgba(255, 255, 255, 0.78);
}

.th-focus-bg {
  position: absolute;
  inset: 0;
  background-image: url("../../asserts/images/coreFocusAreas.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Same flat black overlay as the hero, so the two dark bands match. */
.th-focus-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.72);
}

.th-focus-inner {
  position: relative;
  z-index: 1;
}

.th-focus-title {
  margin-bottom: 3rem;
  color: var(--color-text-light);
  text-align: center;
}

.th-focus-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.th-focus-card {
  display: flex;
  flex-direction: column;
  padding: 2rem 1.75rem 2.25rem;
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: var(--radius-md);
  transition: border-color var(--transition), background-color var(--transition), transform var(--transition);
}

.th-focus-card:hover {
  border-color: var(--color-primary);
  background-color: rgba(0, 0, 0, 0.25);
  transform: translateY(-4px);
}

/*
 * The supplied icons are complete badges - an orange disc with white line art
 * already drawn on it - so this is only a sizing box. Deliberately no
 * background or border-radius here: adding either would sit a second disc
 * behind the one in the artwork.
 */
.th-focus-icon {
  display: block;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  margin-bottom: 2.25rem;
}

.th-focus-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.th-focus-card-title {
  margin-bottom: 0.85rem;
  font-size: 1.3125rem;
  color: var(--color-text-light);
}

.th-focus-card-text {
  margin-bottom: 0;
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.72);
}

/* --------------------------------------------------------------------------
   4. Results-Oriented Approach
   -------------------------------------------------------------------------- */
.th-results {
  padding: var(--section-pad) 0 0;
}

.th-results-grid {
  display: grid;
  gap: 4.5rem;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}

.th-results-image {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

.th-results-title {
  margin-bottom: 1.25rem;
}

.th-results-text {
  max-width: 58ch;
  margin-bottom: 0;
  font-size: 0.9375rem;
  line-height: 1.9;
}

/* --------------------------------------------------------------------------
   5. Logo marquee

   Two identical rows sit side by side inside the track, and the track slides
   left by exactly half its width before looping - which lands row two exactly
   where row one began, so the motion never visibly restarts.

   The trailing gap lives on each row as padding rather than on the track as a
   flex gap. That way one row's width already includes the space that follows
   it, and -50% is a precise row width instead of a row plus half a gap, which
   is what would otherwise show up as a small stutter each cycle.
   -------------------------------------------------------------------------- */
.th-logos {
  padding: 3.5rem 0 var(--section-pad);
}

.th-logos-viewport {
  overflow: hidden;
}

.th-logos-track {
  display: flex;
  width: max-content;
  animation: th-logo-marquee 38s linear infinite;
}

/* Let a visitor stop the motion to read a name. */
.th-logos-viewport:hover .th-logos-track,
.th-logos-viewport:focus-within .th-logos-track {
  animation-play-state: paused;
}

.th-logos-row {
  --logo-gap: 5rem;

  display: flex;
  align-items: center;
  gap: var(--logo-gap);
  padding-right: var(--logo-gap);
  margin: 0;
  list-style: none;
}

.th-logos-row img {
  height: 60px;
  width: auto;
  max-width: none;
  flex-shrink: 0;
}

@keyframes th-logo-marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

/*
 * Reduced motion: stop the slide outright and hand the row over as something
 * the visitor scrolls themselves, so no logo becomes unreachable.
 */
@media (prefers-reduced-motion: reduce) {
  .th-logos-track {
    animation: none;
  }

  .th-logos-viewport {
    overflow-x: auto;
  }
}

/* --------------------------------------------------------------------------
   6. Watch. Learn. Take Action.

   A dark slate card inset from the page edges. The circle, the warm glow and
   the dot grid are all drawn in CSS rather than shipped as images, so they
   scale cleanly and cost no extra requests.
   -------------------------------------------------------------------------- */
.th-watch-section {
  padding: var(--section-pad) 0;
}

.th-watch {
  position: relative;
  overflow: hidden;
  padding: 4rem 3.5rem;
  background-color: var(--color-bg-slate);
  border-radius: var(--radius-lg);
  color: rgba(255, 255, 255, 0.72);
}

/* Soft disc bleeding off the top-left corner. */
.th-watch::before {
  content: "";
  position: absolute;
  top: -150px;
  left: -170px;
  width: 430px;
  height: 430px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.045);
  pointer-events: none;
}

/* Warm glow low on the left, tying the panel back to the brand orange. */
.th-watch::after {
  content: "";
  position: absolute;
  bottom: -220px;
  left: -120px;
  width: 480px;
  height: 420px;
  background: radial-gradient(circle, rgba(245, 142, 0, 0.16) 0%, transparent 65%);
  pointer-events: none;
}

/*
 * Dot grid on the right. One radial-gradient tile repeated by background-size,
 * which is far lighter than an image and stays crisp at any zoom.
 */
.th-watch-dots {
  position: absolute;
  top: 1.75rem;
  right: 2rem;
  width: 220px;
  height: 200px;
  background-image: radial-gradient(rgba(255, 255, 255, 0.28) 1.5px, transparent 1.5px);
  background-size: 16px 16px;
  pointer-events: none;
}

.th-watch-grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 3.5rem;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}

.th-watch-title {
  margin-bottom: 1.25rem;
  color: var(--color-text-light);
}

.th-watch-text {
  max-width: 46ch;
  margin-bottom: 2rem;
  font-size: 0.9375rem;
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.72);
}

/* --- Video thumbnail --- */
.th-watch-media {
  position: relative;
  display: block;
  border-radius: var(--radius-md);
  overflow: hidden;
  line-height: 0;
}

.th-watch-thumb {
  width: 100%;
  height: auto;
  transition: transform 0.5s var(--ease);
}

.th-watch-media:hover .th-watch-thumb {
  transform: scale(1.03);
}

/*
 * The supplied play icon is already an orange disc with the triangle drawn on
 * it, so this is positioning only - no background or border-radius, which
 * would sit a second disc behind the artwork.
 */
.th-watch-play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 66px;
  height: 66px;
  transform: translate(-50%, -50%);
  transition: transform var(--transition);
  pointer-events: none;
}

.th-watch-media:hover .th-watch-play,
.th-watch-media:focus-visible .th-watch-play {
  transform: translate(-50%, -50%) scale(1.09);
}

/* --------------------------------------------------------------------------
   7. Lead magnet

   Three stacked layers over one photograph, in this order from the back:

     1. .th-lead-bg      the photograph itself
     2. its ::after      a black gradient, heaviest on the left so the copy
                         has something solid to sit on
     3. .th-lead::after  the square dot pattern

   The dots are painted ABOVE the gradient on purpose - underneath it they
   would be washed out exactly where the band is darkest, which is where the
   design shows them most clearly. ::after is used for them rather than
   ::before because a pseudo-element ::before is inserted as the first child
   and would end up behind .th-lead-bg.
   -------------------------------------------------------------------------- */
.th-lead {
  position: relative;
  overflow: hidden;
  padding: 5rem 0;
  background-color: #000;
  color: var(--color-text-light);
}

.th-lead-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("../../asserts/images/above.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.th-lead-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.94) 0%,
    rgba(0, 0, 0, 0.86) 30%,
    rgba(0, 0, 0, 0.58) 62%,
    rgba(0, 0, 0, 0.34) 100%
  );
}

/*
 * Square dots, drawn as a repeating 8px SVG tile with a single 1px square in
 * it. An SVG tile rather than crossed linear-gradients because those produce a
 * mesh of lines, not discrete squares, and rather than a radial-gradient
 * because that produces round dots.
 */
.th-lead::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Crect width='1' height='1' fill='%23ffffff' fill-opacity='0.18'/%3E%3C/svg%3E");
  pointer-events: none;
}

.th-lead > .th-container {
  position: relative;
  z-index: 2;
}

.th-lead-inner {
  max-width: 620px;
}

.th-lead-title {
  margin-bottom: 1.5rem;
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: var(--color-text-light);
  text-wrap: balance;
}

.th-lead-list {
  list-style: none;
  margin: 0 0 2.25rem;
  padding: 0;
}

.th-lead-list li {
  position: relative;
  padding-left: 2.25rem;
  margin-bottom: 0.85rem;
  font-size: 1.0625rem;
  color: var(--color-text-light);
}

/* Bullet drawn rather than typed, so its size and offset stay put whatever
   the font does. */
.th-lead-list li::before {
  content: "";
  position: absolute;
  left: 0.35rem;
  top: 0.7rem;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--color-text-light);
}

/* --------------------------------------------------------------------------
   8. Contact CTA

   Full-bleed band. BgCTA.svg carries the whole backdrop - white base, the
   orange wash on the left and the dotted globe on the right - so nothing here
   redraws any of it.
   -------------------------------------------------------------------------- */
.th-cta {
  padding: 5.5rem 0;
  background-image: url("../../asserts/images/BgCTA.svg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--color-bg-primary);
}

.th-cta-grid {
  display: grid;
  gap: 3.5rem;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}

.th-cta-title {
  margin-bottom: 0;
  text-align: center;
  text-wrap: balance;
}

/* --- Form --- */
.th-cta-form-col {
  max-width: 520px;
  width: 100%;
  justify-self: center;
}

.th-cta-fields {
  display: grid;
  gap: 0.5rem 2rem;
  grid-template-columns: 1fr 1fr;
}

/*
 * The labels sit inside the field as the resting hint, the way the design
 * draws them, so each field is just a label above its own underline with no
 * boxed border. .th-field already supplies the underline treatment.
 */
.th-cta-fields .th-field {
  margin-bottom: 1rem;
}

/* The message runs the full width of the form.
 *
 * The mockup draws it one column wide and one line tall. That is the single
 * most common reason a contact form gets abandoned - there is no room to see
 * what you typed - so it spans both columns here with room for a few lines.
 * Change grid-column to 1 and drop the min-height to match the mockup exactly.
 */
.th-cta-fields .th-field-message {
  grid-column: 1 / -1;
}

.th-cta-fields .th-field-message textarea {
  min-height: 96px;
}

/* Field labels are quieter than the theme default here: they read as hints
   rather than headings, matching the design. */
.th-cta-fields label {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-text-muted);
}

.th-cta-submit-row {
  grid-column: 1 / -1;
  margin-top: 1.75rem;
}

.th-cta-submit {
  display: block;
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
  padding: 1.05rem 2rem;
}

.th-cta-note {
  margin: 1rem 0 0;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  text-align: center;
}

/* Hidden from people, still submitted by bots. Kept off-screen rather than
   display:none, which some bots skip. */
.th-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- Form status notices --- */
.th-notice {
  grid-column: 1 / -1;
  margin-bottom: 1.25rem;
  padding: 1rem 1.25rem;
  border-radius: var(--radius-md);
  border-left: 4px solid var(--color-primary);
  background-color: var(--color-primary-soft);
  font-size: 0.9375rem;
}

.th-notice strong {
  display: block;
  margin-bottom: 0.15rem;
}

.th-notice-success {
  border-left-color: #2e9e5b;
  background-color: rgba(46, 158, 91, 0.08);
}

.th-notice-error {
  border-left-color: #d1442f;
  background-color: rgba(209, 68, 47, 0.08);
}

/* --------------------------------------------------------------------------
   9. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .th-watch-grid,
  .th-results-grid,
  .th-bio-grid,
  .th-cta-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  /* The portrait would tower over a single column at full width. */
  .th-bio-visual {
    max-width: 460px;
  }

  .th-focus-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}

/*
 * Photographic bands on narrow screens.
 *
 * background-size: cover scales an image until it covers both axes. In a tall,
 * narrow container a very wide photograph is therefore scaled by its height,
 * and only a thin vertical slice through the middle stays visible - about 17%
 * of the width of coreFocusAreas.webp on a 390px phone, and 13% of above.webp.
 *
 * In both of those photographs the middle is the darkest and flattest part of
 * the frame, so that slice plus a heavy scrim is what turns the band into a
 * flat black rectangle on a phone. Moving the focal point to 56% lands on the
 * bright, high-contrast region instead, and the scrim is eased back now that
 * far less of the image is on show.
 *
 * HeroHome.webp is deliberately left alone: its centre is the brightest part
 * of the frame, so it already survives the crop.
 */
@media (max-width: 900px) {
  .th-focus-bg,
  .th-lead-bg {
    background-position: 56% center;
  }

  .th-focus-bg::after {
    background-color: rgba(0, 0, 0, 0.55);
  }

  /*
   * The cards are unfilled on desktop so the photograph reads through them.
   * With a lighter scrim behind, they need a little fill of their own to keep
   * the text off the busy part of the image.
   */
  .th-focus-card {
    background-color: rgba(0, 0, 0, 0.32);
  }

  /*
   * The lead magnet gradient runs left-to-right because the copy sits in the
   * left half on desktop. Once that copy spans the full width, a horizontal
   * gradient leaves the end of every line over the bright side of the frame,
   * so it darkens top-to-bottom here instead.
   */
  .th-lead-bg::after {
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.88) 0%,
      rgba(0, 0, 0, 0.8) 60%,
      rgba(0, 0, 0, 0.72) 100%
    );
  }
}

@media (max-width: 600px) {
  /* A tall hero on a short phone screen pushes everything below the fold, so
     the full-height rule is relaxed to a comfortable minimum. */
  .th-hero {
    min-height: 0;
    padding-top: calc(var(--th-header-stack) + 3rem);
    padding-bottom: 3.5rem;
  }

  .th-hero-text {
    font-size: 1rem;
  }

  .th-focus-grid {
    grid-template-columns: 1fr;
  }

  .th-watch {
    padding: 2.5rem 1.5rem;
  }

  .th-lead {
    padding: 3.5rem 0;
  }

  .th-lead-list li {
    font-size: 1rem;
  }

  /* The dot grid competes with the copy once the columns stack. */
  .th-watch-dots {
    display: none;
  }

  .th-watch-play {
    width: 54px;
    height: 54px;
  }

  .th-logos-row {
    --logo-gap: 2.5rem;
  }

  .th-logos-row img {
    height: 46px;
  }

  .th-focus-icon {
    margin-bottom: 1.5rem;
  }

  /* One column of fields, so nothing is squeezed on a phone. */
  .th-cta-fields {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .th-cta {
    padding: 3.5rem 0;
  }
}