/*
 * Agencies page (/agencies) — agency-partner sections.
 * Originally lived inline on /agency-partners; extracted on the
 * /agencies merge so the markup is leaner and styles are reusable.
 */

/* Hero CTA row */
  .agency-hero-cta-row {
    grid-column-gap: 1.6rem;
    grid-row-gap: 1.6rem;
    justify-content: center;
    align-items: center;
    display: flex;
    flex-wrap: wrap;
  }
  .agency-hero-cta-row .white-btn.filled-bg {
    padding: 1.2rem 3.6rem;
    font-size: 1.6rem;
    height: 5.2rem;
  }
  .agency-hero-cta-row .secondary-link {
    color: #fefefc99;
    font-family: 'PT Mono', sans-serif;
    font-size: 1.4rem;
    text-decoration: underline;
    text-underline-offset: 0.3rem;
    transition: color 0.2s;
  }
  .agency-hero-cta-row .secondary-link:hover {
    color: #fefefc;
  }
  /* Trust row in hero */
  .agency-trust-row {
    grid-column-gap: 2.4rem;
    grid-row-gap: 1.2rem;
    justify-content: center;
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    margin-top: 2rem;
    opacity: 0.7;
  }
  .agency-trust-row img {
    height: 2.8rem;
    opacity: 0.8;
    /* Render the black Shopify wordmark in pure white on the dark hero
       without forking the SVG (it's used in 26 other places in its
       original color). */
    filter: brightness(0) invert(1);
  }
  .agency-trust-row span {
    font-family: 'PT Mono', sans-serif;
    font-size: 1.3rem;
    color: #fefefc99;
  }
  /* Benefit cards grid */
  .agency-benefits-grid {
    grid-column-gap: 1.6rem;
    grid-row-gap: 1.6rem;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-auto-columns: 1fr;
    justify-items: center;
    display: grid;
    width: 100%;
  }
  .agency-benefit-card {
    border-left: 1px solid #1b1a2b1a;
    padding-left: 2.4rem;
    padding-right: 2.4rem;
    width: 100%;
  }
  .agency-benefit-card:first-child {
    border-left-style: none;
    padding-left: 0;
  }
  .agency-benefit-card-icon {
    width: 4.8rem;
    margin-bottom: 2.4rem;
  }
  .agency-benefit-card-title {
    margin-bottom: 1.2rem;
    font-size: 2rem;
    font-weight: 500;
    line-height: 150%;
  }
  /* What you get grid */
  .agency-perks-grid {
    grid-column-gap: 4rem;
    grid-row-gap: 4rem;
    grid-template-columns: 1fr 1fr;
    display: grid;
    width: 100%;
  }
  .agency-perk-item {
    grid-column-gap: 1.6rem;
    grid-row-gap: 1.6rem;
    flex-flow: row;
    align-items: flex-start;
    display: flex;
  }
  .agency-perk-icon {
    width: 3.2rem;
    height: 3.2rem;
    flex-shrink: 0;
    margin-top: 0.4rem;
  }
  .agency-perk-content {
    flex-flow: column;
    display: flex;
  }
  .agency-perk-title {
    font-size: 2rem;
    font-weight: 500;
    line-height: 150%;
    margin-bottom: 0.8rem;
  }
  .agency-ideal-for {
    font-family: 'PT Mono', sans-serif;
    font-size: 1.4rem;
    color: var(--blue);
    margin-top: 3.2rem;
    text-align: center;
  }
  /* How it works steps */
  .agency-steps-row {
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    display: grid;
    width: 100%;
    position: relative;
  }
  /* Card surface — light tint by default so the card reads on a white page,
     translucent-white inside a dark section so it sits on top of the
     near-black backdrop. */
  .agency-step-card {
    background-color: var(--grey);
    border-radius: var(--border-radius-default);
    padding: 4rem 3.2rem;
    text-align: center;
    display: flex;
    flex-flow: column;
    align-items: center;
  }
  .bg-dark-wrapper .agency-step-card { background-color: #fefefd0d; }
  .agency-step-number {
    font-family: 'Tt Drugs', sans-serif;
    font-size: 4.8rem;
    font-weight: 600;
    line-height: 1;
    background: linear-gradient(135deg, #f0eabf, #f0eabf99);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 2rem;
  }
  /* Default to readable dark text; switch to white only inside a
     .bg-dark-wrapper section. Guards against the dark backdrop ever
     failing to apply (cached CSS, future Webflow re-export, etc.). */
  .agency-step-title {
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 150%;
    color: var(--_apps---colors--foreground);
  }
  .bg-dark-wrapper .agency-step-title { color: var(--web-white); }
  /* Proof / Credibility metrics */
  .agency-metrics-row {
    grid-column-gap: 4rem;
    grid-row-gap: 4rem;
    grid-template-columns: 1fr 1fr 1fr;
    display: grid;
    width: 100%;
  }
  .agency-metric-card {
    text-align: center;
    padding: 4rem 2.4rem;
    background-color: #f7f8fa;
    border-radius: var(--border-radius-default);
  }
  .agency-metric-number {
    font-family: 'Tt Drugs', sans-serif;
    font-size: 5.6rem;
    font-weight: 600;
    line-height: 1.1;
    color: var(--blue);
    margin-bottom: 1.2rem;
  }
  .agency-metric-label {
    font-size: 1.6rem;
    color: var(--blue-dark-gray);
    line-height: 150%;
  }
  /* Mid-page CTA strip */
  .agency-cta-strip {
    background-color: var(--blue);
    border-radius: var(--border-radius-default);
    padding: 6rem 4.8rem;
    text-align: center;
    width: 100%;
  }
  .agency-cta-strip .big-heading-n {
    color: #fff;
    font-size: 4.8rem;
    margin-bottom: 1.6rem;
  }
  .agency-cta-strip .agency-cta-desc {
    color: #ffffffcc;
    font-size: 1.8rem;
    line-height: 150%;
    margin-bottom: 3.2rem;
  }
  .agency-cta-strip .white-btn.filled-bg {
    padding: 1.2rem 3.6rem;
    font-size: 1.6rem;
    height: 5.2rem;
  }
  /* Agency Application Form */
  .agency-form-section {
    background-color: #f9f7e5;
    border-radius: var(--border-radius-default);
    padding: 6.8rem 4.8rem;
    width: 100%;
    position: relative;
  }
  .agency-form-grid {
    grid-column-gap: 2.4rem;
    grid-row-gap: 2.4rem;
    grid-template-columns: 1fr 1fr;
    display: grid;
    width: 100%;
    max-width: 80rem;
  }
  .agency-form-grid .full-width {
    grid-column: 1 / -1;
  }
  .agency-form-field {
    display: flex;
    flex-flow: column;
  }
  .agency-form-label {
    font-size: 1.4rem;
    font-weight: 500;
    margin-bottom: 0.8rem;
    color: #1b1a2b;
  }
  .agency-form-label .required {
    color: #d74843;
  }
  .agency-form-input {
    background-color: #fff;
    border: 1px solid #d1d1d1;
    border-radius: 2.4rem;
    height: 5.2rem;
    padding: 1.2rem 2.4rem;
    font-size: 1.6rem;
    font-family: 'Inter', sans-serif;
    transition: border-color 0.2s;
    width: 100%;
    box-sizing: border-box;
  }
  .agency-form-input:focus {
    outline: none;
    border-color: var(--blue);
  }
  .agency-form-select {
    background-color: #fff;
    border: 1px solid #d1d1d1;
    border-radius: 2.4rem;
    height: 5.2rem;
    padding: 1.2rem 2.4rem;
    font-size: 1.6rem;
    font-family: 'Inter', sans-serif;
    appearance: auto;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.2s;
  }
  .agency-form-select:focus {
    outline: none;
    border-color: var(--blue);
  }
  .agency-form-textarea {
    background-color: #fff;
    border: 1px solid #d1d1d1;
    border-radius: 2.4rem;
    min-height: 14rem;
    padding: 1.6rem 2.4rem;
    font-size: 1.6rem;
    font-family: 'Inter', sans-serif;
    resize: vertical;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.2s;
  }
  .agency-form-textarea:focus {
    outline: none;
    border-color: var(--blue);
  }
  .agency-checkbox-group {
    grid-column-gap: 1.2rem;
    grid-row-gap: 1.2rem;
    display: flex;
    flex-wrap: wrap;
  }
  .agency-checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.4rem;
    cursor: pointer;
    background-color: #fff;
    border: 1px solid #d1d1d1;
    border-radius: 1000px;
    padding: 0.8rem 1.6rem;
    transition: all 0.2s;
  }
  .agency-checkbox-label:hover {
    border-color: var(--blue);
  }
  .agency-checkbox-label input[type="checkbox"] {
    width: 1.6rem;
    height: 1.6rem;
    accent-color: var(--blue);
  }
  .agency-checkbox-label input[type="checkbox"]:checked + span {
    color: var(--blue);
  }
  .agency-consent-label {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    font-size: 1.4rem;
    cursor: pointer;
    line-height: 150%;
  }
  .agency-consent-label input[type="checkbox"] {
    width: 1.8rem;
    height: 1.8rem;
    margin-top: 0.2rem;
    accent-color: var(--blue);
    flex-shrink: 0;
  }
  .agency-form-success {
    display: none;
    text-align: center;
    padding: 4rem 2rem;
  }
  .agency-form-success.visible {
    display: block;
  }
  .agency-form-success h3 {
    font-family: 'Tt Drugs', sans-serif;
    font-size: 3.2rem;
    font-weight: 600;
    margin-bottom: 1.6rem;
    color: #1b1a2b;
  }
  .agency-form-success p {
    font-size: 1.8rem;
    color: var(--blue-dark-gray);
    margin-bottom: 2.4rem;
  }
  /* FAQ accordion */
  .agency-faq-item {
    border-bottom: 1px solid var(--_apps---colors--border);
    padding-top: 3.2rem;
    padding-bottom: 3.2rem;
    cursor: pointer;
  }
  .bg-dark-wrapper .agency-faq-item { border-bottom-color: #fefefc1a; }
  .agency-faq-question {
    justify-content: space-between;
    align-items: center;
    width: 100%;
    display: flex;
    font-size: 2rem;
    color: var(--_apps---colors--foreground);
  }
  .bg-dark-wrapper .agency-faq-question { color: var(--web-white); }
  .agency-faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, padding 0.3s ease-out;
    padding-top: 0;
  }
  .agency-faq-answer.open {
    max-height: 30rem;
    padding-top: 1.6rem;
  }
  .agency-faq-answer-text {
    color: var(--blue-dark-gray);
    font-size: 1.6rem;
    line-height: 170%;
  }
  .bg-dark-wrapper .agency-faq-answer-text { color: #fefefc99; }
  .agency-faq-icon {
    transition: transform 0.3s;
  }
  .agency-faq-item.open .agency-faq-icon {
    transform: rotate(45deg);
  }
  /* Testimonial cards */
  .agency-testimonial-grid {
    grid-column-gap: 2.4rem;
    grid-row-gap: 2.4rem;
    grid-template-columns: 1fr 1fr;
    display: grid;
    width: 100%;
  }
  .agency-testimonial-card {
    background-color: #f7f8fa;
    border-radius: var(--border-radius-default);
    padding: 4rem;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
  }
  .agency-testimonial-quote {
    font-size: 1.8rem;
    line-height: 170%;
    color: #1b1a2b;
    margin-bottom: 2.4rem;
    font-style: italic;
  }
  .agency-testimonial-author {
    font-weight: 500;
    font-size: 1.6rem;
    color: #1b1a2b;
  }
  .agency-testimonial-role {
    font-size: 1.4rem;
    color: var(--blue-dark-gray);
  }
  /* Responsive */
  @media screen and (max-width: 991px) {
    .agency-benefits-grid {
      grid-template-columns: 1fr 1fr;
      grid-row-gap: 3.2rem;
    }
    .agency-benefit-card {
      border-left: none;
      border-top: 1px solid #1b1a2b1a;
      padding-left: 0;
      padding-top: 2.4rem;
    }
    .agency-benefit-card:first-child,
    .agency-benefit-card:nth-child(2) {
      border-top: none;
      padding-top: 0;
    }
    .agency-benefit-card:first-child {
      border-left: none;
    }
    .agency-steps-row {
      grid-template-columns: 1fr 1fr;
    }
    .agency-perks-grid {
      grid-template-columns: 1fr;
    }
    .agency-metrics-row {
      grid-template-columns: 1fr;
    }
    .agency-testimonial-grid {
      grid-template-columns: 1fr;
    }
    .agency-form-grid {
      grid-template-columns: 1fr;
    }
    .agency-form-grid .full-width {
      grid-column: 1;
    }
    .agency-cta-strip {
      padding: 4rem 2.4rem;
    }
    .agency-cta-strip .big-heading-n {
      font-size: 3.6rem;
    }
    .agency-form-section {
      padding: 4rem 2.4rem;
    }
  }
  @media screen and (max-width: 767px) {
    .agency-benefits-grid {
      grid-template-columns: 1fr;
    }
    .agency-benefit-card:nth-child(2) {
      border-top: 1px solid #1b1a2b1a;
      padding-top: 2.4rem;
    }
    .agency-steps-row {
      grid-template-columns: 1fr;
    }
    .agency-hero-cta-row {
      flex-direction: column;
    }
    .agency-hero-cta-row .white-btn.filled-bg {
      width: 100%;
    }
  }