/* Remove the highlighter-underline bar under .ree-text/.rt40 keyword spans
   (e.g. "Award", "Finest", "Touch") - not wanted on this site. */
.ree-text:after {
  content: none;
}

/* Smooth scroll for in-page nav (Home/Portfolio/Blogs/Contact links, the
   "View Portfolio"/"View All Work" CTAs, etc.) - covers both directions
   since it applies to any anchor jump regardless of scroll direction. */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px; /* fixed header is 85px tall - keep anchored sections clear of it */
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* ---------------------------------------------------------------------
   Accessibility & performance fixes layered on top of the ported Reevan
   template stylesheets. Loaded last so these rules win the cascade.

   Scope note: an automated contrast scan flagged many "text on #ffffff"
   findings; some were false positives from the scanner defaulting to
   white when it couldn't resolve a bg color up the tree (verified
   against real rendered backgrounds at the time). Only combinations
   verified against their REAL rendered background are fixed below.
   --------------------------------------------------------------------- */

/* Solid orange CTA buttons: white text on #ff5b2e was 3.09:1 (needs 4.5:1).
   Self-contained failure regardless of section theme - genuine fix. */
.ree-btn-grdt1 {
  background: #cc4925;
  border-color: #cc4925;
}
.ree-btn-grdt1:hover {
  color: #cc4925;
}

/* Header "Request Quote" pill: orange text on a real white background,
   3.09:1 (needs 4.5:1). Genuine fix. */
.ree-btn-grdt2 {
  color: #cc4925;
  border-color: #cc4925;
}
.ree-btn-grdt2:hover {
  background: #cc4925;
  border-color: #cc4925;
}

/* "Know More AuraTech" outline button: default (non-dark-bg) state is
   transparent bg + #fcfcfd (near-white) text/border, illegible against the
   site's light sections. Give it a dark, on-brand outline instead. */
.ree-btn-grdt3 {
  color: #cc4925;
  border-color: #cc4925;
}
.ree-btn-grdt3:hover {
  color: #fff;
  background: #cc4925;
}

/* Cramped padding: .icon-with-title had 0 horizontal padding, so labels
   sit flush against the box edges (Technologies section). */
.icon-with-title {
  padding-left: 12px;
  padding-right: 12px;
}

/* Service card kicker badges: orange text on a self-contained light-peach
   background, 2.4:1 (needs 4.5:1). #cc4925 (used elsewhere) only reaches
   3.6:1 against this lighter #ffdbca bg, so this badge needs a deeper shade. */
.sub-heading2 {
  color: #a63b1e;
}

/* owl.carousel's autoHeight option animates the `height` property directly,
   which causes layout thrash (forces reflow every frame). Snap instead of
   animating - carousels still resize correctly, just without the tween. */
.owl-height {
  transition: none;
}

/* Footer logo: the original footer-logo.png was small enough to need no
   explicit size (unlike the header logo, constrained to 230px by
   responsive.css). The AuraTech logo's native size is much larger, so it
   needs the same kind of cap here. */
.footer-logo img {
  max-width: 180px;
  width: 100%;
  height: auto;
}

/* Stats badge on light-theme pages (app-development): white text directly
   on the base #ff5b2e background, 3.09:1 (needs 4.5:1). Scoped away from
   .dark-light-a (the homepage's dark variant, already fine as-is). */
.quick-key-points:not(.dark-light-a) {
  background: #cc4925;
}

/* Mobile off-canvas nav level titles ("Reevan Menu", "Home", "Portfolio"...):
   the hc-offcanvas-nav plugin applies this orange background via inline
   style at runtime, so it needs !important to win over that. White text on
   it was 3.09:1 (needs 4.5:1). Genuine, self-contained fix. */
.nav-title,
.level-title {
  background: #cc4925 !important;
}

/* Heading hierarchy helpers -------------------------------------------- */

/* Standard visually-hidden pattern: present for screen readers/heading
   navigation, removed from visual flow. Used to bridge heading levels
   the design has no visible spot for, with zero visual change. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Demoted former-heading text: keeps the exact visual size/weight/color of
   the h4/h5 it replaced (verified via computed styles) so nothing shifts. */
.demoted-h4 {
  font-size: 22px;
  font-weight: 700;
  line-height: 32px;
  color: #fcfcfd;
}
.demoted-h5 {
  font-size: 20px;
  font-weight: 600;
  color: #fcfcfd;
}
/* Light-section variant (e.g. app-development page): base heading color is
   #30303c there, not the off-white used on dark-bg sections. */
.demoted-h4-light {
  font-size: 22px;
  font-weight: 700;
  line-height: 32px;
  color: #30303c;
}
.demoted-h5-light {
  font-size: 20px;
  font-weight: 600;
  color: #30303c;
}
/* FontAwesome icon centered inside the .ree-card-img box, for service cards
   that don't have a matching bundled svg icon asset. */
.ree-card-icon-fa {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: #cc4925;
}
/* Continuous infinite-scroll logo strip (tech stack, etc). The track renders
   the item list four times back to back (so there's always a full extra
   screen's worth of buffered content on wide viewports) and translates by
   exactly one quarter of its total width, wrapping seamlessly with no gap. */
.tech-marquee {
  overflow: hidden;
  width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.tech-marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: tech-marquee-scroll 24s linear infinite;
}
.tech-marquee:hover .tech-marquee-track {
  animation-play-state: paused;
}
.tech-marquee-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 0 55px;
  flex: none;
}
.tech-marquee-item p {
  margin: 0;
  font-size: 16px;
  color: #666;
  white-space: nowrap;
}
@keyframes tech-marquee-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-25%);
  }
}
/* Standalone stats card for the About page (reuses .key-highlights' grid
   for the numbers, but with its own orange background/padding since it
   isn't nested inside the homepage's .quick-key-points wrapper). */
.about-stats-card {
  background: #ff5b2e;
  padding: 40px 60px;
  border-radius: 14px;
}
.about-stats-card .key-highlights {
  justify-content: center;
}
@media (max-width: 767px) {
  .about-stats-card {
    padding: 30px;
  }
  .about-stats-card .key-highlights {
    grid-template-columns: auto;
    justify-items: center;
    text-align: center;
  }
}
/* About page "Method" section: sticky left heading, steps reveal on the
   right as the reader scrolls past them (active step tracked via
   IntersectionObserver in useActiveStep). */
.about-method .method-sticky {
  position: sticky;
  top: 140px;
}
.about-method .method-steps {
  position: relative;
  padding-left: 40px;
  margin-top: 20px;
}
.about-method .method-steps:before {
  content: "";
  position: absolute;
  left: 6px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: #e5e0d8;
}
.about-method .method-step {
  position: relative;
  min-height: 34vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0.35;
  transition: opacity 0.5s ease;
}
.about-method .method-step:before {
  content: "";
  position: absolute;
  left: -40px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #d8d2c8;
  transition: background 0.4s ease, border-color 0.4s ease;
}
.about-method .method-step.is-active {
  opacity: 1;
}
.about-method .method-step.is-active:before {
  background: #cc4925;
  border-color: #cc4925;
}
.about-method .method-step-num {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #cc4925;
  margin-bottom: 12px;
  text-transform: uppercase;
}
.about-method .method-step p {
  font-size: 22px;
  line-height: 34px;
  color: #30303c;
  max-width: 560px;
  margin: 0;
}
@media (max-width: 991px) {
  .about-method .method-sticky {
    position: static;
    margin-bottom: 20px;
  }
  .about-method .method-step {
    min-height: 0;
    padding: 20px 0;
  }
  .about-method .method-step p {
    font-size: 18px;
    line-height: 28px;
  }
}