/* ==========================================================================
   CSS Infracon — Site Enhancements
   Responsive polish, extra spacing/rhythm for interior pages, and
   professional entrance/hover animations. Loaded on every page AFTER
   brand.css so it can safely refine/override those rules.
   ========================================================================== */

/* ---------- Global smoothing ---------- */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .brand-scope *, .brand-scope *::before, .brand-scope *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---------- Utility: responsive two-column layout ----------
   Used where a section needs an inline gap/alignment override but must
   still collapse to one column on tablets/phones (e.g. About "Our Story"). */
.two-col-responsive {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 900px) {
  .two-col-responsive { grid-template-columns: 1fr; gap: 40px !important; }
}
@media (max-width: 520px) {
  .two-col-responsive { gap: 32px !important; }
}

/* ---------- More generous, consistent page rhythm ----------
   Interior (non-home) pages should feel as substantial as the home page. */
.brand-scope .section { padding: 104px 0; }
.brand-scope .section-tight { padding: 64px 0; }
.brand-scope .page-hero { padding: 152px 0 112px; }
.brand-scope .section-head { margin-bottom: 56px; }
.brand-scope .brand-container { width: 100%; }

/* Breathing room between stacked sections that share a background */
.brand-scope .section + .section,
.brand-scope .section-tight + .section,
.brand-scope .section + .section-tight {
  border-top: 1px solid transparent; /* keeps rhythm consistent, no visual line */
}

/* ---------- Entrance animations (progressive enhancement on top of .reveal) ---------- */
@keyframes ci-fadeInUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ci-fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes ci-scaleIn {
  from { opacity: 0; transform: scale(.94); }
  to   { opacity: 1; transform: scale(1); }
}

.brand-scope .page-hero h1 { animation: ci-fadeInUp .8s cubic-bezier(.16,1,.3,1) both; }
.brand-scope .page-hero .lead { animation: ci-fadeInUp .8s cubic-bezier(.16,1,.3,1) .12s both; }
.brand-scope .page-hero .page-hero-eyebrow { animation: ci-fadeIn .6s ease both; }
.brand-scope .page-hero .breadcrumb { animation: ci-fadeInUp .8s cubic-bezier(.16,1,.3,1) .24s both; }

/* Card / interactive hover polish (adds a touch more life without being busy) */
.brand-scope .info-card,
.brand-scope .testi-card,
.brand-scope .accordion-item,
.brand-scope .form-card,
.brand-scope .contact-card {
  will-change: transform;
}
.brand-scope .info-card,
.brand-scope .testi-card {
  transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease, border-color .35s ease;
}
.brand-scope .btn { transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease, background .25s ease, color .25s ease; }
.brand-scope .btn:active { transform: translateY(-1px) scale(.98); }

.brand-scope .value-pill,
.brand-scope .property-type,
.brand-scope .filter-chip {
  transition: all .25s ease;
}

.brand-scope .accordion-item {
  transition: box-shadow .3s ease, border-color .3s ease;
}
.brand-scope .accordion-item:hover {
  border-color: var(--gold);
}
.brand-scope .accordion-head .plus {
  will-change: transform;
}

/* Image zoom-on-hover wherever a card wraps an <img> */
.brand-scope .info-card img,
.brand-scope .testi-avatar {
  transition: transform .4s ease;
}

/* Buttons: subtle sheen sweep on hover, matching footer's subscribe-btn */
.brand-scope .btn-gold,
.brand-scope .btn-outline,
.brand-scope .btn-light-outline {
  position: relative;
  overflow: hidden;
}
.brand-scope .btn-gold::after {
  content: "";
  position: absolute;
  top: 0; left: -60%;
  width: 40%; height: 100%;
  background: rgba(255,255,255,0.45);
  transform: skewX(-20deg);
  transition: left .6s ease;
  pointer-events: none;
}
.brand-scope .btn-gold:hover::after { left: 130%; }

/* Section eyebrow tick animation */
.brand-scope .section-eyebrow { position: relative; }

/* Stat numbers count-in feel via subtle scale */
.brand-scope .stats-strip .stat-num { animation: ci-scaleIn .6s cubic-bezier(.16,1,.3,1) both; }

/* Sticky header shadow / breathing handled by theme CSS already; leave header alone */

/* ==========================================================================
   Responsive overhaul — brand-scope components
   ========================================================================== */

/* ----- Large tablets / small laptops ----- */
@media (max-width: 1100px) {
  .brand-scope .brand-container { padding: 0 32px; }
  .brand-scope .contact-card,
  .brand-scope .form-card { padding: 36px; }
}

/* ----- Tablets ----- */
@media (max-width: 900px) {
  .brand-scope .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .brand-scope .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .brand-scope .stats-strip { grid-template-columns: repeat(2, 1fr); gap: 28px 20px; }
  .brand-scope .contact-grid { grid-template-columns: 1fr; gap: 32px; }
  .brand-scope .policy-layout { grid-template-columns: 1fr; gap: 32px; }
  .brand-scope .policy-toc { position: static; }
  .brand-scope .section { padding: 80px 0; }
  .brand-scope .page-hero { padding: 128px 0 88px; }
  .brand-scope .timeline li { padding-left: 54px; }
}

/* ----- Small tablets / large phones ----- */
@media (max-width: 780px) {
  .brand-scope .brand-container { padding: 0 24px; }
  .brand-scope .section-head { margin-bottom: 40px; }
  .brand-scope .form-row { grid-template-columns: 1fr; gap: 0; }
  .brand-scope .contact-card,
  .brand-scope .form-card { padding: 30px 26px; border-radius: 20px; }
  .brand-scope .office-hours { grid-template-columns: 1fr auto; font-size: 14px; }
}

/* ----- Phones ----- */
@media (max-width: 640px) {
  .brand-scope .grid-2,
  .brand-scope .grid-3,
  .brand-scope .grid-4 { grid-template-columns: 1fr; }
  .brand-scope .card-grid { gap: 20px; }
  .brand-scope .section { padding: 64px 0; }
  .brand-scope .section-tight { padding: 48px 0; }
  .brand-scope .page-hero { padding: 116px 0 64px; }
  .brand-scope .page-hero h1 { font-size: clamp(28px, 8vw, 38px); }
  .brand-scope .page-hero p.lead { font-size: 16px; }
  .brand-scope .stats-strip { grid-template-columns: 1fr 1fr; padding: 32px 16px; gap: 22px 16px; }
  .brand-scope .stats-strip .stat-num { font-size: 26px; }
  .brand-scope .timeline { padding-left: 0; }
  .brand-scope .timeline li { padding: 0 0 32px 46px; }
  .brand-scope .timeline::before { left: 16px; }
  .brand-scope .timeline li::before { left: 8px; width: 16px; height: 16px; }
  .brand-scope .notfound-links { flex-direction: column; align-items: stretch; }
  .brand-scope .notfound-links .btn { justify-content: center; }
  .brand-scope .btn { padding: 13px 24px; font-size: 14px; }
  .brand-scope .contact-line { flex-wrap: wrap; }
  .brand-scope .search-suggest-list { left: -8px; right: -8px; }
  .brand-scope .policy-content h2 { font-size: 21px; margin-top: 36px; }
  .brand-scope .info-card { padding: 28px 22px; }
  .brand-scope .testi-card { padding: 26px 22px; }
}

/* ----- Very small phones ----- */
@media (max-width: 400px) {
  .brand-scope .brand-container { padding: 0 18px; }
  .brand-scope .page-hero-eyebrow { font-size: 12px; }
  .brand-scope .btn { width: 100%; justify-content: center; }
  .brand-scope .notfound-search { flex-direction: column; padding: 10px; gap: 8px; border-radius: 18px; }
  .brand-scope .notfound-search button { padding: 12px; border-radius: 12px; }
}

/* ==========================================================================
   Home page (Elementor) — light responsive touch-ups for the custom
   Projects/carousel block, which sits outside .brand-scope.
   ========================================================================== */
@media (max-width: 900px) {
  .projects-head { gap: 18px; }
  .watermark { display: none; }
}
@media (max-width: 480px) {
  .projects { padding: 72px 0 84px; }
  .proj-arrow { width: 34px !important; height: 34px !important; }
  .proj-arrow svg { width: 15px; height: 15px; }
}

/* Arrow buttons for the home page Projects carousel — sit as flex siblings
   directly beside the slider viewport (left + right), not clipped by the
   viewport's own overflow:hidden, and work identically on every breakpoint. */
.proj-arrow {
  -webkit-appearance: none;
  appearance: none;
  font: inherit;
  outline-offset: 2px;
  position: static;
  flex: 0 0 auto;
  z-index: 5;
  width: 48px;
  height: 48px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(226, 177, 87, 0.45);
  background: rgba(11, 48, 38, 0.72);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .3s ease, border-color .3s ease, transform .25s ease, opacity .25s ease;
  opacity: 0.9;
  color: white !important;
  -webkit-tap-highlight-color: transparent;
}
.proj-arrow:hover,
.proj-arrow:focus-visible {
  background: var(--gold, #E2B157);
  border-color: var(--gold, #E2B157);
  opacity: 1;
  transform: scale(1.06);
}
.proj-arrow:active { transform: scale(0.96); }
.proj-arrow svg {
  width: 20px; height: 20px;
  stroke: var(--gold-bright, #F0C878);
  stroke-width: 2;
  fill: none;
  transition: stroke .3s ease;
  pointer-events: none;
}
.proj-arrow:hover svg, .proj-arrow:focus-visible svg { stroke: var(--base, #0B3026); }

@media (max-width: 640px) {
  .proj-arrow { width: 38px; height: 38px; }
  .proj-arrow svg { width: 16px; height: 16px; }
}

/* ==========================================================================
   Home page hero — mobile / tablet responsiveness
   The Elementor-exported CSS (post-8.css) hard-codes the hero heading font
   sizes and locks the search bar at a fixed 20% width with no breakpoint
   override at all, so on phones it renders as a barely-visible sliver
   ("Sea…" clipped). These rules restore a normal responsive hero.
   ========================================================================== */
@media (max-width: 1024px) {
  .elementor-8 .elementor-element.elementor-element-7b97141 {
    width: 60% !important;
    max-width: 60% !important;
  }
}
@media (max-width: 767px) {
  .elementor-8 .elementor-element.elementor-element-b6be0db .elementor-heading-title {
    font-size: clamp(24px, 8vw, 38px) !important;
    line-height: 1.25 !important;
    padding: 0 14px;
  }
  .elementor-8 .elementor-element.elementor-element-3096c76 .elementor-heading-title {
    font-size: clamp(14px, 4.4vw, 20px) !important;
    line-height: 1.5 !important;
    letter-spacing: .2px;
    padding: 0 16px;
  }
  .elementor-8 .elementor-element.elementor-element-7b97141 {
    width: 92% !important;
    max-width: 92% !important;
  }
  .elementor-8 .elementor-element.elementor-element-7b97141 > .elementor-widget-container {
    margin-top: 18px;
  }
  .elementor-8 .elementor-element.elementor-element-7b97141 .hfe-search-form__container {
    min-height: 46px;
  }
  .elementor-8 .elementor-element.elementor-element-7b97141 input[type="search"].hfe-search-form__input {
    font-size: 15px;
  }
}
@media (max-width: 400px) {
  .elementor-8 .elementor-element.elementor-element-7b97141 {
    width: 96% !important;
    max-width: 96% !important;
  }
}