/* ============================================================
   Polish layer — additive UI refinements on top of Webflow base.
   Loaded after ps-strategy.webflow.css so these rules win on
   equal specificity ties. Kept minimal to avoid surprises.
   ============================================================ */

/* --- Typography ------------------------------------------------ */

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5,
.heading, .heading-2, .heading-3, .heading-4, .heading-5,
.side-feature-header,
.hero-call-text {
  text-wrap: balance;
}

.hero-text,
.grey-text,
.paragraph-small,
p {
  text-wrap: pretty;
}

.phone-number,
.hero-call-text,
.fact-item .heading {
  font-variant-numeric: tabular-nums;
}

/* --- Surfaces ------------------------------------------------- */

.side-feature-image img {
  outline: 1px solid rgba(0, 0, 0, 0.1);
  outline-offset: -1px;
  border-radius: 4px;
}

/* --- Interaction --------------------------------------------- */

/* Smooth tactile press on every button-like control */
.button,
.w-button,
.small-button,
.form-button {
  transition-property: background-color, color, transform, box-shadow;
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

/* Ghost variants — Webflow base sets `transition: box-shadow 200ms ease`
   at specificity 0,2,0 which strips every other transitionable property
   (including `filter`, breaking the scroll-in blur animation on these
   buttons). Re-add a full transition list at matching specificity. */
.button.ghost-button,
.button.ghost-white-button {
  transition: box-shadow 200ms ease,
              background-color 220ms cubic-bezier(0.2, 0, 0, 1),
              color 220ms cubic-bezier(0.2, 0, 0, 1),
              transform 200ms cubic-bezier(0.2, 0, 0, 1),
              filter 700ms cubic-bezier(0.2, 0, 0, 1);
}

/* Ghost-button hover — Webflow leaves it visually identical on hover.
   Fill with brand red + white text so it animates like solid buttons. */
.button.ghost-button:hover {
  background-color: #dc0037;
  background-image: none;
  color: #fff;
}

.button:active,
.w-button:active,
.small-button:active,
.form-button:active {
  transform: scale(0.96);
  transition-duration: 80ms;
}

/* Nav links snap on press without affecting Webflow's hover underline */
.nav-link:active {
  transform: scale(0.97);
  transition: transform 80ms cubic-bezier(0.2, 0, 0, 1);
}

/* Expand social-link hit area to 40x40 without disrupting flex layout.
   Webflow base sets display:flex + padding:8px (~36px). */
.social-link {
  min-width: 40px;
  min-height: 40px;
}

/* Form input focus state — soft halo instead of harsh border swap */
.input.w-input:focus,
.input.text-area.w-input:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(34, 71, 101, 0.18);
  transition-property: box-shadow, border-color;
  transition-duration: 180ms;
  transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

/* Phone tel + email text links — Webflow underlines on hover (jumpy).
   Swap to opacity shift for a softer feel. Both already inherit
   brand red color. */
.phone-number,
.text-link {
  transition: opacity 150ms cubic-bezier(0.2, 0, 0, 1);
}

.phone-number:hover,
.text-link:hover {
  opacity: 0.7;
  text-decoration: none;
}

/* Service icons — tactile scale when their parent .feature card is
   hovered. Subtle, so it doesn't compete with click affordances. */
.feature {
  cursor: default;
}

.feature .feature-icon {
  transition: transform 280ms cubic-bezier(0.2, 0, 0, 1);
  will-change: transform;
}

.feature:hover .feature-icon {
  transform: scale(1.08);
}

/* Footer scroll-up arrow — nudge up on hover for affordance.
   Webflow has a scroll-down-hover interaction; this complements it. */
.scroll-up-button {
  transition: transform 200ms cubic-bezier(0.2, 0, 0, 1);
}

.scroll-up-button:hover {
  transform: translateY(-3px);
}

/* Keyboard focus ring — visible without being garish. Webflow strips
   default outline in several places; restore it for accessibility. */
a:focus-visible,
button:focus-visible,
.button:focus-visible,
.w-button:focus-visible,
.nav-link:focus-visible {
  outline: 2px solid #dc0037;
  outline-offset: 3px;
  border-radius: 2px;
}

/* --- Scroll-in blur on scroll-animated elements -------------- */

/* Initial blurred state. `.in-view` toggled by IntersectionObserver
   in _app.tsx. Runs alongside Webflow IX2's opacity fade.
   Form intentionally excluded — never blur fields users interact with. */
[data-ix^="fade-up"],
.fact-item,
.side-feature-content,
.side-feature-mini,
.call-to-action,
.section-header-wrapper,
.vertical-header-wrapper {
  filter: blur(10px);
  transition: filter 700ms cubic-bezier(0.2, 0, 0, 1);
  will-change: filter;
}

[data-ix^="fade-up"].in-view,
.fact-item.in-view,
.side-feature-content.in-view,
.side-feature-mini.in-view,
.call-to-action.in-view,
.section-header-wrapper.in-view,
.vertical-header-wrapper.in-view {
  filter: blur(0);
}

/* --- Motion safety ------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  [data-ix^="fade-up"],
  .fact-item,
  .side-feature-content,
  .side-feature-mini,
  .call-to-action,
  .section-header-wrapper,
  .vertical-header-wrapper {
    filter: none !important;
  }
}