.jumbotron {
  display: flex;
  align-items: center;
  padding: 100px 0 200px;
  text-align: center;
}

.jumbotron h1 {
  font-size: 3rem;
  padding-top: 3.5rem;
  padding-bottom: 1rem;
  text-align: center;
  text-shadow: 2px 2px 10px black;
}

.jumbotron p {
  color: #fff;
  font-size: 1rem;
  font-weight: bold;
  text-shadow: 1px 1px 5px black;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin-top: 2rem;
}

.hero-actions .btn {
    border-radius: 20px;
}

/* Jumbotron animation */

/* Position the annotation directly over the space between words. */
.word-anchor {
    display: inline-block;
    position: relative;
    width: 0.25em;
    height: 1em;
    vertical-align: baseline;
}

.word-annotation {
    position: absolute;
    bottom: calc(100% - 2.2rem);
    left: 50%;
    transform: translateX(-50%);

    color: #ffc107;
    font-size: 1.1rem;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0;
    text-align: center;
    pointer-events: none;
}

.rotating-words {
  display: block;
  font-family: "Gochi Hand", cursive;
  font-size: 2rem;
  position: relative;
  width: 12rem;
  height: 1.5rem;
  text-shadow: 2px 2px 10px black;
	transform: rotate(-2deg);
}

.rotating-words > span {
    position: absolute;
    inset: 0;
    white-space: nowrap;
    opacity: 0;

    /* Six × three seconds = a 18-second cycle. */
    animation: rotate-word 18s linear infinite;
}

.rotating-words > span:nth-child(1) { animation-delay: 0s; }
.rotating-words > span:nth-child(2) { animation-delay: 3s; }
.rotating-words > span:nth-child(3) { animation-delay: 6s; }
.rotating-words > span:nth-child(4) { animation-delay: 9s; }
.rotating-words > span:nth-child(5) { animation-delay: 12s; }
.rotating-words > span:nth-child(6) { animation-delay: 15s; }

/* A downward-pointing chevron that stays in place. */
.word-chevron {
    display: block;
    width: 0.65rem;
    height: 0.65rem;
    margin: 3rem auto 0;
    font-family: 'Gochi Hand', cursive;
    font-size: 3.5rem;
    text-shadow: 2px 2px 10px black;
    transform: rotate(-180deg);
}

@keyframes rotate-word {
    /* Slide in from the right over 0.36 seconds. */
    0% {
        opacity: 0;
        transform: translateX(1rem);
    }

    /* Remain centered until 2.64 seconds. */
    2%, 14.6667% {
        opacity: 1;
        transform: translateX(0);
    }

    /* Slide out to the left by 3 seconds. */
    16.6667%, 100% {
        opacity: 0;
        transform: translateX(-1rem);
    }
}

/* Keep the first word visible without animation. */
@media (prefers-reduced-motion: reduce) {
    .rotating-words > span {
        animation: none;
        opacity: 0;
        transform: none;
    }

    .rotating-words > span:first-child {
        opacity: 1;
    }
}

/* Shooting star */

/* Keep the content above the star. */
.jumbotron > .container {
    position: relative;
    z-index: 1;
}

.shooting-star {
    position: absolute;
    top: 10%;
    left: 15%;
    z-index: 0;
    display: block;
    width: 140px;
    height: 2px;
    opacity: 0;
    pointer-events: none;

    background: linear-gradient(
        to right,
        transparent,
        rgba(220, 235, 255, 0.3),
        #fff
    );

    filter: drop-shadow(0 0 3px rgba(200, 225, 255, 0.6));
    animation: shooting-star 18s linear 2s infinite;
}

@keyframes shooting-star {
    /* From the left, moving down and right. */
    0% {
        left: 15%;
        opacity: 0;
        transform: translate(-120px, -60px) rotate(27deg);
    }

    0.5% {
        opacity: 0.85;
    }

    3.5%, 49.99% {
        left: 15%;
        opacity: 0;
        transform: translate(480px, 240px) rotate(27deg);
    }

    /* From the right, moving down and left. */
    50% {
        left: 85%;
        opacity: 0;
        transform: translate(120px, -60px) rotate(153deg);
    }

    50.5% {
        opacity: 0.85;
    }

    53.5%, 100% {
        left: 85%;
        opacity: 0;
        transform: translate(-480px, 240px) rotate(153deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .shooting-star {
        display: none;
        animation: none;
    }
}

/* Features */

.features h2, p.subheading {
  font-family: Arial, Helvetica, sans-serif;
  text-align: left;
}

.features h2, #tenant-screening h2 {
  font-size: clamp(2rem, 3vw, 2.1rem);
  margin-bottom: 0;
  text-align: left;
}

p.subheading {
  color: #195172;
  font-size: 1.2rem;
  font-weight: bold;
  line-height: 1.4;
  margin-bottom: 2rem;
}

.grey-bg p.subheading {
  color: #6a6a6a;
}

.features > h2 > strong {
  text-decoration: underline;
}

.features p {
  line-height: 1.6;
}

.feature-cta {
  border-radius: 20px;
  margin: 2rem 0 0;
  font-size: 1.2rem;
}

#hiring-description {
  order: 1;
}

#hiring-figures {
    order: 2;
    min-width: 0;
}

#hiring-description p {
  color: #fff;
}

#hiring-description h3 {
  font-weight: bold;
}

/* Feature figures */

/* Stack the description and comparison on small screens. */
.features {
  display: grid;
  gap: 2rem;
  grid-template-columns: minmax(0, 1fr);
  margin-block: 3rem;
}

#career-match-description,
#career-match-figures {
    min-width: 0;
}

#career-match-description p.subheading > strong {
    text-decoration: underline;
}

#career-match-description p {
    line-height: 1.6;
}

#career-match-figures {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-content: center;
    gap: 1rem;
    margin-top: 0;
    padding: clamp(1rem, 2vw, 1.5rem);
    background: #f0f5f8;
    border-radius: 30px;
}

/* Small screens: three figures side by side */
#career-match-figures figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    margin: 0;
    text-align: center;
}

/* The outer grid now supplies the spacing. */
/* Career matching comparison: mobile-first layout */

#career-match-figures figcaption {
    margin: 0;
}

#career-match-figures .accuracy-img {
    display: block;
    width: 100%;
    max-width: 200px;
    height: auto;
    margin: 0;
}

.comparison-label,
.comparison-detail {
    display: block;
}

.comparison-label {
    font-size: 1.1rem;
}

.comparison-detail {
    margin-top: 0.25rem;
    font-size: 1rem;
}

/* Medium screens and above: text left, comparison right. */
@media (min-width: 768px) {
    #matching {
      align-items: center;
      grid-template-columns: minmax(0, 5fr) minmax(0, 5fr);
      gap: clamp(1.5rem, 2vw, 2rem);
    }

    #career-match-figures {
        grid-template-columns: max-content minmax(0, 200px);
        justify-content: center;
        column-gap: 1.25rem;
        row-gap: 1.25rem;
    }

    #career-match-figures figure {
        display: grid;
        grid-column: 1 / -1;
        grid-template-columns: subgrid;
        grid-template-rows: auto;
        align-items: center;
        justify-items: stretch;
        gap: 1rem;
        text-align: left;
    }
}

/* Medium screens and above: text left, comparison right. */
@media (min-width: 992px) {
  #hiring {
    grid-template-columns: minmax(0, 6fr) minmax(0, 4fr);
    gap: clamp(1.5rem, 3vw, 3rem);
  }

  #matching {
    grid-template-columns: minmax(0, 6fr) minmax(0, 4fr);
    gap: clamp(1.5rem, 3vw, 3rem);
  }

  #hiring-figures {
    order: 0;
  }

  #hiring-description {
    order: 0;
  }
}

/* ========================================
   Tenant Screening
   ======================================== */

#tenant-screening {
    position: relative;
    overflow: hidden;
    padding-top: 0;
    padding-bottom: 3rem;
}


/* Visual Container */

#tenant-screening .tenant-screening-visuals {
    position: relative;
    height: 220px;
    pointer-events: none;
}


/* Hand */

#tenant-screening #hand {
    position: absolute;
    top: -20px;
    left: 0;
    width: min(68vw, 270px);

    /* Initial position: partially hidden above section */
    transform: translate3d(0, -58%, 0);
    will-change: transform;
}

#tenant-screening #hand img {
    display: block;
    width: 100%;
    height: auto;
}

/*  Keys */

#tenant-screening #keys {
    position: absolute;
    top: -40px;
    right: 0;
    width: clamp(90px, 25vw, 110px);
    will-change: transform;
}

#tenant-screening #keys img {
    display: block;
    width: 100%;
    height: auto;
}


/* Text Content */

#tenant-screening .tenant-screening-content {
    position: relative;
    z-index: 1;
}

#tenant-screening .tenant-screening-headline {
    font-size: clamp(1.25rem, 2.5vw, 1.5rem);
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 1rem;
}

#tenant-screening .feature-cta {
    margin-top: 1rem;
}


/* Tenant Desktop Layout */

@media (min-width: 768px) {

    #tenant-screening {
        min-height: 440px;
        padding-bottom: 0;
    }

    #tenant-screening .tenant-screening-visuals {
        position: absolute;
        inset: 0;
        height: auto;
    }

    #tenant-screening #hand {
        width: min(38%, 470px);
    }

    #tenant-screening #keys {
        top: -80px;
        width: clamp(125px, 12vw, 175px);
    }

    #tenant-screening .tenant-screening-content {
        margin-left: 44%;
        padding: 100px 0 50px;
    }
}

@media (min-width: 1200px) {
    #tenant-screening #hand {
      top: 0;
    }

    #tenant-screening .tenant-screening-content {
        margin-left: 44%;
        padding: 170px 0 140px;
    }
}

/* Consulting */

#consulting {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
    align-items: center;
    padding: 50px 0;
}

#consulting-content,
#rhys-headshot {
    min-width: 0;
}

#consulting-content {
  padding-left: 10px;
  padding-right: 10px;
}

#consulting-content ul {
  list-style: none;
  padding-left: 30px;
}

#consulting-content ul li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: .75rem;
}

#consulting-content ul li::before {
  content: "✓";
  position: absolute;
  left: 0;
}

/* Headshot */
#rhys-headshot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    margin: 0;
    text-align: center;
}

#rhys-headshot img {
    border-radius: 50%;
    display: block;
    width: 100%;
    max-width: 300px;
    height: auto;
}

#rhys-headshot figcaption {
    position: relative;
    z-index: 1;
    margin-top: -25px;
    padding: 7px 15px;
    background: #ffc107;
    border-radius: 10px;
    box-shadow: 0 2px 4px grey;
    text-align: center;
}

#consulting-label,
#consulting-detail {
    display: block;
}

#consulting-label {
    font-size: 1.1rem;
    font-weight: 700;
}

#consulting-detail {
    font-size: 1rem;
    margin-top: -.2rem;
}

/* Medium screens and above: two columns */
@media (min-width: 768px) {
    #consulting {
        grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
        gap: clamp(2rem, 4vw, 4rem);
    }
}


/* Rest of CSS */

#benefits h5 {
  font-size: 1.5rem;
}

#benefits p {
  font-size: 1.2rem;
}

p.card-text {
  font-size: 1.2rem;
}

#nav-home {
  color: var(--bs-navbar-active-color);
}

#free-career-test {
  padding: 4rem 0;
}

#specialties .card{
  margin: 10px 0;
  min-width: 300px;
}

#specialties .card-title {
  font-size: 1.5rem;
  white-space: nowrap;
}

#message {
  height: 10rem;
}

#contact {
  font-size: 1.4rem;
}

  #contact h2 {
    padding-bottom: 3rem;
  }

  #competitive-advantage p {
    font-size: 1.2rem;
    padding: 1.5rem 0;
  }

#why-we-exist p {
  font-size: 1.2rem;
  padding: 1.2rem 0;
}

/** Avoid painting sections until they come into view */

#first-six, #levels-of-accuracy, #most-advanced-container, #uses-container {
  content-visibility: auto;
  contain-intrinsic-size: auto 1000px auto 100vh;
}

#target-audience-container {
  content-visibility: auto;
  contain-intrinsic-size: auto 1000px auto 412px;
}

#first-six, #levels-of-accuracy, #most-advanced-container, #uses-container, #faq-container {
  content-visibility: auto;
  contain-intrinsic-size: auto 1000px auto 1300px;
}

@media only screen and (min-width: 768px) {
  .hero-actions {
      gap: 2rem;
  }

  .jumbotron h1 {
    font-size: 4rem;
  }

  .jumbotron p {
    font-size: 1.6rem;
  }

  #specialties .card{
    min-width: 300px;
  }

  #specialties .card-title {
    height: 2rem;
  }
}

@media only screen and (min-width: 992px) {
  #free-career-test .btn {
    font-size: 1.6rem;
  }
}

@media only screen and (min-width: 1200px) {
  #specialties .card{
    min-width: 350px;
  }
}

/* Tailored testing figures */

/* Self-contained component. All selectors are scoped to avoid other page styles.
   Pool and assessment remain side by side at every viewport width.
   At 576px, labels and lines also sit side by side within each pool tier. */
.tailored-testing {
  --tt-navy: #0f3247;
  --tt-blue: #1764dc;
  --tt-gold: #ffc107;
  --tt-muted: #506777;
  --tt-border: #d3dee5;
  --tt-selected-bg: #e8f0fc;
  --tt-selected-height: 9rem;
  --tt-test-height: 20rem;
  --tt-column-gap: .5rem;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) 1rem minmax(0, 1fr);
  grid-template-rows: auto var(--tt-selected-height) auto auto;
  align-items: center;
  column-gap: var(--tt-column-gap);
  width: 100%;
  max-width: 56rem;
  margin: 0 auto;
  padding: clamp(.5rem, 1.5vw, 1rem);
  background: var(--tt-navy);
  color: white;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1rem;
  line-height: 1.4;
}
.tailored-testing,
.tailored-testing *,
.tailored-testing *::before,
.tailored-testing *::after { box-sizing: border-box; }
.tailored-testing > * { min-width: 0; }
/* The two nested grids share the parent's four rows. The selected group is
   row 2, so both the assessment and connectors can be centered on that row. */
.tailored-testing .tt-pool {
  display: grid;
  grid-template-rows: subgrid;
  grid-column: 1;
  grid-row: 1 / span 4;
}
.tailored-testing h3,
.tailored-testing p { margin: 0; }
.tailored-testing h3 {
  font: 700 clamp(1rem, 2.6vw, 1.55rem)/1.15 Arial, Helvetica, sans-serif;
  color: inherit;
  text-align: center;
  letter-spacing: -.02em;
  overflow-wrap: break-word;
}
.tailored-testing .tt-pool-heading {
  min-height: calc((var(--tt-test-height) - var(--tt-selected-height)) / 2 + 1rem);
  margin: 0;
  padding: .8rem .65rem;
  border-bottom: 1px solid var(--tt-border);
  background: #f0f5f8;
}
.tailored-testing .tt-pool-heading p,
.tailored-testing .tt-assessment-heading p {
  margin-top: .4rem;
  font-size: clamp(.75rem, 1.8vw, 1rem);
  line-height: 1.35;
  color: inherit;
  font-weight: 400;
}
.tailored-testing .tt-trait-pool {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: 1 / span 4;
  overflow: hidden;
  border: 1px solid var(--tt-border);
  border-radius: 5px;
  background: #f1f5f7;
  color: var(--tt-navy);
}
.tailored-testing .tt-tier {
  display: grid;
  gap: .75rem;
  padding: .85rem .65rem;
}
.tailored-testing .tt-tier + .tt-tier { border-top: 1px solid var(--tt-border); }
.tailored-testing .tt-tier-selected {
  align-content: center;
  background: var(--tt-selected-bg);
  box-shadow: inset 3px 0 0 var(--tt-gold);
}
.tailored-testing .tt-tier-label strong {
  display: block;
  font-size: clamp(.8rem, 2vw, 1.15rem);
  line-height: 1.25;
  overflow-wrap: break-word;
}
.tailored-testing .tt-tier-label span {
  display: block;
  margin-top: .3rem;
  font-size: .75rem;
  color: var(--tt-muted);
}
/* Six decorative lines. Text conveys their meaning to assistive technology. */
.tailored-testing .tt-lines {
  --line-color: var(--tt-blue);
  --line-step: 10px;
  --line-thickness: 3px;
  height: calc(5 * var(--line-step) + var(--line-thickness));
  background: repeating-linear-gradient(
    to bottom,
    var(--line-color) 0 var(--line-thickness),
    transparent var(--line-thickness) var(--line-step)
  );
}
.tailored-testing .tt-tier-moderate, .tailored-testing .tt-tier-low { background: #fff; }
.tailored-testing .tt-tier-moderate .tt-lines { --line-color: #94a8b5; }
.tailored-testing .tt-tier-low .tt-lines { --line-color: #c0cbd3; }
.tailored-testing .tt-assessment {
  grid-column: 3;
  grid-row: 2;
  align-self: center;
  display: flex;
  flex-direction: column;
  height: var(--tt-test-height);
  overflow: hidden;
  border: 1px solid #b8cbd8;
  border-radius: 5px;
  background: white;
  color: var(--tt-navy);
}
.tailored-testing .tt-assessment-heading {
  padding: .8rem .65rem;
  background: #f0f5f8;
}
.tailored-testing h3 {
  color: var(--tt-navy) !important;
}
.tailored-testing .tt-pool-heading p,
.tailored-testing .tt-assessment-heading p {
  color: var(--tt-muted);
  text-align: center;
}
.tailored-testing .tt-assessment-body {
  display: grid;
  align-content: center;
  flex: 1;
  padding: 1.25rem .75rem;
}
.tailored-testing .tt-assessment-body .tt-lines { --line-step: 24px; }
/* CSS-only zoom frame. The assessment and selected group share a center.
   Each line joins one selected-group edge to the corresponding test edge.
   The 10px adjustment meets the test's 5px rounded corners. */
.tailored-testing .tt-zoom-connector {
  grid-column: 2;
  grid-row: 2;
  align-self: center;
  position: relative;
  width: calc(100% + 2 * var(--tt-column-gap) + 2px);
  margin-left: calc(-1 * var(--tt-column-gap) - 1px);
  height: calc(var(--tt-test-height) - 10px);
  background: var(--tt-selected-bg);
  opacity: 40%;
  clip-path: polygon(
    0 calc((100% - var(--tt-selected-height)) / 2),
    100% 0,
    100% 100%,
    0 calc((100% + var(--tt-selected-height)) / 2)
  );
  pointer-events: none;
}
.tailored-testing .tt-zoom-connector::before,
.tailored-testing .tt-zoom-connector::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: calc((100% - var(--tt-selected-height)) / 2);
  background: white;
}
.tailored-testing .tt-zoom-connector::before {
  top: 0;
  clip-path: polygon(
    0 calc(100% - 1px), 100% 0,
    100% 2px, 0 calc(100% + 1px)
  );
}
.tailored-testing .tt-zoom-connector::after {
  bottom: 0;
  clip-path: polygon(
    0 -1px, 100% calc(100% - 2px),
    100% 100%, 0 1px
  );
}
/* More room for labels and trait lines side by side within the pool. */
@media (min-width: 576px) {
  .tailored-testing .tt-tier {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    align-items: center;
    padding: 1.25rem;
  }
  .tailored-testing .tt-tier .tt-lines { --line-step: 15px; }
  .tailored-testing .tt-pool-heading,
  .tailored-testing .tt-assessment-heading { padding: 1rem; }
  .tailored-testing .tt-assessment-body { padding: 1.5rem; }
}