/* THIRDEYE SOLUTIONZ — responsive styles */

@media (max-width: 1050px) {

  .container {
    width:
      min(
        calc(100% - 42px),
        900px
      );
  }


  /* HEADER */

  .site-header {
    height: 88px;
  }

  .nav-wrap {
    min-height: 88px;
  }

  .brand {
    width: 160px;
    height: 70px;

    flex:
      0 0 160px;
  }

  .brand img {
    width: 145px;
    height: 66px;

    max-width: 145px;
    max-height: 66px;
  }

  .main-nav {
    gap: 20px;
  }

  .main-nav button {
    font-size: 12px;
  }

  .main-nav .nav-cta {
    min-height: 48px;

    padding:
      0 17px;
  }


  /* HERO */

  .hero-grid {
    grid-template-columns:
      1fr 350px;

    gap: 30px;
  }

  .hero h1 {
    font-size:
      clamp(
        58px,
        8vw,
        82px
      );
  }


  /* SERVICES */

  .service-grid {
    grid-template-columns:
      repeat(2,1fr);
  }


  /* AUDIENCE */

  .audience-grid,
  .why-grid {
    grid-template-columns:
      repeat(2,1fr);
  }

  .audience-grid article:nth-child(2),
  .why-card:nth-child(2) {
    border-right: 0;
  }

  .audience-grid article:nth-child(-n+2) {
    border-bottom:
      1px solid
      rgba(255,255,255,.12);
  }

  .why-card:nth-child(-n+2) {
    border-bottom:
      1px solid var(--line);
  }


  /* LENDER */

  .lender-card {
    flex-basis:
      255px !important;

    width:
      255px !important;

    min-width:
      255px !important;

    max-width:
      255px !important;
  }

  .lender-track {
    gap: 16px;

    animation-duration:
      30s;
  }


  /* FOOTER */

  .footer-grid {
    grid-template-columns:
      1.25fr 1fr 1fr;

    gap: 40px;
  }

  .footer-contact {
    grid-column:
      2 / 4;
  }

  .footer-bottom-inner {
    grid-template-columns:
      1fr auto;

    gap: 25px;
  }

  .footer-mini-brand {
    grid-column:
      1 / 3;

    border-left: 0;

    padding-left: 0;

    padding-bottom: 22px;
  }

  .footer-copyright {
    padding-bottom: 22px;
  }

  .website-credit {
    justify-content: flex-end;

    padding-bottom: 22px;
  }
}


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

@media (max-width: 760px) {

  .container {
    width:
      calc(100% - 28px);
  }


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

  .site-header {
    height: 78px;
  }

  .nav-wrap {
    min-height: 78px;

    gap: 15px;
  }


  /* =====================================================
     MOBILE LOGO
     SMALL + CONTROLLED
  ===================================================== */

  .brand {
    width: 125px;
    height: 66px;

    flex:
      0 0 125px;

    overflow: hidden;
  }

  .brand img {
    width: 118px;
    height: 62px;

    max-width: 118px;
    max-height: 62px;

    object-fit: contain;

    object-position:
      left center;
  }


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

  .menu-toggle {
    display: inline-flex;

    margin-left: auto;
  }


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

  .main-nav {
    position: absolute;

    left: 14px;
    right: 14px;

    top:
      calc(100% + 1px);

    display: none;

    flex-direction: column;

    align-items: stretch;

    height: auto;

    gap: 0;

    padding: 10px;

    background:
      #062e31;

    border:
      1px solid
      rgba(255,255,255,.08);

    border-radius:
      0 0 10px 10px;

    box-shadow:
      0 20px 40px
      rgba(0,0,0,.25);
  }

  .main-nav.open {
    display: flex;
  }

  .main-nav button {
    width: 100%;

    text-align: left;

    padding: 13px 12px;

    font-size: 13px;
  }

  .main-nav .nav-cta {
    width: 100%;

    min-height: 48px;

    justify-content: center;

    text-align: center;

    margin-top: 7px;
  }


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

  .hero {
    min-height: auto;
  }

  .hero-grid {
    display: block;

    min-height: auto;

    padding-top: 48px;

    padding-bottom: 55px;
  }

  .hero-copy {
    padding-top: 0;
  }

  .hero h1 {
    margin:
      16px 0 20px;

    font-size:
      clamp(
        52px,
        16vw,
        76px
      );

    line-height: .93;
  }

  .hero-text {
    font-size: 15px;

    line-height: 1.6;
  }

  .hero-points {
    gap: 22px;

    margin-top: 30px;
  }

  .hero-points div {
    min-width: 90px;
  }

  .hero-points strong {
    font-size: 12px;
  }

  .hero-copy > .text-link {
    margin-bottom: 40px;
  }


  /* =====================================================
     ENQUIRY CARD
  ===================================================== */

  .enquiry-card {
    position: relative;

    width:
      min(100%,370px);

    margin:
      0 auto;

    padding:
      24px 20px;

    border-radius: 15px;

    box-shadow:
      0 20px 45px
      rgba(0,0,0,.22);
  }

  .enquiry-card h2 {
    font-size: 28px;
  }

  .enquiry-card > p {
    font-size: 12px;

    margin-bottom: 16px;
  }

  .enquiry-form {
    gap: 10px;
  }

  .enquiry-form input,
  .enquiry-form select,
  .enquiry-form textarea {
    padding:
      10px 11px;
  }


  /* =====================================================
     TRUST
  ===================================================== */

  .trust-inner {
    min-height: auto;

    grid-template-columns:
      1fr;

    gap: 20px;

    padding:
      30px 0;
  }

  .lender-list {
    gap:
      10px 16px;
  }


  /* =====================================================
     SECTIONS
  ===================================================== */

  .section {
    padding:
      78px 0;
  }

  .split-grid,
  .process-grid,
  .lending-intro {
    grid-template-columns:
      1fr;

    gap: 35px;
  }

  .about-copy {
    padding-top: 0;
  }

  .display-title {
    font-size:
      clamp(
        38px,
        11vw,
        54px
      );
  }


  /* =====================================================
     SECTION HEADINGS
  ===================================================== */

  .section-heading {
    display: block;

    margin-bottom: 45px;
  }

  .section-heading > p {
    margin-top: 20px;
  }


  /* =====================================================
     APPROACH
  ===================================================== */

  .approach-grid {
    grid-template-columns:
      1fr;
  }

  .approach-item {
    min-height: auto;

    border-right: 0;

    border-bottom:
      1px solid var(--line);

    padding:
      30px 0;
  }

  .approach-item:last-child {
    border-bottom: 0;
  }


  /* =====================================================
     SERVICES
  ===================================================== */

  .service-group {
    margin-bottom: 65px;
  }

  .service-group-heading {
    display: block;
  }

  .service-group-heading > div {
    align-items:
      flex-start;
  }

  .service-group-heading p {
    margin:
      15px 0 0;
  }

  .service-grid {
    grid-template-columns:
      1fr;
  }

  .service-image {
    height: 220px;
  }


  /* =====================================================
     LENDING
  ===================================================== */

  .lending-section {
    padding:
      80px 0 65px;
  }

  .lending-intro {
    margin-bottom:
      55px;
  }

  .lender-group {
    margin-bottom:
      55px;
  }

  .lender-group-title {
    display: block;
  }

  .lender-group-title p {
    text-align:
      left;

    margin-top:
      13px;
  }


  /* =====================================================
     HORIZONTAL LENDER LOOP
  ===================================================== */

  .lender-marquee {
    width: 100%;

    overflow: hidden;

    padding:
      5px 0 18px;
  }

  .lender-track {
    display: flex !important;

    flex-direction:
      row !important;

    flex-wrap:
      nowrap !important;

    width:
      max-content !important;

    gap: 12px;

    animation-duration:
      23s;
  }

  .lender-card {
    flex:
      0 0 220px !important;

    width:
      220px !important;

    min-width:
      220px !important;

    max-width:
      220px !important;

    height:
      125px;

    padding:
      14px;
  }

  .lender-logo-holder {
    height:
      70px;
  }

  .lender-logo-holder img {
    max-width:
      150px;

    max-height:
      48px;
  }

  .lender-text-logo {
    font-size:
      15px;
  }

  .lender-name {
    font-size:
      8px;

    padding-top:
      9px;
  }

  .lending-disclaimer {
    display: block;
  }

  .lending-disclaimer p {
    margin-top:
      10px;
  }


  /* =====================================================
     AUDIENCE
  ===================================================== */

  .audience-section {
    padding:
      78px 0;
  }

  .audience-grid,
  .why-grid {
    grid-template-columns:
      1fr;
  }

  .audience-grid article,
  .why-card {
    border-right:
      0;

    border-bottom:
      1px solid
      rgba(255,255,255,.12);
  }

  .why-card {
    border-bottom:
      1px solid var(--line);
  }

  .audience-grid article:last-child,
  .why-card:last-child {
    border-bottom:
      0;
  }


  /* =====================================================
     PROCESS
  ===================================================== */

  .process {
    padding:
      78px 0;
  }


  /* =====================================================
     FAQ
  ===================================================== */

  .faq-question {
    grid-template-columns:
      34px 1fr 20px;

    gap:
      10px;

    padding:
      20px 0;
  }

  .faq-question strong {
    font-size:
      13px;

    line-height:
      1.4;
  }

  .faq-item.open .faq-answer p {
    padding:
      0 20px
      22px 44px;
  }


  /* =====================================================
     CONTACT
  ===================================================== */

  .contact-cta {
    padding:
      70px 0;
  }

  .contact-cta-inner {
    display: block;
  }

  .contact-cta .button {
    margin-top:
      30px;
  }


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

  .footer-grid {
    grid-template-columns:
      1fr;

    gap: 0;

    padding:
      55px 0 35px;
  }

  .footer-brand {
    max-width:
      100%;

    padding-bottom:
      35px;
  }

  .footer-main-logo,
  .footer-brand img {
    width:
      150px;
  }

  .footer-brand p {
    font-size:
      12px;

    line-height:
      1.75;
  }

  .footer-column {
    border-left:
      0;

    border-top:
      1px solid
      rgba(255,255,255,.1);

    padding:
      27px 0;
  }

  .footer-column h4 {
    font-size:
      19px;
  }

  .footer-column button {
    font-size:
      12px;
  }

  .footer-contact {
    grid-column:
      auto;
  }

  .address-item {
    max-width:
      100%;
  }


  /* =====================================================
     FOOTER BOTTOM MOBILE
  ===================================================== */

  .footer-bottom-inner {
    min-height:
      auto;

    display:
      flex;

    flex-direction:
      column;

    align-items:
      center;

    gap:
      19px;

    padding:
      25px 0 28px;

    text-align:
      center;
  }

  .website-credit {
    order:
      1;

    width:
      100%;

    display:
      flex;

    flex-direction:
      column;

    align-items:
      center;

    justify-content:
      center;

    gap:
      8px;

    padding:
      0;

    text-align:
      center;
  }

  .website-credit-text {
    align-items:
      center;

    font-size:
      10px;
  }

  .website-credit .itwf-name {
    margin-top:
      6px;

    font-size:
      16px;

    letter-spacing:
      .045em;
  }

  .website-credit .itwf-link {
    width:
      62px;

    height:
      62px;

    flex:
      0 0 62px;
  }

  .footer-mini-brand {
    order:
      2;

    padding:
      0;

    border-left:
      0;

    justify-content:
      center;
  }

  .footer-copyright {
    order:
      3;

    padding:
      0;
  }

  .footer-mini-brand strong,
  .footer-mini-brand span {
    white-space:
      normal;
  }
}


/* =========================================================
   SMALL PHONES
========================================================= */

@media (max-width: 400px) {

  .container {
    width:
      calc(100% - 22px);
  }


  /* HEADER */

  .site-header {
    height:
      74px;
  }

  .nav-wrap {
    min-height:
      74px;
  }


  /* SMALL LOGO */

  .brand {
    width:
      112px;

    height:
      60px;

    flex:
      0 0 112px;
  }

  .brand img {
    width:
      106px;

    height:
      58px;

    max-width:
      106px;

    max-height:
      58px;
  }


  /* HERO */

  .hero-grid {
    padding-top:
      38px;
  }

  .hero h1 {
    font-size:
      50px;
  }

  .hero-points {
    gap:
      15px;
  }

  .hero-points div {
    min-width:
      80px;
  }

  .hero-points strong {
    font-size:
      11px;
  }


  /* ENQUIRY */

  .enquiry-card {
    width:
      100%;

    padding:
      21px 16px;
  }

  .enquiry-card h2 {
    font-size:
      25px;
  }


  /* LENDERS */

  .lender-track {
    gap:
      10px;

    animation-duration:
      20s;
  }

  .lender-card {
    flex:
      0 0 195px !important;

    width:
      195px !important;

    min-width:
      195px !important;

    max-width:
      195px !important;

    height:
      115px;

    padding:
      12px;
  }

  .lender-logo-holder {
    height:
      62px;
  }

  .lender-logo-holder img {
    max-width:
      135px;

    max-height:
      43px;
  }

  .lender-text-logo {
    font-size:
      14px;
  }

  .lender-name {
    font-size:
      7px;
  }


  /* FOOTER */

  .footer-grid {
    grid-template-columns:
      1fr;
  }

  .footer-brand img {
    width:
      140px;
  }

  .footer-brand p {
    font-size:
      11.5px;
  }

  .contact-item {
    font-size:
      12px;
  }

  .footer-mini-brand {
    align-items:
      flex-start;
  }

  .mini-logo {
    width:
      42px;

    height:
      42px;

    flex:
      0 0 42px;
  }

  .website-credit .itwf-name {
    font-size:
      14px;
  }

  .website-credit .itwf-link {
    width:
      58px;

    height:
      58px;

    flex:
      0 0 58px;
  }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior:
      auto;
  }

  .lender-track {
    animation:
      none !important;
  }

  .service-image img,
  .lender-card,
  .button,
  .brand img {
    transition:
      none !important;
  }
}