/* Tri-State navbar overrides — smaller, transparent at top, eases to
   frosted blur once the page is scrolled past 6% of the viewport.
   !important is required throughout to defeat the inline background-color
   and border-color that Webflow's GSAP scroll animation writes onto
   .fda-navbar-main at runtime. */

.fda-navbar-main {
  background-color: rgba(255, 255, 255, 0) !important;
  backdrop-filter: blur(0px) saturate(100%);
  -webkit-backdrop-filter: blur(0px) saturate(100%);
  border-bottom: 1px solid rgba(10, 15, 21, 0) !important;
  border-color: rgba(10, 15, 21, 0) !important;
  transition:
    background-color 400ms cubic-bezier(0.4, 0, 0.2, 1),
    backdrop-filter 400ms cubic-bezier(0.4, 0, 0.2, 1),
    -webkit-backdrop-filter 400ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

.fda-navbar-main.is-scrolled {
  background-color: rgba(255, 255, 255, 0.55) !important;
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border-bottom: 1px solid rgba(10, 15, 21, 0.08) !important;
  border-color: rgba(10, 15, 21, 0.08) !important;
}

/* Navbar layout: single flex row, `space-between` distributes logo,
   the 4 menu links, and CTA with equal gaps across the full width. */
.fda-navbar-content {
  min-height: 56px !important;
  grid-template-columns: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1rem;
}

.fda-logo {
  width: 5rem !important;
}

.fda-navbar-main .fda-container-medium {
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
}

/* `display: contents` promotes the 4 menu links to direct children of
   .fda-navbar-content, so they take part in the parent's `space-between`
   distribution alongside the logo and CTA. The :not() guard keeps both
   this and the mobile display:none from applying once Webflow moves the
   menu into the slide-out overlay (it sets data-nav-menu-open then). */
.fda-navbar-main .fda-nav-menu:not([data-nav-menu-open]) {
  display: contents;
}

.fda-navbar-main .fda-menu-link {
  padding: 0 !important;
}

.fda-navbar-main .fda-menu-text {
  font-family: "Inter Tight", system-ui, sans-serif;
  font-size: 1.125rem;
  font-weight: 500;
  color: #ffffff;
  letter-spacing: 0.01em;
  transition: color 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* When the navbar is on a light frosted background, switch text to dark navy. */
.fda-navbar-main.is-scrolled .fda-menu-text {
  color: #0a0f15;
}

/* Inside the opened hamburger overlay the backdrop is dark navy, so the
   links must stay white even when the navbar itself is frosted
   (is-scrolled would otherwise paint them navy-on-navy — invisible). */
.fda-navbar-main .w-nav-overlay .fda-menu-text {
  color: #ffffff !important;
}

.fda-navbar-main .fda-menu-link:hover .fda-menu-text {
  color: #aa1b35;
}

/* Webflow's hamburger button sits inside navbar-content and would count
   as another flex item at desktop widths. Hide it on desktop; mobile
   restores it below via the max-width query. */
.fda-navbar-main .w-nav-button {
  display: none;
}

/* CTA button — slightly smaller than the original */
.fda-navbar-button-wrapper .fda-button-main {
  transform: scale(0.78);
  transform-origin: right center;
}

/* Smooth scroll for anchor jumps, plus offset so the fixed navbar
   doesn't cover the top of each section on landing. */
html {
  scroll-behavior: smooth;
}

#services,
#projects,
#contact-form,
#service-blog {
  scroll-margin-top: 90px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .fda-navbar-main {
    transition: none;
  }
}

/* On narrow viewports, drop the menu links (hamburger handles it) and
   shrink the CTA further so the navbar doesn't wrap. */
@media (max-width: 767px) {
  .fda-navbar-main .fda-nav-menu:not([data-nav-menu-open]) {
    display: none !important;
  }
  .fda-navbar-main .w-nav-button {
    display: block;
  }
  .fda-navbar-button-wrapper .fda-button-main {
    transform: scale(0.7);
  }
}

/* Webflow's CMS empty-state boxes ("No items found.") have no CMS behind
   them in this static port — never show them. */
.w-dyn-empty {
  display: none !important;
}

/* ------------------------------------------------------------------ */
/* Typography scale                                                     */
/* The Webflow export shipped an incoherent ramp (hero 70px, some       */
/* section headers 35px and others 25px, card titles 45px, body copy    */
/* anywhere from 16-25px). Four tiers, each responsive via clamp():     */
/*   hero > header > sub-header (card titles) > body, plus an eyebrow   */
/* label size. !important beats every non-important Webflow rule;       */
/* conflicts among these rules resolve by specificity, so the broad     */
/* body rule uses element selectors and the tiers use classes.          */
/* ------------------------------------------------------------------ */
:root {
  --font-hero: clamp(2.25rem, 4.5vw + 1rem, 3.25rem);      /* 36-52px */
  --font-header: clamp(1.625rem, 1.8vw + 1rem, 2.125rem);  /* 26-34px */
  --font-subhead: clamp(1.25rem, 0.6vw + 1.05rem, 1.5rem); /* 20-24px */
  --font-body: 1rem;
  --font-eyebrow: 1rem;
  --font-button: clamp(1.375rem, 1vw + 1rem, 1.75rem);     /* 22-28px */
  --font-stat: clamp(1.75rem, 1.6vw + 1rem, 2.25rem);      /* 28-36px */
}

/* Body copy baseline — every paragraph/div inside page content. The
   navbar lives outside <main>/<footer>, so it is untouched. Tier rules
   below re-assert larger sizes where a class marks a heading. */
main p,
main div,
footer div,
footer p {
  font-size: var(--font-body) !important;
  line-height: 1.55 !important;
}

/* Eyebrow labels ("Who we serve", "Our strengths", hero tagline). */
.fda-sub-text {
  font-size: var(--font-eyebrow) !important;
  line-height: 1.3 !important;
}

/* Sub-headers: card titles, accordion rows, stat labels, blog card
   titles, process steps. */
.fda-text-style-h3,
.fda-text-style-h4,
.fda-text-style-h5 {
  font-size: var(--font-subhead) !important;
  line-height: 1.25 !important;
}

/* Small headings (footer contact lines, trust chip). */
.fda-text-style-h6 {
  font-size: 1.125rem !important;
  line-height: 1.35 !important;
}

/* Section headers — h2 everywhere (several carry .fda-text-style-h5,
   which h2[class] outranks), div-based headers, and the footer h3. */
h2,
h2[class],
.fda-text-style-h2,
.fda-footer h3 {
  font-size: var(--font-header) !important;
  line-height: 1.2 !important;
}

/* Heroes — page h1s (homepage hero, blog listing, post titles). */
h1,
h1[class] {
  font-size: var(--font-hero) !important;
  line-height: 1.12 !important;
}

/* Buttons — Bebas display face, reduced from the export's 48px. */
.fda-button-text {
  font-size: var(--font-button) !important;
  line-height: 1.2 !important;
}

/* Animated stat counters and their unit suffixes. */
.fda-counter-text {
  font-size: var(--font-stat) !important;
  line-height: 1.1 !important;
}

/* The counter is a digit "train" clipped by .fda-counter-box, whose
   height Webflow fixed at ~61px for the original 70px digits. Tie the
   mask to exactly one digit line (font-size x line-height) so the next
   digit in the train can never peek through below. */
.fda-counter-box {
  height: calc(var(--font-stat) * 1.1) !important;
  min-height: 0 !important;
}

/* Decorative background words ("what we do", "projects", footer brand
   line) — scale with the viewport so they never collide with content. */
.fda-big-heading-text {
  font-size: clamp(2.75rem, 9vw, 7rem) !important;
  line-height: 1 !important;
}

.fda-medium-text {
  font-size: clamp(2.5rem, 10.5vw, 8.5rem) !important;
  line-height: 1 !important;
}

/* GSAP SplitText rewraps animated headings letter-by-letter in nested
   divs at runtime; without this, the body-copy baseline above would
   shrink each letter to 1rem ("what we do" rendered tiny). */
.gsap_split_word,
.gsap_split_letter,
.fda-big-heading-text div,
.fda-medium-text div {
  font-size: inherit !important;
  line-height: inherit !important;
}

/* Forms — inputs and labels on the contact form. */
.fda-text-field,
.fda-textarea,
.fda-select-field {
  font-size: 1rem !important;
}

.form-label {
  font-size: 0.875rem !important;
}

/* ------------------------------------------------------------------ */
/* Hamburger button: no gray plate — just the three-line icon. Webflow  */
/* paints #C8C8C8 on .w--open and a plate on the base state; keep it    */
/* transparent everywhere and let the icon follow navbar text color.    */
/* ------------------------------------------------------------------ */
.fda-navbar-main .w-nav-button,
.fda-navbar-main .w-nav-button.w--open,
.fda-navbar-main .w-nav-button:focus,
.fda-navbar-main .w-nav-button:hover {
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: #ffffff;
}

.fda-navbar-main.is-scrolled .w-nav-button {
  color: #0a0f15;
}

/* Footer contact block: the export keeps address and phone/email in one
   row on phones, cramming both into ~165px columns. Stack them. */
@media (max-width: 767px) {
  .fda-footer-middle-right {
    flex-direction: column !important;
    gap: 1.25rem;
  }
}

/* Dedicated /contact page: clear the fixed navbar (the uniform 70px
   section padding is not enough on a page with no hero above) and give
   the page heading room before the two-column form block.
   The section carries both .fda-contact-suppot and .fda-contact-page; the
   uniform-section-rhythm group below also targets .fda-contact-suppot with
   !important, so at equal specificity it would win by source order and clip
   the heading under the navbar (navbar is ~77px desktop but ~97-101px on
   tablet/mobile, where the padding was smallest). Qualify with both classes
   so this always beats the single-class rule at every breakpoint. */
.fda-contact-suppot.fda-contact-page {
  padding-top: 120px !important;
}

/* Tablet + mobile: the navbar is taller here (~97-101px vs ~77px on desktop)
   and the heading has less intrinsic margin, so it needs MORE top padding,
   not less, to clear the navbar with a comparable gap. */
@media (max-width: 991px) {
  .fda-contact-suppot.fda-contact-page {
    padding-top: 150px !important;
  }
}

.fda-contact-page-heading {
  margin-bottom: 3rem;
}

.fda-contact-page-heading .fda-sub-heading-wrapper-inner {
  justify-content: center;
}

@media (max-width: 767px) {
  .fda-contact-page-heading {
    margin-bottom: 2rem;
  }
  /* Stack the form's half-width field pairs — 165px inputs are too
     cramped to type in on phones. */
  .form-row-half {
    flex-direction: column !important;
    display: flex !important;
  }
  .form-row-half .form-field-cell {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Uniform section rhythm. The Webflow export left each homepage section
   with its own vertical padding (anywhere from 0 to 140px per edge), so
   gaps between sections ranged 0-280px. Every section gets the same
   padding per breakpoint; !important beats the per-section fda-* rules. */
#services,
.fda-home-v3-industry,
.fda-contact-suppot,
.fda-home-v3-strength,
.fda-home-v1-services,
.fda-home-v2-work,
.fda-home-v1-project,
.fda-home-v2-why-choose-us,
.fda-home-v3-work,
.fda-home-v3-blog {
  padding-top: 70px !important;
  padding-bottom: 70px !important;
}

@media (max-width: 991px) {
  #services,
  .fda-home-v3-industry,
  .fda-contact-suppot,
  .fda-home-v3-strength,
  .fda-home-v1-services,
  .fda-home-v2-work,
  .fda-home-v1-project,
  .fda-home-v2-why-choose-us,
  .fda-home-v3-work,
  .fda-home-v3-blog {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
}

@media (max-width: 767px) {
  #services,
  .fda-home-v3-industry,
  .fda-contact-suppot,
  .fda-home-v3-strength,
  .fda-home-v1-services,
  .fda-home-v2-work,
  .fda-home-v1-project,
  .fda-home-v2-why-choose-us,
  .fda-home-v3-work,
  .fda-home-v3-blog {
    padding-top: 36px !important;
    padding-bottom: 36px !important;
  }
}

/* Footer background: replace the Kontrek template's office-tower stock photo
   with a real Tri-State install shot, heavily darkened to keep text contrast. */
.fda-footer {
  background-image: linear-gradient(rgba(10, 15, 21, 0.88), rgba(10, 15, 21, 0.88)), url('../images/tri-state-project-02137.jpg');
}

/* Blog post hero: cap the full-width 4:3 photo to a wide crop so the
   article body starts closer to the fold. */
.post-hero-image {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
}

/* Home hero frosted overlay: the scrolled-navbar blur/saturate recipe
   laid over the hero photo, but tinted dark navy instead of white so the
   white hero logo/heading/CTA stay crisp (a white tint washed them out).
   The hero image lives on .fda-home-v1-hero-overlay (z-index 2); this
   ::after sits above that image but below .fda-home-v1-hero-content
   (z-index 3), so the content stays sharp on top of the frosted photo.
   Blur/saturate values from .fda-navbar-main.is-scrolled. */
.fda-home-v1-hero-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(10, 15, 21, 0.15);
  -webkit-backdrop-filter: blur(2px) saturate(180%);
  backdrop-filter: blur(2px) saturate(180%);
  pointer-events: none;
}

/* ------------------------------------------------------------------ */
/* CTA affordance & feedback (CRO pass, 2026-07-13)                     */
/* The export's buttons are flat red rectangles with no hover/active/  */
/* focus states and no cursor on the invisible form-submit inputs.     */
/* Keep the industrial flat-red brand; add the interaction physics     */
/* that signal "clickable": subtle radius, restrained elevation,       */
/* darken+lift on hover, press on click, visible keyboard focus,       */
/* pointer cursor everywhere, 44px touch target.                       */
/* ------------------------------------------------------------------ */
.fda-button-main {
  cursor: pointer;
  border-radius: 4px;
  min-height: 44px;
  box-shadow: 0 2px 6px rgba(10, 15, 21, 0.22);
  transition:
    background-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

/* Hover: darken the red one step, lift 1px, deepen the shadow.
   Form submits need the wrapper variant — the real <input> is an
   invisible overlay covering the fake button, so :hover never fires
   on .fda-button-main itself there. */
a.fda-button-main:hover,
.fda-contact-button-inner:hover .fda-button-main {
  background-color: #93172e;
  box-shadow: 0 4px 12px rgba(10, 15, 21, 0.3);
  transform: translateY(-1px);
}

/* Active/press: settle back down — tactile confirmation. */
a.fda-button-main:active,
.fda-contact-button-inner:active .fda-button-main {
  background-color: #7f1428;
  box-shadow: 0 1px 3px rgba(10, 15, 21, 0.28);
  transform: translateY(0);
}

/* Keyboard focus: double ring (white inner + navy outer) so it reads
   on white pages, the navy footer, and the hero photo alike. The
   sibling selector paints the ring on the visible fake button when
   the invisible submit input holds focus. */
a.fda-button-main:focus-visible,
.fda-submit-main-button:focus-visible + .fda-button-main {
  outline: none;
  box-shadow:
    0 0 0 2px #ffffff,
    0 0 0 5px #0a0f15;
}

/* The invisible real submit control: pointer cursor (inputs default
   to the arrow cursor, which quietly says "not clickable"). */
.fda-submit-main-button {
  cursor: pointer;
}

/* Navbar CTA is scaled 0.78 by an earlier override; re-assert the
   scale in hover/active so the lift doesn't replace it and pop the
   button to full size. */
.fda-navbar-button-wrapper .fda-button-main:hover {
  transform: scale(0.78) translateY(-1px);
}
.fda-navbar-button-wrapper .fda-button-main:active {
  transform: scale(0.78);
}

@media (prefers-reduced-motion: reduce) {
  .fda-button-main {
    transition: none;
  }
  a.fda-button-main:hover,
  .fda-contact-button-inner:hover .fda-button-main,
  .fda-navbar-button-wrapper .fda-button-main:hover {
    transform: none;
  }
  .fda-navbar-button-wrapper .fda-button-main:hover {
    transform: scale(0.78);
  }
}