/*
 * tf-theme — Custom Styles
 * -----------------------------------------------------------------------------
 * Hand-maintained override layer. This file is NOT part of the webpack/SCSS
 * build that generates build/styles/main.css — that source lives in the Motiv
 * Studio dev repo and is not present in this project.
 *
 * Loaded AFTER build/styles/main.css (enqueued as handle 'tf-custom' with
 * 'main' as a dependency in lib/assets.php), so rules here cascade last and
 * can override the compiled bundle without editing it.
 *
 * Conventions:
 *   - All new component styles and global tweaks go in this one file.
 *   - Keep it organized by section, mirroring the original
 *     sass/sass/components/ structure (one block per component).
 *   - Reuse documented design tokens (breakpoints xs 360 / sm 600 / md 768 /
 *     md2 1024 / lg 1280 / xl 1600 / xxl 1920; bg-*, typography, spacing
 *     classes) — see /wp-content/reference documentation PDF.
 *   - WP Engine site: purge cache (WPE cache / WP-Optimize) after edits.
 *     Browser cache-busting is automatic via filemtime() in lib/assets.php.
 * -----------------------------------------------------------------------------
 */

/* =============================================================================
   Global overrides
   ========================================================================== */

/* (Add :root custom properties and site-wide tweaks here.) */

body:after {
   content: 'test';
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 1px;
   background: #fff;
   pointer-events: none;
   opacity: 0;
}

/* WordPress default password-protected page form. WP core outputs bare HTML
   with no theme styling — it ends up tucked under the fixed nav and you can't
   click the input. This block gives it a proper centered card layout, theme
   font, and enough top padding to clear the fixed header. */
.post-password-form {
   max-width: 480px;
   margin: 0 auto;
   padding: 180px 1.5rem 6rem;
   font-family: Geomanist, sans-serif;
   text-align: center;
}

.post-password-form > p:first-child {
   margin-bottom: 2rem;
   font-size: 1.05rem;
   line-height: 1.4;
}

.post-password-form label {
   display: block;
   text-align: left;
   font-size: 0.85rem;
   text-transform: uppercase;
   letter-spacing: 0.08em;
}

.post-password-form label input {
   display: block;
   margin-top: 0.6rem;
   width: 100%;
   padding: 1rem 1.1rem;
   font-size: 1rem;
   font-family: inherit;
   border: 1px solid #ccc;
   border-radius: 0;
   box-shadow: none;
   box-sizing: border-box;
}

.post-password-form input[type="submit"] {
   margin-top: 1.5rem;
   padding: 1rem 2.5rem;
   font-size: 0.85rem;
   font-family: inherit;
   text-transform: uppercase;
   letter-spacing: 0.12em;
   background: #333;
   color: #fff;
   border: 2px solid #333;
   border-radius: 0;
   cursor: pointer;
   transition: background 0.2s ease, color 0.2s ease;
}

.post-password-form input[type="submit"]:hover {
   background: transparent;
   color: #333;
}

@media (max-width: 767px) {
   .post-password-form {
      padding-top: 140px;
   }
}

.atm-button--ghost-inverse {
   border: solid 1px #fff !important;
   color: #fff !important;
   max-width: 360px !important;
   margin: 0 auto !important;
}

.atm-button--ghost-inverse:hover {
   background-color:  #fff !important;
   color: #000 !important;
}

.atm-button-mw {
   max-width: 360px !important;
}

.atm-full-bg {
   max-width: 100% !important;
   width: 100% !important;
   max-height: 100% !important;
   background-size: 100% !important;
   transform: none;
   left: 0% !important;
   top: 0% !important;
}

.download-bio-wrapper.v2 .body {
   max-width: 650px;
}

.full-columns .services-row .content {
   padding-left: 0 !important;
}

.atm-container {
   max-width: 1300px !important;
   width: 100%;
   margin: 0 auto;
   padding-left: 20px;
   padding-right: 20px;
}

.atm-container-sm {
   max-width: 900px !important;
   width: 100%;
   margin: 0 auto;
   padding-left: 20px;
   padding-right: 20px;
}

.atm-card-border-wrapper {
   padding: 2rem 1.5rem;
   border: solid 1px #c4c3c4;
   min-width: 230px;
}
.atm-card-border-wrapper p {
   line-height: 1.2;
   font-size: 16px;
}
.atm-card-border-wrapper .atm-flex-center {
   gap: 0.75rem;
}

.atm-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   gap: 4rem;
   width: 100%;
}

.atm-grid h3 {
   text-wrap-style: balance;
}

.atm-has-icons img {
   height: 50px;
   width: auto;
}

.atm-grid-2 {
   display: grid;
   width: 100%;
   grid-template-columns: 1fr 1fr;
   gap: 4rem 8rem;
}

@media (max-width: 768px) {
   .atm-grid, .atm-grid-2 {
      grid-template-columns: 1fr;
      gap: 2rem;
   }
}

.atm-flex {
   display: flex;
   gap: 1.5rem;
}

.atm-flex-lg {
   display: flex;
   gap: 4rem;
}

@media (max-width: 768px) {
   .atm-flex-lg {
      gap: 2rem;
      flex-direction: column;
   }
}

.atm-flex-center {
   align-items: center;
   display: flex;
   gap: 1.5rem;
}

.atm-flex-v {
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
}
.atm-flex-v svg {
   flex-shrink: 0;
}

.atm-mw-720 {
   max-width: 720px;
   margin: 0 auto;
}

.atm-relative {
   position: relative;
}

.atm-offset-icons .atm-flex-v {
   padding-left: 50px;
   position: relative;
   align-items: start;
}

.atm-offset-icons img {
   max-height: 96px;
   position: relative;
   left: -50px;
   width: auto;
}

/* =============================================================================
   Components
   ========================================================================== */

/* ---- Component: client_marquee ----------------------------------------- */
.client-marquee {
   --client-marquee-logo-max-width: 180px;
   --client-marquee-logo-max-height: 80px;
   position: relative;
   overflow: hidden;
}

.client-marquee__title {
   margin-bottom: 1.5rem;
}

.client-marquee__viewport {
   overflow: hidden;
   width: 100%;
   -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
           mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
}

.client-marquee__track {
   display: flex;
   width: max-content;
   animation: tf-client-marquee-scroll linear infinite;
   /* animation-duration is set inline per-instance via the shortcode */
}

.client-marquee__set {
   display: flex;
   flex: 0 0 auto;
   gap: 3rem;
}

.client-marquee__item {
   flex: 0 0 auto;
   display: flex;
   align-items: center;
   justify-content: center;
   height: 130px;
}

@media (max-width: 767px) {
   .client-marquee__item {
      padding: 0 2rem;
      height: 90px;
   }
}

.client-marquee__item img {
   max-width: var(--client-marquee-logo-max-width);
   max-height: var(--client-marquee-logo-max-height);
   width: auto;
   height: auto;
   object-fit: contain;
}

@keyframes tf-client-marquee-scroll {
   from { transform: translateX(0); }
   to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
   .client-marquee__track {
      animation: none;
   }
}

/* ---- Component: comparison_table --------------------------------------- */
.comparison-table-wrapper {
   --comparison-bg: #393839;
   --comparison-highlight: #389080;
   --comparison-yes: #18ffe6;
   --comparison-highlight-border: #abfff2;
   --comparison-no: #ABABAB;
   --comparison-divider: #ABABAB;
   position: relative;
   background-color: var(--comparison-bg);
   color: #fff;
}

.comparison-table__title {
   margin-bottom: 0.75rem;
}

.comparison-table__subtitle {
   margin-bottom: 2.5rem;
   opacity: 0.85;
}

.comparison-table__scroll-frame {
   position: relative;
   width: calc(100% + 40px);
   margin-left: -20px;
   padding: 0 20px;
}

.comparison-table__scroll {
   overflow-x: auto;
   -webkit-overflow-scrolling: touch;
}

@media (max-width: 767px) {
   .comparison-table__scroll-frame::after {
      content: '';
      position: absolute;
      top: 0;
      right: 0px;
      bottom: 0;
      width: 80px;
      pointer-events: none;
      background: linear-gradient(to right, transparent, var(--comparison-bg));
   }
}

.comparison-table {
   width: 100%;
   table-layout: auto;
   border-collapse: separate;
   border-spacing: 0;
   margin-bottom: 2rem;
}

@media (max-width: 767px) {
   .comparison-table {
      min-width: 560px;
   }
}

.comparison-table th,
.comparison-table td {
   padding: 2rem 1.5rem;
   text-align: center;
   vertical-align: middle;
   font-weight: normal;
}

.comparison-table thead th {
   padding-top: 1.5rem;
   padding-bottom: 1.5rem;
   border-bottom: 1px solid var(--comparison-divider);
}

/* Comparison columns shrink to fit their header text; Features column has
   no explicit width and absorbs the remaining space. */
.comparison-table__col-head,
.comparison-row__cell {
   width: 1%;
   white-space: nowrap;
   padding-left: 2.75rem !important;
   padding-right: 2.75rem !important;
}

@media (max-width: 767px) {
   .comparison-table__col-head,
   .comparison-row__cell {
      padding-left: 1rem !important;
      padding-right: 1rem !important;
   }
}

.comparison-table__feature-head,
.comparison-row__feature {
   width: auto;
   text-align: left !important;
   background: inherit;
   padding-left: 0rem !important;
}

@media (max-width: 767px) {
   .comparison-table__feature-head,
   .comparison-row__feature {
      position: sticky;
      left: 0;
      z-index: 1;
      background: var(--comparison-bg);
      width: auto;
      min-width: 180px;
      max-width: 200px;
   }
}

.comparison-table tbody tr + tr th,
.comparison-table tbody tr + tr td {
   border-top: 1px solid var(--comparison-divider);
}

.comparison-row__feature {
   text-align: left !important;
}

.comparison-table tr:first-child .comparison-row__cell:first-of-type {
   border-top: none !important;
} 

/* Highlight column: cell-level background with rounded top on header and
   rounded bottom on the last body row. */
.comparison-table__col-head.is-highlight,
.comparison-row__cell.is-highlight {
   background: var(--comparison-highlight);
   color: #fff;
}

.comparison-table__col-head.is-highlight {
   border-top-left-radius: 8px;
   border-top-right-radius: 8px;
   border-bottom: 1px solid var(--comparison-highlight-border);
}

.comparison-table tbody tr:last-child .comparison-row__cell.is-highlight {
   border-bottom-left-radius: 8px;
   border-bottom-right-radius: 8px;
}

.comparison-row__cell.is-highlight {
   border-top: 1px solid var(--comparison-highlight-border) !important;
}

.comparison-icon {
   width: 28px;
   height: 28px;
   display: inline-block;
}

.comparison-icon--yes {
   color: var(--comparison-yes);
}

.comparison-row__cell.is-highlight .comparison-icon--yes {
   color: var(--comparison-yes);
}

.comparison-icon--no {
   color: var(--comparison-no);
}

.comparison-table__cta {
   margin-top: 2.5rem;
}

/* No-scroll variant: when [comparison_table] is given `hide-mobile=` the
   horizontal scroll + edge gradient are disabled and the marked columns
   are hidden via display:none on mobile instead. */
@media (max-width: 767px) {
   .comparison-table-wrapper--no-scroll .comparison-col--hide-mobile {
      display: none !important;
   }

   .comparison-table-wrapper--no-scroll .comparison-table {
      min-width: 0;
   }

   .comparison-table-wrapper--no-scroll .comparison-table__scroll {
      overflow-x: visible;
   }

   .comparison-table-wrapper--no-scroll .comparison-table__scroll-frame {
      width: 100%;
      margin-left: 0;
      padding: 0;
   }

   .comparison-table-wrapper--no-scroll .comparison-table__scroll-frame::after {
      display: none;
   }

   .comparison-table-wrapper--no-scroll .comparison-table__feature-head,
   .comparison-table-wrapper--no-scroll .comparison-row__feature {
      position: static;
      min-width: 0;
      max-width: none;
   }
}

/* ---- Component: form_row ----------------------------------------------- */
.form-row {
   --form-row-bg: #f1f1f1;
   --form-row-text: #333;
   --form-row-input-bg: #ffffff;
   --form-row-button-bg: #333333;
   --form-row-button-color: #ffffff;
   --form-row-button-border: #333333;

   position: relative;
   background-color: var(--form-row-bg);
   color: var(--form-row-text);
   padding: 5rem 1.5rem;
   overflow: hidden;
}

@media (max-width: 768px) {
   .form-row {
      padding: 3rem 0rem !important;
   }
}

.form-row--yellow {
   --form-row-bg: #fdd756;
   --form-row-text: #333;
   --form-row-button-bg: transparent;
   --form-row-button-color: #333;
   --form-row-button-border: #333;
}

.form-row--light-gray {
   --form-row-bg: #f1f1f1;
}

.form-row--dark-gray {
   --form-row-bg: #393839;
   --form-row-text: #fff;
   --form-row-button-bg: transparent;
   --form-row-button-color: #fff;
   --form-row-button-border: #fff;
}

.form-row--white {
   --form-row-bg: #ffffff;
}

/* The theme's main.css sets .background-layer to width:calc(100vw + 160px),
   left:50%, transform:translateX(-50%), max-width:1760px, and background-size:
   contain — designed for full-bleed parallax sections. Inside a form_row we
   want the bg to fill the form_row box exactly, so we have to neutralize all
   of those theme defaults. */
.form-row .background-layer {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   width: 100%;
   height: 100%;
   min-width: 0;
   max-width: none;
   transform: none;
   background-repeat: no-repeat;
   background-size: cover;
   background-position: bottom;
   pointer-events: none;
}

.form-row__row {
   position: relative;
   z-index: 1;
   max-width: 1300px;
   margin: 0 auto;
}

.form-row__col-left {
   padding-right: 1.5rem;
}

.form-row__title {
   margin-bottom: 1.5rem;
   line-height: 1.1;
}

.form-row__content {
   margin-bottom: 1.5rem;
}

.form-row__content p {
   margin-bottom: 1rem;
}

.form-row__content p:last-child {
   margin-bottom: 0;
}

/* Team members — horizontal photo + name/title/email */
.form-row__team {
   margin-top: 2.5rem;
}

.form-row__team-member {
   display: flex;
   align-items: center;
   gap: 1.5rem;
   margin-bottom: 1.5rem;
}

.form-row__team-member:last-child {
   margin-bottom: 0;
}

.form-row__team-image {
   flex: 0 0 auto;
   width: 90px;
   height: 90px;
   border-radius: 50%;
   overflow: hidden;
}

.form-row__team-image img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
}

.form-row__team-info {
   flex: 1 1 auto;
   min-width: 0;
}

.form-row__team-name {
   margin: 0 0 0.2rem;
   font-size: 1.35rem;
   font-weight: normal;
   line-height: 1.2;
}

.form-row__team-title {
   margin: 0 0 0.5rem;
   letter-spacing: 0.06em;
}

.form-row__team-email {
   color: inherit;
   text-decoration: none;
   border-bottom: 1px solid transparent;
   transition: border-color 0.2s ease;
}

.form-row__team-email:hover {
   border-bottom-color: currentColor;
}

/* GravityForms styling, scoped to this component only */
.form-row__form .gform_wrapper {
   margin: 0;
}

/* Force sans-serif (Geomanist) on every label/input/control inside the form */
.form-row__form,
.form-row__form label,
.form-row__form .gfield_label,
.form-row__form .gform-field-label,
.form-row__form .gfield_consent_label,
.form-row__form .gchoice label,
.form-row__form input,
.form-row__form textarea,
.form-row__form select,
.form-row__form button {
   font-family: Geomanist, sans-serif;
}

.form-row__form .gfield {
   margin-bottom: 1.25rem;
}

.form-row__form .gfield_label,
.form-row__form .gform-field-label {
   display: block;
   font-family: inherit;
   font-size: 0.8rem;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   font-weight: normal;
   margin-bottom: 0.6rem;
   color: inherit;
}

.form-row__form input[type="text"],
.form-row__form input[type="email"],
.form-row__form input[type="tel"],
.form-row__form input[type="number"],
.form-row__form input[type="url"],
.form-row__form textarea,
.form-row__form select {
   width: 100%;
   background: var(--form-row-input-bg);
   border: none;
   padding: 1rem 1.1rem;
   font-size: 1rem;
   color: #333;
   border-radius: 0;
   box-shadow: none;
}

.form-row__form textarea {
   min-height: 100px;
   resize: vertical;
}

.form-row__form .gfield_consent_label,
.form-row__form .gchoice label {
   text-transform: none;
   letter-spacing: 0;
   font-size: 0.95rem;
   margin-left: 0;
}

/* Consent field: checkbox + label inline instead of stacked */
.form-row__form .ginput_container_consent,
.form-row__form .gchoice {
   display: flex;
   align-items: flex-start;
   gap: 0.6rem;
}

.form-row__form .ginput_container_consent input[type="checkbox"],
.form-row__form .gchoice input[type="checkbox"] {
   width: auto;
   margin: 0;
   flex-shrink: 0;
   margin-top: 0.2rem;
}

.form-row__form .gform_footer,
.form-row__form .gform_button {
   margin-top: 1.5rem;
}

.form-row__form .gform_button {
   background: var(--form-row-button-bg) !important;
   color: var(--form-row-button-color) !important;
   border: 2px solid var(--form-row-button-border) !important;
   padding: 1rem 2rem !important;
   font-size: 0.85rem !important;
   text-transform: uppercase !important;
   letter-spacing: 0.12em !important;
   width: 100%;
   cursor: pointer;
   transition: background 0.2s ease, color 0.2s ease;
   border-radius: 0;
}

.form-row--yellow .form-row__form .gform_button:hover {
   background: #333 !important;
   color: #fdd756 !important;
}

.form-row--light-gray .form-row__form .gform_button:hover,
.form-row--white .form-row__form .gform_button:hover {
   background: #555 !important;
   border-color: #555 !important;
}

.form-row--dark-gray .form-row__form .gform_button:hover {
   background: #fff !important;
   color: #333 !important;
}

.form-row__col-right .gform_button {
   max-width: 360px;
}

/* Mobile: stack columns, form lands below the left content (source order) */
@media (max-width: 767px) {
   .form-row {
      padding: 3rem 1.25rem;
   }

   .form-row__col-left {
      padding-right: 0;
   }

   .form-row__col-right {
      margin-top: 2.5rem;
   }

   .form-row__team-image {
      width: 70px;
      height: 70px;
   }
}

/* ---- Component: single_splash_video (overlay play button) -------------- */

.single-splash--video .content-card {
   position: relative;
   z-index: 2 !important;
}

.single-splash--video .single-splash__video-wrapper {
   position: relative;
   aspect-ratio: 16 / 9;
   overflow: hidden;
}

.single-splash--video .single-splash__video-wrapper img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
}

/* Semi-transparent dark overlay that sits BETWEEN the image and the play
   button — gives the play button contrast on bright/busy poster images. */
.single-splash--video .single-splash__video-wrapper::after {
   content: '';
   position: absolute;
   inset: 0;
   background: rgba(0, 0, 0, 0.4);
   pointer-events: none;
   z-index: 1;
}

.single-splash__video-overlay-btn {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   background: transparent;
   border: none;
   cursor: pointer;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 1rem;
   padding: 0;
   color: #fff;
   z-index: 2;
}

.single-splash__video-overlay-btn .play-icon {
   width: 96px !important;
   height: auto !important;
   transition: transform 0.2s ease;
}

.single-splash__play-label {
   color: #fff;
}

@media (max-width: 767px) {
   .single-splash__video-overlay-btn .play-icon {
      width: 52px !important;
   }
}

/* ---- Component: testimonial_grid --------------------------------------- */
.testimonial-grid {
   --testimonial-grid-bg: #ffffff;
   --testimonial-grid-text: #333;
   --testimonial-grid-author: #888;

   position: relative;
   background-color: var(--testimonial-grid-bg);
   color: var(--testimonial-grid-text);
   padding: 5rem 1.5rem;
   overflow: hidden;
}

.testimonial-grid--white {
   --testimonial-grid-bg: #ffffff;
}

.testimonial-grid--light-gray {
   --testimonial-grid-bg: #f1f1f1;
}

.testimonial-grid--yellow {
   --testimonial-grid-bg: #fdd756;
}

.testimonial-grid--dark-gray {
   --testimonial-grid-bg: #393839;
   --testimonial-grid-text: #fff;
   --testimonial-grid-author: rgba(255, 255, 255, 0.65);
}

/* Neutralize the theme's main.css .background-layer width/left/transform/
   max-width so the decorative bg fills the testimonial section box exactly
   instead of being sized for the full-viewport parallax pattern. */
.testimonial-grid .background-layer {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   width: 100%;
   height: 100%;
   min-width: 0;
   max-width: none;
   transform: none;
   background-size: cover;
   background-repeat: no-repeat;
   background-position: bottom center;
   pointer-events: none;
}

.testimonial-grid__container {
   position: relative;
   z-index: 1;
   max-width: 1300px;
   margin: 0 auto;
}

.testimonial-grid__intro {
   text-align: center;
   margin-bottom: 4rem;
}

.testimonial-grid__title {
   margin-bottom: 1.25rem;
}

.testimonial-grid__content {
   max-width: 720px;
   margin: 0 auto;
}

.testimonial-grid__items {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 4rem;
}

@media (max-width: 767px) {
   .testimonial-grid__items {
      grid-template-columns: 1fr;
   }
}

.testimonial-grid__item {
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
}

.testimonial-grid__icon {
   width: 63px;
}

.testimonial-grid__icon img {
   width: 100%;
   height: auto;
   display: block;
   object-fit: contain;
   object-position: center;
}

.testimonial-grid__quote {
   margin: 0;
}

.testimonial-grid__body {
   margin: 0;
}

.testimonial-grid__body p {
   margin-bottom: 1rem;
}

.testimonial-grid__body p:last-child {
   margin-bottom: 0;
}

.testimonial-grid__author {
   margin: 0;
}

@media (max-width: 767px) {
   .testimonial-grid {
      padding: 3rem 1.25rem;
   }
   .testimonial-grid__intro {
      margin-bottom: 2.5rem;
   }
   .testimonial-grid__items {
      gap: 2.5rem;
   }
}