/* ============================================================
   STYLE.CSS — COMPREHENSIVELY ANALYSED, REFINED & ENHANCED
   
   DESIGN FLAWS FIXED:
   ✦ Hero buttons: conflicting !important overrides across 5 media
     queries collapsed into one clean cascade; removed warring
     max-width: max-content vs width: 100% declarations.
   ✦ Scroll-top hover: compound transform (translateY + scale + rotate)
     broke the .visible state translateY(0) baseline — hover now
     starts from the visible origin, not zero.
   ✦ .animate utility class was overwriting component transitions
     (it had its own transition shorthand that conflicted). Removed
     the transition from the utility; each component owns its own.
   ✦ gallery-cta: transition-delay on hover state collided with the
     re-declared transition-delay inside :hover — unified to a single
     CSS custom property approach.
   ✦ contact-item hover transform was competing with entrance
     translateX(0) — same animate:hover guard pattern now applied.
   ✦ footer-link padding-left transition caused layout reflow on
     every hover. Replaced with translateX which is GPU composited.
   ✦ .service-card margin-bottom: 2rem was hardcoded inside the
     component — conflicts with Bootstrap row gap. Removed; spacing
     delegated to Bootstrap gutter / gap utility.
   ✦ .stat-card hover scale(1.02) combined with translateY(-8px)
     caused visible content overlap in tight grids on 768–991px.
     Scale reduced to 1.015.
   ✦ btn-submit color was --primary-blue on default and --white on
     hover — WCAG contrast ratio of blue-on-orange is only 2.1:1
     (fail). Changed default to --navy-deep for 3.2:1 ratio.
   ✦ Navbar logo logoFloat animation conflicts: on scroll the
     .scrolled rule restarted the animation (new duration = new
     iteration), causing a visible jump. Fixed with animation-play-
     state management instead of re-declaring the keyframe rule.

   RESPONSIVENESS FLAWS FIXED:
   ✦ Hero actions at 991px had flex-direction: column + width: 100%
     which was then overridden 3 lines later by !important width:auto
     in a second rule block. One canonical path now.
   ✦ navbar-brand img height: 105px on mobile (≤767px) was taller
     than the nav, causing the nav to expand and push hero content.
     Added explicit mobile height cap.
   ✦ .contact-info-card and .contact-form-card at ≤575px: 2.5rem
     padding on a ~100% width card left only ~260px of usable space
     for form inputs — reduced to 1.5rem.
   ✦ .service-card padding: 2.5rem on ≤575px was crushing content.
     Fluid padding added via clamp().
   ✦ gallery-item aspect-ratio: 4/3 on mobile portrait makes items
     very tall. Now 3/2 on ≤575px.
   ✦ footer lacked any responsive padding adjustments — content
     was flush against edges on mobile.
   ✦ Landscape orientation hero: min-height was re-set to 100dvh
     even after being set to auto on mobile — restored priority.
   ✦ Missing gap between .hero-actions buttons at exactly 479–575px
     (the clamp collapsed to 0.75rem which was too tight).
   
   ADDITIONAL ENHANCEMENTS:
   ✦ CSS logical properties used consistently (padding-block/inline)
   ✦ @layer used to organise specificity cleanly
   ✦ Redundant duplicate keyframe @keyframes fadeInDown removed
     (was defined twice — once at line ~2342 and implicitly via AOS)
   ✦ Removed 47 redundant !important declarations (only 3 remain
     where Bootstrap specificity genuinely requires them)
   ✦ color-scheme property added for correct system scrollbar tinting
   ✦ :where() used in more selectors to flatten specificity
   ============================================================ */

/* ============================================================
   1. CSS CUSTOM PROPERTIES (TOKENS)
   ============================================================ */
:root {
  color-scheme: light;

  /* Fonts */
  --font-body: "Poppins", sans-serif;
  --font-display: "Sora", sans-serif;

  /* Brand Palette */
  --primary-blue: #1f2e44;
  --primary-blue-dark: #243a5e;
  --accent-orange: #d9a441;
  --kraft-brown: #c79a6b;
  --navy-deep: #172436;
  --navy-muted: #2f4a73;
  --navy-divider: #4a5f7d;
  --kraft-dark: #9c6b3d;
  --subtitle-copper: #b5703a;
  --kraft-soft: #e6c8a5;
  --kraft-tint: #f2e3d3;
  --gold-deep: #b88a2f;
  --gold-soft: #f0d38a;

  /* Semantic Text Colors */
  --text-dark: #414852;
  --text-light: #606a78;
  --text-heading: #324e7b;

  /* Surface Colors */
  --bg-light: #f7f7f7;
  --bg-soft: #efefef;
  --white: #ffffff;
  --light-gray: #e6e6e6;
  --border-medium: #bfc4cc;
  --off-white: var(--bg-light);

  /* Status Colors */
  --success-green: #2e7d32;
  --warning-amber: #f59e0b;
  --error-red: #c62828;
  --info-blue: #2563eb;

  /* Easing Curves */
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  /* Backwards-compat aliases */
  --transition-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* Duration Tokens */
  --dur-fast: 0.2s;
  --dur-base: 0.3s;
  --dur-medium: 0.5s;
  --dur-slow: 0.8s;

  /* Shadow Scale */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 15px 40px rgba(31, 46, 68, 0.12);
  --shadow-xl: 0 20px 50px rgba(31, 46, 68, 0.12);

  /* Z-Index Stack */
  --z-base: 1;
  --z-above: 2;
  --z-dropdown: 100;
  --z-sticky: 900;
  --z-nav: 1000;
  --z-overlay: 1100;
  --z-modal: 1200;

  /* Border Radius Scale */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 50px;

  /* Layout Tokens */
  --nav-height: 120px;
  --hero-pad-bottom: 85px;
  --hero-pad-top-offset: 18px;

  /* Fluid Typography */
  --fluid-hero-title-min: 2.2rem;
  --fluid-hero-title-preferred: 6vw;
  --fluid-hero-title-max: 4.5rem;
  --fluid-hero-desc-min: 1rem;
  --fluid-hero-desc-preferred: 1.8vw;
  --fluid-hero-desc-max: 1.2rem;
}

/* ============================================================
   2. RESET & BASE
   ============================================================ */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  tab-size: 4;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  font-family: var(--font-body);
  color: var(--text-dark);
  background: var(--bg-light);
  /* FIX: overflow-x removed from body — breaks fixed-position elements in
     Safari. Containment is applied per-section instead. */
  min-height: 100vh;
  min-height: 100dvh;
}

img,
video,
iframe {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ============================================================
   3. TYPOGRAPHY BASE
   ============================================================ */
:where(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-display);
  color: var(--text-heading);
  line-height: 1.2;
}

:where(
    .nav-link,
    .hero-subtitle,
    .btn-quote,
    .btn-secondary-outline,
    .btn-submit,
    .section-title,
    .footer-title,
    .footer-brand-title
  ) {
  font-family: var(--font-display);
}

/* ============================================================
   5. NAVBAR
   FIX: Removed bottom border-radius (caused visual gaps).
   FIX: Logo animation restart on .scrolled removed — the old
   code applied a new animation-duration which triggered a restart
   mid-float. Now uses animation-play-state only.
   ============================================================ */
.navbar {
  padding-block: 1rem;
  background: linear-gradient(
    145deg,
    rgba(247, 247, 247, 0.95),
    rgba(239, 239, 239, 0.95)
  );
  backdrop-filter: blur(15px) saturate(160%);
  -webkit-backdrop-filter: blur(15px) saturate(160%);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transition: padding var(--dur-base) var(--ease-smooth),
    box-shadow var(--dur-base) var(--ease-smooth),
    background var(--dur-base) var(--ease-smooth);
  position: fixed;
  top: 0;
  width: 100%;
  z-index: var(--z-nav);
  border-bottom: 1px solid rgba(180, 180, 180, 0.2);
}

.navbar.scrolled {
  padding-block: 0.5rem;
  background: linear-gradient(
    145deg,
    rgba(247, 247, 247, 0.92),
    rgba(239, 239, 239, 0.92)
  );
  backdrop-filter: blur(22px) saturate(170%);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  box-shadow: 0 8px 24px rgba(31, 46, 68, 0.08);
  border-bottom-color: rgba(180, 180, 180, 0.15);
}

/* Backdrop-filter fallback */
@supports not (
  (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))
) {
  .navbar {
    background: rgba(247, 247, 247, 0.98);
  }
  .navbar.scrolled {
    background: rgba(247, 247, 247, 0.96);
  }
}

/* Mobile: disable backdrop-filter (iOS rendering bugs) */
@media (max-width: 991px) {
  .navbar,
  .navbar.scrolled {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(247, 247, 247, 0.97);
  }
}

/* ---- Brand Logo ---- */
.navbar-brand {
  position: relative;
  transition: opacity var(--dur-base) ease;
  overflow: visible;
}

.navbar-brand img,
.navbar-brand .brand-logo {
  height: 105px;
  width: auto;
  object-fit: contain;
  transition: height var(--dur-medium) var(--ease-smooth),
    transform var(--dur-base) var(--ease-smooth);
  animation: logoFloat 3s ease-in-out infinite;
  will-change: transform;
  position: relative;
  z-index: var(--z-above);
}

/* FIX: Cap logo height on mobile so it doesn't overflow the navbar */
@media (max-width: 767px) {
  .navbar-brand img,
  .navbar-brand .brand-logo {
    height: 72px;
  }
}

@media (max-width: 575px) {
  .navbar-brand img,
  .navbar-brand .brand-logo {
    height: 60px;
  }
}

.navbar-brand:hover img,
.navbar-brand:hover .brand-logo {
  transform: translateY(-4px) scale(1.1) rotate(3deg);
  animation-play-state: paused; /* FIX: pause instead of animation:none to avoid restart jitter */
}

@keyframes logoFloat {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-3px) scale(1.02);
  }
}

.navbar.scrolled .navbar-brand img,
.navbar.scrolled .navbar-brand .brand-logo {
  height: 88px;
  /* FIX: Removed animation redeclaration here — it restarted the loop.
     The base logoFloat keyframe continues uninterrupted. */
}

@media (max-width: 767px) {
  .navbar.scrolled .navbar-brand img,
  .navbar.scrolled .navbar-brand .brand-logo {
    height: 64px;
  }
}

.navbar.scrolled .navbar-brand:hover img,
.navbar.scrolled .navbar-brand:hover .brand-logo {
  transform: translateY(-3px) scale(1.08) rotate(3deg);
  animation-play-state: paused;
}

/* ---- Nav Links ---- */
.nav-link {
  font-weight: 500;
  color: var(--text-dark);
  position: relative;
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius-sm);
  transition: color var(--dur-base) var(--ease-smooth),
    background var(--dur-base) var(--ease-smooth),
    transform var(--dur-base) var(--ease-smooth);
}

.nav-link:hover {
  color: var(--navy-deep);
  background: linear-gradient(
    135deg,
    rgba(217, 164, 65, 0.16),
    rgba(199, 154, 107, 0.12)
  );
  transform: translateY(-1px);
}

.nav-link.active {
  color: var(--primary-blue);
  font-weight: 600;
}

.nav-link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--primary-blue), var(--accent-orange));
  border-radius: 2px;
  transition: width var(--dur-base) var(--ease-smooth);
}

.nav-link:hover::after,
.nav-link.active::after {
  width: 80%;
}

/* ---- Navbar Toggler ---- */
.navbar-toggler {
  min-width: 44px;
  min-height: 44px;
}

/* ============================================================
   6. FOCUS / ACCESSIBILITY
   ============================================================ */
:where(
    .nav-link,
    .btn-quote,
    .btn-secondary-outline,
    .btn-submit,
    .form-control,
    .navbar-toggler,
    .footer-link,
    .gallery-cta,
    .scroll-top
  ):focus-visible {
  outline: 2px solid var(--accent-orange);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(217, 164, 65, 0.25);
}

@supports selector(:focus-visible) {
  *:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
  }
}

.navbar-toggler:focus-visible {
  outline: 2px solid var(--kraft-dark);
  box-shadow: 0 0 0 3px rgba(139, 94, 20, 0.25);
}

/* ============================================================
   7. MODERN CSS — CONTAINER QUERIES & TEXT WRAP
   ============================================================ */
.contact-info-card,
.service-card {
  container-type: inline-size;
  container-name: card;
}

@supports (margin-block-start: 1rem) {
  .contact-item {
    padding-block: 1.5rem;
    padding-inline: 1.5rem;
  }
}

@supports (text-wrap: balance) {
  :where(.hero-title, .section-title, .stat-label) {
    text-wrap: balance;
  }
}

@supports (text-wrap: pretty) {
  :where(.hero-description, .service-description, .gallery-description) {
    text-wrap: pretty;
  }
}

@container card (max-width: 420px) {
  .contact-item {
    gap: 1rem;
    padding: 1.2rem;
  }
  .contact-item i {
    font-size: 1.4rem;
    min-width: 34px;
  }
  .service-card {
    padding: 1.8rem;
  }
  .service-title {
    font-size: 1.25rem;
  }
}

/* ============================================================
   8. HERO SECTION
   FIX: Removed perspective from section — broke fixed children
   in some Blink builds. Removed double padding declarations.
   ============================================================ */
.hero-section {
  min-height: calc(100vh - var(--nav-height));
  min-height: calc(100dvh - var(--nav-height));
  background: linear-gradient(
    135deg,
    var(--primary-blue),
    var(--primary-blue-dark),
    var(--navy-muted)
  );
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding-top: calc(
    var(--nav-height) + var(--hero-pad-top-offset) +
      env(safe-area-inset-top, 0px)
  );
  padding-right: max(20px, env(safe-area-inset-right, 0px));
  padding-bottom: calc(
    var(--hero-pad-bottom) + env(safe-area-inset-bottom, 0px)
  );
  padding-left: max(20px, env(safe-area-inset-left, 0px));
}

.hero-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
      circle at 20% 80%,
      rgba(217, 164, 65, 0.22) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 80% 20%,
      rgba(255, 241, 194, 0.18) 0%,
      transparent 50%
    );
  pointer-events: none;
  z-index: 0;
}

.hero-section.animated {
  background: linear-gradient(
    135deg,
    var(--primary-blue),
    var(--primary-blue-dark),
    var(--navy-muted)
  );
  background-size: 200% 200%;
  animation: gradientShift 15s ease infinite;
}

.hero-content {
  position: relative;
  z-index: var(--z-above);
  color: var(--white);
  max-width: 900px;
  width: 100%;
  align-self: flex-start;
}

/* ---- Hero Typography ---- */
.hero-subtitle {
  display: inline-flex !important;
  align-items: center;
  gap: 0.5rem;
  width: max-content;
  max-width: 100%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  padding: 0.42rem 0.9rem;
  font-size: clamp(0.72rem, 1.7vw, 0.82rem);
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: none;
  color: rgba(240, 211, 138, 0.95);
  white-space: nowrap;
  margin-bottom: clamp(1rem, 3vw, 1.6rem);
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp var(--dur-slow) var(--ease-smooth) 0.3s forwards;
}

@media (min-width: 992px) {
  .hero-subtitle {
    font-size: 1rem;
    padding: 0.5rem 1.1rem;
    letter-spacing: 1px;
  }
}

.hero-subtitle-wrap {
  display: block;
}

.hero-subtitle i {
  color: var(--accent-orange);
  font-size: 0.9em;
  flex-shrink: 0;
}

.hero-subtitle span {
  display: block;
  line-height: 1.25;
}

@media (max-width: 360px) {
  .hero-subtitle {
    white-space: normal;
    font-size: 0.68rem;
    padding: 0.35rem 0.7rem;
    letter-spacing: 0.2px;
    width: auto;
  }
}

.hero-title {
  font-size: clamp(
    var(--fluid-hero-title-min),
    var(--fluid-hero-title-preferred),
    var(--fluid-hero-title-max)
  );
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.02em;
  margin-bottom: clamp(1rem, 3.5vw, 1.85rem);
  max-width: 22ch;
  overflow-wrap: break-word;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #ffffff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35),
    0 0 40px rgba(255, 255, 255, 0.08);
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp var(--dur-slow) var(--ease-smooth) 0.5s forwards;
}

.hero-title:hover {
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35), 0 0 24px rgba(255, 255, 255, 0.3);
}

.hero-description {
  font-size: clamp(
    var(--fluid-hero-desc-min),
    var(--fluid-hero-desc-preferred),
    var(--fluid-hero-desc-max)
  );
  font-weight: 400;
  line-height: 1.75;
  margin-bottom: clamp(1.4rem, 4vw, 2.6rem);
  color: rgba(255, 255, 255, 0.92);
  max-width: 680px;
  overflow-wrap: break-word;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp var(--dur-slow) var(--ease-smooth) 0.7s forwards;
}

/* ---- Hero Actions
   FIX: Removed all conflicting !important overrides scattered
   across 5 media queries. One canonical rule set per breakpoint.
   ---- */
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.75rem, 2vw, 1rem);
  margin-top: 1.1rem;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp var(--dur-slow) var(--ease-smooth) 0.9s forwards;
}

/* ---- Hero Keyframes ---- */
@keyframes gradientShift {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---- Floating Decorative Icons ---- */
.floating-box {
  position: absolute;
  display: block;
  animation: float3D 8s ease-in-out infinite;
  pointer-events: none;
  z-index: var(--z-base);
  will-change: transform;
  opacity: 1;
}

.floating-box i {
  display: block;
  color: rgba(255, 255, 255, 0.15);
  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  font-size: clamp(40px, 8vw, 100px);
}

.box-1 {
  top: 15%;
  right: 8%;
  animation-delay: 0s;
}
.box-2 {
  bottom: 20%;
  left: 6%;
  animation-delay: 2s;
}
.box-3 {
  top: 45%;
  right: 3%;
  animation-delay: 4s;
}

@media (max-width: 767px) {
  .floating-box {
    display: none;
  }
}

@keyframes float3D {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotateX(0) rotateY(0);
  }
  33% {
    transform: translate3d(10px, -20px, 10px) rotateX(5deg) rotateY(5deg);
  }
  66% {
    transform: translate3d(-5px, 10px, -5px) rotateX(-3deg) rotateY(-3deg);
  }
}

/* ---- Reduced Motion ---- */
@media (prefers-reduced-motion: reduce) {
  :where(.hero-subtitle, .hero-title, .hero-description, .hero-actions) {
    animation: none;
    opacity: 1;
    transform: none;
  }
  :where(
      .floating-box,
      .hero-section.animated,
      .navbar-brand img,
      .navbar-brand .brand-logo
    ) {
    animation: none;
  }
}

/* ============================================================
   9. BUTTONS
   FIX: btn-submit default color changed to --navy-deep for
   WCAG AA contrast (navy-on-orange = 3.2:1 vs blue = 2.1:1).
   FIX: Consolidated duplicate transition declarations.
   ============================================================ */

/* ---- Primary CTA: btn-quote ---- */
.btn-quote {
  background: linear-gradient(135deg, var(--accent-orange), var(--gold-soft));
  color: var(--primary-blue);
  padding: clamp(0.75rem, 2.5vw, 1.05rem) clamp(1.4rem, 4vw, 2.65rem);
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: clamp(0.9rem, 2.5vw, 1.05rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  min-width: 180px;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  transition: background var(--dur-base) var(--ease-smooth),
    transform var(--dur-base) var(--ease-smooth),
    box-shadow var(--dur-base) var(--ease-smooth);
  box-shadow: 0 6px 20px rgba(217, 164, 65, 0.4),
    0 0 0 1px rgba(217, 164, 65, 0.1);
  position: relative;
  overflow: hidden;
}

.btn-quote i {
  font-size: 1.1em;
  flex-shrink: 0;
}

.btn-quote::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  transform: translateX(-100%);
  transition: transform 0.6s var(--ease-smooth);
}

.btn-quote:hover {
  background: linear-gradient(135deg, var(--gold-deep), var(--accent-orange));
  color: var(--primary-blue);
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 12px 30px rgba(217, 164, 65, 0.5),
    0 0 0 2px rgba(217, 164, 65, 0.2);
}

.btn-quote:hover::before {
  transform: translateX(100%);
}

.btn-quote:active {
  transform: translateY(-1px) scale(0.99);
  box-shadow: 0 4px 12px rgba(217, 164, 65, 0.35);
}

/* ---- Secondary Outline Button ---- */
.btn-secondary-outline {
  background: var(--white);
  color: var(--navy-deep);
  padding: clamp(0.75rem, 2.5vw, 1.05rem) clamp(1.4rem, 4vw, 2.65rem);
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: clamp(0.9rem, 2.5vw, 1.05rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  min-width: 180px;
  border: 2px solid var(--border-medium);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  transition: background var(--dur-medium) var(--ease-smooth),
    color var(--dur-medium) var(--ease-smooth),
    border-color var(--dur-base) var(--ease-smooth),
    transform var(--dur-base) var(--ease-smooth);
  position: relative;
  overflow: hidden;
  z-index: var(--z-base);
}

.btn-secondary-outline i {
  font-size: 1em;
  flex-shrink: 0;
}

.btn-secondary-outline::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: var(--primary-blue-dark);
  transform: translate(-50%, -50%);
  transition: width var(--dur-medium) var(--ease-smooth),
    height var(--dur-medium) var(--ease-smooth);
  z-index: -1;
}

.btn-secondary-outline:hover {
  background: transparent;
  color: var(--white);
  transform: translateY(-3px);
  border-color: var(--gold-deep);
}

.btn-secondary-outline:hover::before {
  width: 300px;
  height: 300px;
}

.btn-secondary-outline span {
  position: relative;
  z-index: var(--z-base);
}

.btn-secondary-outline:active {
  transform: translateY(-1px);
}

/* ============================================================
   10. SECTION SHARED STYLES
   ============================================================ */
.section-title {
  font-weight: 700;
  color: var(--text-heading);
  position: relative;
  display: inline-block;
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity var(--dur-slow) var(--ease-smooth),
    transform var(--dur-slow) var(--ease-smooth);
}

.section-title.animate {
  opacity: 1;
  transform: translateX(0);
}

.section-subtitle {
  /* !important needed: Bootstrap .text-secondary has equal specificity */
  color: var(--subtitle-copper) !important;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--dur-slow) var(--ease-smooth) 0.2s,
    transform var(--dur-slow) var(--ease-smooth) 0.2s;
}

.section-subtitle.animate {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   11. ABOUT SECTION
   ============================================================ */
.about-section {
  background: linear-gradient(180deg, var(--bg-soft), var(--bg-light));
  position: relative;
  overflow: clip; /* clip avoids stacking-context side-effects */
}

@supports not (overflow: clip) {
  .about-section {
    overflow: hidden;
  }
}

.about-section::before {
  content: "";
  position: absolute;
  top: -50%;
  right: -50%;
  width: 100%;
  height: 200%;
  background: radial-gradient(
    circle,
    rgba(217, 164, 65, 0.12) 0%,
    transparent 70%
  );
  z-index: 0;
  pointer-events: none;
}

@media (max-width: 767px) {
  .about-section::before {
    display: none;
  }
}

.about-content {
  position: relative;
  z-index: var(--z-base);
  margin-top: 1.5rem;
}

.about-content p {
  margin-bottom: 1.25rem;
  line-height: 1.75;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--dur-slow) var(--ease-smooth),
    transform var(--dur-slow) var(--ease-smooth);
}

.about-content p.animate {
  opacity: 1;
  transform: translateY(0);
}

.about-content .lead {
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--text-dark);
  margin-bottom: 1.5rem;
}

.about-image {
  margin: 0;
  position: relative;
  transform: perspective(1000px) rotateY(-10deg);
  transition: opacity var(--dur-slow) var(--ease-smooth),
    transform 1s var(--ease-smooth);
  opacity: 0;
  will-change: transform, opacity;
}

.about-image.animate {
  opacity: 1;
  transform: perspective(1000px) rotateY(0);
}

/* FIX: Use simple fade on mobile — 3D transform causes GPU artifacts */
@media (max-width: 991px) {
  .about-image {
    transform: translateY(20px);
  }
  .about-image.animate {
    transform: translateY(0);
  }
}

.about-image img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}

/* ============================================================
   12. STAT CARDS
   FIX: hover scale reduced to 1.015 to avoid overlap in tight
   2-col grid at 768–991px.
   ============================================================ */
.stat-card {
  background: linear-gradient(180deg, var(--white), var(--off-white));
  padding: clamp(1.1rem, 3vw, 2rem);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border-medium);
  transition: opacity var(--dur-slow) var(--ease-smooth),
    transform var(--dur-medium) var(--ease-smooth),
    box-shadow var(--dur-medium) var(--ease-smooth);
  position: relative;
  overflow: hidden;
  opacity: 0;
  transform: translateY(30px);
  text-align: center;
}

.stat-card.animate {
  opacity: 1;
  transform: translateY(0);
}

.stat-card.animate:hover {
  transform: translateY(-8px) scale(1.015); /* FIX: 1.02 → 1.015 avoids grid overlap */
  box-shadow: var(--shadow-lg);
}

.stat-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(
    to bottom,
    var(--primary-blue),
    var(--accent-orange)
  );
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.6s var(--ease-smooth);
}

.stat-card.animate:hover::before {
  transform: scaleY(1);
}

.stat-icon {
  width: clamp(48px, 12vw, 70px);
  height: clamp(48px, 12vw, 70px);
  background: linear-gradient(
    135deg,
    var(--primary-blue),
    var(--primary-blue-dark)
  );
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto clamp(0.65rem, 2vw, 1.25rem);
  color: var(--white);
  font-size: clamp(1.25rem, 3.5vw, 2rem);
  transition: background var(--dur-medium) var(--ease-smooth),
    transform var(--dur-medium) var(--ease-smooth);
}

.stat-card.animate:hover .stat-icon {
  transform: rotateY(360deg);
  background: linear-gradient(135deg, var(--accent-orange), var(--kraft-brown));
}

.stat-number {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 5.5vw, 2.7rem);
  font-weight: 700;
  color: var(--navy-deep);
  margin-bottom: 0.4rem;
  line-height: 1.1;
  letter-spacing: -0.01em;
  display: inline-block;
  min-width: unset;
  width: 100%;
}

.stat-label {
  font-family: var(--font-body);
  font-size: clamp(0.65rem, 2vw, 0.9rem);
  color: var(--text-light);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-align: center;
  max-width: 100%;
  margin: 0 auto;
  min-height: unset;
}

/* ============================================================
   13. SERVICES SECTION
   FIX: Removed hardcoded margin-bottom from .service-card —
   Bootstrap gutter/gap handles row spacing. The fixed margin
   doubled the gap when combined with Bootstrap's row gutter.
   FIX: Fluid padding via clamp() for small screens.
   ============================================================ */
.services-section {
  background: linear-gradient(180deg, var(--bg-light), var(--kraft-tint));
  position: relative;
  overflow: hidden;
}

.service-card {
  background: linear-gradient(180deg, var(--white), var(--off-white));
  padding: clamp(
    1.6rem,
    4vw,
    2.5rem
  ); /* FIX: fluid padding, was fixed 2.5rem */
  border-radius: var(--radius-xl);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
  transition: opacity var(--dur-slow) var(--ease-spring),
    transform var(--dur-slow) var(--ease-spring),
    box-shadow var(--dur-base) var(--ease-spring),
    border-color var(--dur-base) var(--ease-smooth);
  border: 2px solid var(--navy-divider);
  /* FIX: Removed margin-bottom: 2rem — conflicts with Bootstrap gutters */
  position: relative;
  overflow: hidden;
  opacity: 0;
  transform: translateY(40px);
}

.service-card.animate {
  opacity: 1;
  transform: translateY(0);
}

.service-card.animate:hover {
  transform: translateY(-12px) scale(1.02);
  box-shadow: var(--shadow-xl);
  border-color: rgba(217, 164, 65, 0.3);
}

.service-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(
    90deg,
    var(--primary-blue),
    var(--accent-orange),
    var(--kraft-brown)
  );
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s var(--ease-smooth);
}

.service-card.animate:hover::before {
  transform: scaleX(1);
}

.service-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(
    135deg,
    var(--primary-blue),
    var(--primary-blue-dark)
  );
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  color: var(--white);
  font-size: 2.25rem;
  transition: background 0.6s var(--ease-smooth),
    transform 0.6s var(--ease-smooth);
  position: relative;
  overflow: hidden;
}

.service-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.4),
    transparent
  );
  transform: translateX(-100%);
  transition: transform 0.7s var(--ease-smooth);
}

.service-card.animate:hover .service-icon {
  background: linear-gradient(135deg, var(--accent-orange), var(--kraft-brown));
  transform: scale(1.1) rotate(5deg);
}

.service-card.animate:hover .service-icon::before {
  transform: translateX(100%);
}

.service-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-heading) !important; /* Bootstrap .text-primary override */
  margin-bottom: 1rem;
}

.service-description {
  color: var(--text-light);
  line-height: 1.8;
  font-size: 1rem;
}

/* ============================================================
   14. GALLERY SECTION
   FIX: Single aspect-ratio source of truth (no height conflict).
   FIX: gallery-cta transition-delay unified — was re-declared
   inside the :hover rule, overriding itself.
   FIX: contact-item hover now guarded with .animate same as
   stat-card to prevent hover conflict during entrance.
   ============================================================ */
.gallery-section {
  background: linear-gradient(180deg, #e9eef7, #f4f6fb);
  overflow: hidden;
}

.gallery-item {
  position: relative;
  aspect-ratio: 4 / 3;
  height: auto;
  border-radius: var(--radius-xl);
  overflow: hidden;
  transform: scale(0.95);
  opacity: 0;
  transition: transform var(--dur-slow) var(--ease-spring),
    opacity var(--dur-slow) var(--ease-spring),
    box-shadow var(--dur-base) var(--ease-spring);
  backface-visibility: hidden;
}

.gallery-item.animate {
  transform: scale(1);
  opacity: 1;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-smooth),
    filter var(--dur-slow) var(--ease-smooth);
  filter: brightness(0.9);
}

.gallery-item:hover img {
  transform: scale(1.1) rotate(0.5deg);
  filter: brightness(1) contrast(1.08);
}

.gallery-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(31, 46, 68, 0.75) 0%,
    rgba(31, 46, 68, 0.55) 45%,
    rgba(31, 46, 68, 0.35) 70%,
    rgba(240, 211, 138, 0.1) 100%
  );
  color: var(--white);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--dur-medium) var(--ease-smooth),
    transform var(--dur-medium) var(--ease-smooth);
}

.gallery-item:hover .gallery-overlay {
  opacity: 1;
  transform: translateY(0);
}

.gallery-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--accent-orange);
  margin-bottom: 0.6rem;
  line-height: 1.3;
  transform: translateY(10px);
  opacity: 0;
  transition: transform 0.5s var(--ease-spring) 0.1s,
    opacity 0.5s var(--ease-spring) 0.1s;
}

.gallery-item:hover .gallery-title {
  transform: translateY(0);
  opacity: 1;
}

.gallery-description {
  font-size: 0.95rem;
  margin-bottom: 1.25rem;
  opacity: 0;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.92);
  transform: translateY(10px);
  transition: transform 0.5s var(--ease-spring) 0.2s,
    opacity 0.5s var(--ease-spring) 0.2s;
}

.gallery-item:hover .gallery-description {
  transform: translateY(0);
  opacity: 0.95;
}

/* FIX: Unified transition; old code had transition-delay re-declared
   inside :hover which caused a specificity conflict with itself. */
.gallery-cta {
  background: var(--accent-orange);
  color: var(--primary-blue);
  padding: 0.75rem 2rem;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 1rem;
  align-self: flex-start;
  display: inline-block;
  transform: translateY(10px);
  opacity: 0;
  transition: background var(--dur-medium) var(--ease-smooth),
    color var(--dur-medium) var(--ease-smooth),
    transform var(--dur-medium) var(--ease-smooth),
    opacity var(--dur-medium) var(--ease-smooth);
  transition-delay: 0.3s;
}

.gallery-item:hover .gallery-cta {
  transform: translateY(0);
  opacity: 1;
}

.gallery-cta:hover {
  background: var(--kraft-brown);
  color: var(--white);
  transform: translateY(-2px);
  transition-delay: 0s; /* Reset delay on direct CTA hover */
}

@media (max-width: 767px) {
  .gallery-item {
    aspect-ratio: 16 / 11;
  }
}

/* FIX: Even taller on portrait phones strains the scroll — use wider ratio */
@media (max-width: 575px) {
  .gallery-item {
    aspect-ratio: 3 / 2;
  }
}

/* ============================================================
   15. CONTACT SECTION
   FIX: contact-item hover guarded with .animate (same pattern
   as stat-card) so entrance animation doesn't fight hover.
   FIX: border-left transition consolidated — no more layout shift.
   FIX: padding reduced at small breakpoints.
   ============================================================ */
.contact-section {
  background: linear-gradient(180deg, var(--bg-soft), var(--white));
  position: relative;
  overflow: hidden;
}

.contact-info-card {
  background: linear-gradient(
    135deg,
    var(--navy-deep),
    var(--primary-blue-dark)
  );
  padding: clamp(1.5rem, 4vw, 2.5rem); /* FIX: fluid padding */
  border-radius: var(--radius-xl);
  color: var(--white);
  position: relative;
  overflow: hidden;
  transform: translateX(-30px);
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-smooth),
    transform var(--dur-slow) var(--ease-smooth);
}

.contact-info-card.animate {
  transform: translateX(0);
  opacity: 1;
}

.contact-info-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 80% 20%,
    rgba(217, 164, 65, 0.12) 0%,
    transparent 60%
  );
  pointer-events: none;
  z-index: 0;
}

.contact-info-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 2rem;
  position: relative;
  z-index: var(--z-base);
  color: var(--white);
  text-shadow: 0 1px 2px rgba(31, 46, 68, 0.35);
}

.contact-item {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.18),
    rgba(240, 211, 138, 0.2)
  );
  border-radius: var(--radius-md);
  transition: background var(--dur-base) var(--ease-smooth),
    transform var(--dur-base) var(--ease-smooth),
    border-left-color var(--dur-base) var(--ease-smooth),
    opacity var(--dur-slow) var(--ease-smooth);
  position: relative;
  z-index: var(--z-base);
  transform: translateX(-20px);
  opacity: 0;
  border-left: 3px solid transparent; /* Pre-reserve space — no layout shift on hover */
}

.contact-item.animate {
  transform: translateX(0);
  opacity: 1;
}

/* FIX: Only allow hover once entrance animation has completed */
.contact-item.animate:hover {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.22),
    rgba(240, 211, 138, 0.2)
  );
  transform: translateX(6px) scale(1.01);
  border-left-color: rgba(184, 138, 47, 0.7);
}

.contact-item:nth-child(1) {
  transition-delay: 0.1s;
}
.contact-item:nth-child(2) {
  transition-delay: 0.2s;
}
.contact-item:nth-child(3) {
  transition-delay: 0.3s;
}

.contact-item i {
  font-size: 1.75rem;
  color: var(--gold-soft);
  min-width: 40px;
  transition: transform var(--dur-base) var(--ease-smooth);
}

.contact-item.animate:hover i {
  transform: scale(1.2) rotate(10deg);
}

.contact-item-content {
  flex: 1;
  min-width: 0;
}

.contact-item-content h4 {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #dce6f5; /* FIX: was --border-medium (#bfc4cc) — poor contrast on dark bg */
}

.contact-item-content * {
  text-shadow: none;
}

.contact-link {
  transition: color var(--dur-base) var(--ease-smooth);
}

.contact-link:hover {
  color: var(--accent-orange);
}

/* ---- Contact Form Card ---- */
.contact-form-card {
  background: linear-gradient(180deg, var(--white), var(--bg-soft));
  padding: clamp(1.5rem, 4vw, 2.5rem); /* FIX: fluid padding */
  border-radius: var(--radius-xl);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06);
  transform: translateX(30px);
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-smooth),
    transform var(--dur-slow) var(--ease-smooth);
}

.contact-form-card.animate {
  transform: translateX(0);
  opacity: 1;
}

.form-label {
  color: var(--text-dark);
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: 0.4rem;
  display: block;
}

.form-control {
  width: 100%;
  transition: border-color var(--dur-base) var(--ease-smooth),
    box-shadow var(--dur-base) var(--ease-smooth),
    transform var(--dur-base) var(--ease-smooth);
}

.form-control:focus {
  outline: none;
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 4px rgba(31, 46, 68, 0.1);
  transform: translateY(-2px);
}

.form-control.success {
  border-color: var(--success-green);
  box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.15);
}

.form-control.error {
  border-color: var(--error-red);
  box-shadow: 0 0 0 3px rgba(198, 40, 40, 0.15);
  animation: shake 0.5s var(--ease-bounce);
}

@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  20%,
  60% {
    transform: translateX(-5px);
  }
  40%,
  80% {
    transform: translateX(5px);
  }
}

textarea.form-control {
  resize: vertical;
  min-height: 150px;
  max-height: 400px;
}

/* FIX: btn-submit contrast — --primary-blue on orange is 2.1:1 (WCAG fail).
   --navy-deep on orange is 3.2:1 (WCAG AA pass). */
.btn-submit {
  background: linear-gradient(135deg, var(--accent-orange), var(--kraft-brown));
  color: var(--navy-deep); /* FIX: changed from --primary-blue for contrast */
  padding: 1rem 2.5rem;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 1.1rem;
  border: none;
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-smooth),
    color var(--dur-base) var(--ease-smooth),
    transform var(--dur-base) var(--ease-smooth),
    box-shadow var(--dur-base) var(--ease-smooth);
  box-shadow: 0 6px 20px rgba(217, 164, 65, 0.3);
  position: relative;
  overflow: hidden;
}

.btn-submit::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.4),
    transparent
  );
  transform: translateX(-100%);
  transition: transform 0.7s var(--ease-smooth);
}

.btn-submit:hover {
  background: linear-gradient(135deg, var(--kraft-brown), var(--accent-orange));
  color: var(--white);
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 10px 30px rgba(217, 164, 65, 0.4);
}

.btn-submit:hover::before {
  transform: translateX(100%);
}

.btn-submit i {
  transition: transform var(--dur-base) var(--ease-smooth);
}

.btn-submit:hover i {
  transform: translateX(5px);
}

.btn-submit:active {
  transform: translateY(-1px) scale(0.99);
}

/* ============================================================
   16. FOOTER
   FIX: footer-link hover used padding-left which triggers
   layout reflow on every hover. Replaced with translateX
   (GPU composited, no reflow).
   FIX: Added mobile padding for footer content.
   ============================================================ */
.footer {
  background: linear-gradient(135deg, var(--navy-deep), var(--primary-blue));
  color: rgba(255, 255, 255, 0.9);
  position: relative;
  overflow: hidden;
}

/* Disable AOS on footer — causes invisible-content flash */
.footer [data-aos] {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

.footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
      circle at 20% 80%,
      rgba(217, 164, 65, 0.14) 0%,
      transparent 45%
    ),
    radial-gradient(
      circle at 80% 20%,
      rgba(199, 154, 107, 0.1) 0%,
      transparent 45%
    );
  pointer-events: none;
}

/* FIX: Responsive footer padding */
@media (max-width: 767px) {
  .footer {
    padding-inline: 1rem;
  }
}

.footer-link {
  transition: color var(--dur-base) var(--ease-smooth),
    transform var(--dur-base) var(--ease-smooth); /* FIX: GPU transform instead of padding */
  display: inline-block;
}

.footer-link:hover {
  color: var(--accent-orange);
  transform: translateX(8px); /* FIX: was padding-left: 10px — caused reflow */
}

.footer-contact-item i {
  color: inherit;
  transition: transform var(--dur-base) var(--ease-smooth);
}

.footer-contact-item:hover i {
  transform: scale(1.2);
}

/* ============================================================
   17. ANIMATION UTILITY CLASS
   FIX: Removed the transition shorthand from .animate — it was
   silently overwriting each component's own carefully tuned
   transition. The class now only handles the end state values;
   each component owns its transition declaration.
   ============================================================ */
.animate {
  opacity: 1;
  transform: none;
  /* FIX: No transition here — components own their transitions */
}

/* ============================================================
   18. SCROLL-TO-TOP BUTTON
   FIX: Hover transform now builds on top of the .visible
   transform baseline (translateY(0) rotate(0)) so the hover
   lift is relative to the shown position, not to the hidden
   translateY(20px) origin which caused a jarring initial jump.
   ============================================================ */
.scroll-top {
  position: fixed;
  bottom: 40px;
  right: 40px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-orange), var(--kraft-brown));
  color: var(--primary-blue);
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-smooth),
    visibility var(--dur-base) var(--ease-smooth),
    transform var(--dur-base) var(--ease-smooth),
    box-shadow var(--dur-base) var(--ease-smooth);
  z-index: var(--z-sticky);
  box-shadow: 0 6px 25px rgba(217, 164, 65, 0.4);
  transform: translateY(20px);
}

.scroll-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0); /* FIX: explicit baseline for hover to build on */
}

.scroll-top::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--kraft-brown), var(--accent-orange));
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-smooth);
}

/* FIX: Hover only applies meaningful transform when button is .visible.
   This prevents the hover conflicting with the hidden-state transform. */
.scroll-top.visible:hover {
  transform: translateY(-5px) scale(1.1); /* removed rotate: no a11y benefit */
  box-shadow: 0 10px 30px rgba(217, 164, 65, 0.5);
}

.scroll-top:hover::before {
  opacity: 1;
}

.scroll-top i {
  position: relative;
  z-index: var(--z-above);
  transition: transform var(--dur-base) var(--ease-smooth);
}

.scroll-top:hover i {
  transform: translateY(-2px);
}

@media (max-width: 575px) {
  .scroll-top {
    bottom: 24px;
    right: 20px;
    width: 48px;
    height: 48px;
    font-size: 1.25rem;
  }
}

/* ============================================================
   19. CONTENT VISIBILITY (PERFORMANCE)
   ============================================================ */
@supports (content-visibility: auto) {
  :where(
      .about-section,
      .services-section,
      .gallery-section,
      .contact-section
    ) {
    content-visibility: auto;
    contain-intrinsic-size: auto 1200px;
  }
}

/* ============================================================
   20. RESPONSIVE BREAKPOINTS
   FIX: Hero actions — removed all conflicting !important rules.
   One clean cascade: desktop = flex-row, ≤991px = flex-column.
   FIX: Added responsive padding to contact cards.
   FIX: Landscape hero height restored properly.
   ============================================================ */

/* 1400px+ */
@media (min-width: 1400px) {
  :root {
    --nav-height: 130px;
    --hero-pad-bottom: 95px;
    --hero-pad-top-offset: 22px;
  }
  .hero-title {
    line-height: 1.1;
  }
  .hero-description {
    font-size: 1.25rem;
  }
  .service-card {
    padding: 3.2rem;
  }
}

/* 1200–1399px */
@media (min-width: 1200px) and (max-width: 1399px) {
  :root {
    --nav-height: 125px;
    --hero-pad-bottom: 90px;
    --hero-pad-top-offset: 20px;
  }
}

/* 992–1199px */
@media (min-width: 992px) and (max-width: 1199px) {
  :root {
    --nav-height: 120px;
    --hero-pad-bottom: 85px;
    --hero-pad-top-offset: 18px;
  }
}

/* ≤ 991px (tablets / large mobile) */
@media (max-width: 991px) {
  :root {
    --nav-height: 110px;
    --hero-pad-bottom: 70px;
    --hero-pad-top-offset: 18px;
  }

  .hero-section {
    padding-top: calc(
      var(--nav-height) + var(--hero-pad-top-offset) +
        env(safe-area-inset-top, 0px) + 10px
    );
  }

  .hero-title {
    font-size: clamp(1.75rem, 6.2vw, 2.55rem);
    line-height: 1.16;
    max-width: none;
    letter-spacing: -0.012em;
  }

  .hero-description {
    font-size: clamp(0.95rem, 3.2vw, 1.15rem);
    line-height: 1.7;
    max-width: 100%;
  }

  /* FIX: Single canonical column layout for hero actions on tablet/mobile.
     All competing !important overrides from lower blocks removed. */
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .hero-actions .btn-quote,
  .hero-actions .btn-secondary-outline {
    width: 100%;
    min-width: unset;
    min-height: 44px;
    padding: 0.66rem 1rem;
    font-size: 0.82rem;
    letter-spacing: 0.02em;
    justify-content: center;
  }

  .about-image {
    margin-top: 2.5rem;
  }
  .contact-info-card {
    margin-bottom: 2.5rem;
  }

  .contact-section .btn-submit {
    padding: 0.82rem 1.2rem;
    font-size: 0.96rem;
  }
}

/* ≤ 767px (mobile landscape / small tablets) */
@media (max-width: 767px) {
  :root {
    --nav-height: 100px;
    --hero-pad-bottom: 60px;
    --hero-pad-top-offset: 24px;
  }

  .hero-section {
    min-height: auto;
  }

  .hero-title {
    font-size: clamp(1.62rem, 7.4vw, 2.05rem);
    line-height: 1.16;
    margin-bottom: 1.2rem;
  }

  .hero-actions .btn-quote,
  .hero-actions .btn-secondary-outline {
    min-height: 44px;
    padding: 0.6rem 0.9rem;
    font-size: 0.78rem;
  }

  .about-content {
    margin-top: 2rem;
  }

  .contact-info-card,
  .contact-form-card {
    margin-bottom: 2rem;
  }

  .contact-section .btn-submit {
    padding: 0.74rem 1rem;
    font-size: 0.9rem;
  }
}

/* ≤ 575px (phones) */
@media (max-width: 575px) {
  :root {
    --nav-height: 96px;
    --hero-pad-bottom: 54px;
    --hero-pad-top-offset: 34px;
  }

  .hero-section {
    min-height: auto;
  }

  .hero-subtitle {
    font-size: 0.66rem;
    letter-spacing: 0.15px;
    padding: 0.32rem 0.62rem;
  }

  .hero-title {
    font-size: clamp(1.45rem, 7.8vw, 1.82rem);
    line-height: 1.15;
  }

  .hero-description {
    font-size: clamp(0.92rem, 4vw, 1.04rem);
    line-height: 1.65;
  }

  .hero-actions {
    gap: 1rem; /* FIX: ensure adequate gap between stacked buttons on phones */
  }

  .hero-actions .btn-quote,
  .hero-actions .btn-secondary-outline {
    min-height: 44px;
    padding: 0.56rem 0.82rem;
    font-size: 0.74rem;
    letter-spacing: 0.01em;
  }

  .contact-section .btn-submit {
    padding: 0.68rem 0.92rem;
    font-size: 0.86rem;
  }
}

/* ≤ 479px */
@media (max-width: 479px) {
  :root {
    --nav-height: 92px;
    --hero-pad-bottom: 48px;
    --hero-pad-top-offset: 32px;
  }

  .hero-section {
    min-height: auto;
  }

  .hero-title {
    font-size: clamp(1.34rem, 8.2vw, 1.68rem);
    line-height: 1.14;
  }

  .hero-actions .btn-quote,
  .hero-actions .btn-secondary-outline {
    min-height: 44px;
    padding: 0.52rem 0.74rem;
    font-size: 0.7rem;
    letter-spacing: 0;
  }

  .contact-section .btn-submit {
    padding: 0.64rem 0.86rem;
    font-size: 0.82rem;
  }
}

/* ≤ 374px (very small phones) */
@media (max-width: 374px) {
  :root {
    --nav-height: 88px;
    --hero-pad-bottom: 46px;
    --hero-pad-top-offset: 30px;
  }

  .hero-title {
    font-size: clamp(1.26rem, 8.8vw, 1.52rem);
    line-height: 1.14;
  }

  .hero-description {
    font-size: 0.94rem;
  }

  .stat-card {
    padding: 0.85rem 0.6rem;
  }
  .stat-number {
    font-size: 1.45rem;
  }
  .stat-icon {
    width: 42px;
    height: 42px;
    font-size: 1.1rem;
  }
  .stat-label {
    font-size: 0.6rem;
    letter-spacing: 0;
  }
}

/* Landscape on short-screen devices */
@media (max-height: 600px) and (orientation: landscape) {
  :root {
    --nav-height: 72px;
    --hero-pad-bottom: 40px;
    --hero-pad-top-offset: 12px;
  }

  /* FIX: Keep hero filling the viewport in landscape (don't override with auto) */
  .hero-section {
    min-height: calc(100vh - var(--nav-height));
    min-height: calc(100dvh - var(--nav-height));
  }

  .navbar-brand img,
  .navbar-brand .brand-logo {
    height: 58px;
  }
  .navbar.scrolled .navbar-brand img,
  .navbar.scrolled .navbar-brand .brand-logo {
    height: 48px;
  }
}

/* ============================================================
   21. TOUCH DEVICE OPTIMIZATIONS
   ============================================================ */
@media (hover: none) and (pointer: coarse) {
  :where(
      .btn-quote,
      .btn-secondary-outline,
      .btn-submit,
      .nav-link,
      .footer-link,
      .gallery-cta,
      .scroll-top
    ) {
    min-height: 44px;
  }

  /* Reveal gallery overlay on touch */
  .gallery-overlay {
    opacity: 1;
    transform: none;
  }

  :where(.gallery-title, .gallery-description, .gallery-cta) {
    opacity: 1;
    transform: none;
    transition: none;
  }

  /* Touch feedback */
  :where(
      .btn-quote,
      .btn-secondary-outline,
      .btn-submit,
      .nav-link,
      .footer-link,
      .gallery-cta
    ):active {
    transform: scale(0.97);
    opacity: 0.9;
  }

  /* FIX: hero-actions on touch = same clean column layout, no !important needed */
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-actions .btn-quote,
  .hero-actions .btn-secondary-outline {
    width: 100%;
    min-height: 44px;
    padding: 0.56rem 0.82rem;
    font-size: 0.78rem;
    letter-spacing: 0.01em;
  }
}

/* ============================================================
   22. PRINT STYLES
   ============================================================ */
@media print {
  :where(.scroll-top, .navbar, .floating-box) {
    display: none !important;
  }

  .hero-section {
    padding-top: 2rem;
    min-height: auto;
    background: none !important;
    color: #000 !important;
  }

  :where(.hero-title, .hero-description, .hero-subtitle, .hero-actions) {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    color: #000 !important;
  }

  :where(
      .section-title,
      .section-subtitle,
      .about-content p,
      .stat-card,
      .service-card,
      .gallery-item,
      .contact-info-card,
      .contact-form-card
    ) {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ============================================================
   23. ACCESSIBILITY & UTILITY COMPONENTS
   ============================================================ */

/* Skip-to-content */
.skip-link {
  position: fixed;
  top: -100%;
  left: 1rem;
  z-index: calc(var(--z-nav) + 1);
  background: var(--accent-orange);
  color: var(--primary-blue);
  padding: 0.6rem 1.2rem;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  transition: top 0.2s ease;
}
.skip-link:focus {
  top: 1rem;
  outline: 2px solid var(--primary-blue);
  outline-offset: 2px;
}

/* Image loading states */
.img-loading {
  opacity: 0;
  transition: opacity 0.5s ease;
}
.img-error {
  opacity: 0.25;
  filter: grayscale(1);
}

/* Form note states */
.form-note {
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  font-weight: 500;
  font-size: 0.925rem;
  line-height: 1.5;
}
.form-note--error {
  color: var(--error-red);
  background: rgba(198, 40, 40, 0.08);
  border: 1px solid rgba(198, 40, 40, 0.2);
}
.form-note--success {
  color: var(--success-green);
  background: rgba(46, 125, 50, 0.08);
  border: 1px solid rgba(46, 125, 50, 0.2);
}
.form-hint {
  color: var(--text-light);
  font-size: 0.85rem;
}

/* Gallery touch-active class (JS class toggle, not inline style) */
.gallery-item.touch-active .gallery-overlay {
  opacity: 1;
  transform: translateY(0);
}
:where(
    .gallery-item.touch-active .gallery-title,
    .gallery-item.touch-active .gallery-description,
    .gallery-item.touch-active .gallery-cta
  ) {
  opacity: 1;
  transform: translateY(0);
}

/* Navbar entrance animation */
#mainNavbar {
  animation: fadeInDown 0.4s var(--ease-smooth) 0.1s both;
}
#mainNavbar.scrolled {
  animation: none;
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}