/*
Theme Name: Ultra Core Construction
Theme URI: https://ultracoreconstructionwa.com
Author: Ultra Core Construction
Author URI: https://ultracoreconstructionwa.com
Description: Custom WordPress theme for Ultra Core Construction - Licensed general contractor serving the Greater Seattle Area.
Version: 1.0.0
License: Proprietary
Text Domain: ultracore
*/

/* ================================================================
   TABLE OF CONTENTS
   ================================================================
   1.  CSS Custom Properties (Design Tokens)
   2.  Keyframe Animations
   3.  Base / Reset Styles
   4.  Container System
   5.  Section Spacing
   6.  Typography Classes
   7.  Fluid Font Sizes
   8.  Button System
   9.  Background Utilities
   10. Form System
   11. Gallery Grid
   12. Layout Utilities
   13. Spacing Utilities
   14. Flexbox & Grid Utilities
   15. Sizing Utilities
   16. Border Radius Utilities
   17. Display & Visibility Utilities
   18. Transition & Animation Utilities
   19. Opacity Utilities
   20. Shadow Utilities
   21. Responsive Display Utilities
   ================================================================ */


/* ================================================================
   1. CSS CUSTOM PROPERTIES (Design Tokens)
   ================================================================ */

:root {
  /* ── Surface colors (light) ── */
  --color-bg-primary: #ffffff;
  --color-bg-secondary: #f8f5f2;
  --color-bg-card: #ffffff;
  --color-bg-tertiary: #f5f3f0;
  --color-text-primary: #1a1a1a;
  --color-text-secondary: #4a4a4a;
  --color-text-muted: #666666;
  --color-border: #e2dedb;
  --color-border-subtle: rgba(0, 0, 0, 0.06);
  --color-orange-text: #B5430A;

  /* ── Orange palette ── */
  --color-orange: #D4500A;
  --color-orange-dark: #B5430A;
  --color-orange-light: #E87040;
  --color-orange-glow: rgba(212, 80, 10, 0.10);
  --color-orange-15: rgba(212, 80, 10, 0.15);
  --color-orange-20: rgba(212, 80, 10, 0.20);
  --color-orange-35: rgba(212, 80, 10, 0.35);
  --color-orange-50: rgba(212, 80, 10, 0.50);
  --color-orange-70: rgba(212, 80, 10, 0.70);

  /* ── Dark palette ── */
  --color-dark-deep: #1a1a1a;
  --color-dark-mid: #2a2a2a;
  --color-dark: #343434;
  --color-dark-soft: #404040;

  /* ── White alpha channel ── */
  --color-white-5:  rgba(255, 255, 255, 0.05);
  --color-white-8:  rgba(255, 255, 255, 0.08);
  --color-white-10: rgba(255, 255, 255, 0.10);
  --color-white-20: rgba(255, 255, 255, 0.20);
  --color-white-30: rgba(255, 255, 255, 0.30);
  --color-white-40: rgba(255, 255, 255, 0.40);
  --color-white-50: rgba(255, 255, 255, 0.50);
  --color-white-60: rgba(255, 255, 255, 0.60);
  --color-white-70: rgba(255, 255, 255, 0.70);
  --color-white-85: rgba(255, 255, 255, 0.85);
  --color-white-92: rgba(255, 255, 255, 0.92);

  /* ── Shadows ── */
  --shadow-sm:        0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-m:         0 6px 24px rgba(0, 0, 0, 0.08);
  --shadow-l:         0 16px 48px rgba(0, 0, 0, 0.12);
  --shadow-orange-sm: 0 4px 16px rgba(212, 80, 10, 0.30);
  --shadow-orange-md: 0 6px 24px rgba(212, 80, 10, 0.40);

  /* ── Border radii ── */
  --radius-sm:   0.5rem;
  --radius-md:   0.75rem;
  --radius-lg:   1rem;
  --radius-xl:   1.25rem;
  --radius-2xl:  1.5rem;
  --radius-full: 9999px;

  /* ── Section header tokens ── */
  --section-header-mb:  3.5rem;
  --section-divider-w:  2.5rem;
  --section-divider-h:  2px;

  /* ── Card / component tokens ── */
  --card-pad:          2rem;
  --testimonial-pad:   clamp(2rem, 3vw, 3.5rem);
  --avatar-sz:         3rem;    /* 48px */

  /* ── Easing curves ── */
  --ease-out-cubic:    cubic-bezier(0.33, 1, 0.68, 1);
  --ease-out-quart:    cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-back:     cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out-cubic: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-in-out-sine:  cubic-bezier(0.37, 0, 0.63, 1);
  --ease-out-expo:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-back:         cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Form accent ── */
  --form-accent:       var(--color-orange);
  --form-accent-light: var(--color-orange-15);
  --form-accent-glow:  var(--color-orange-50);
  --form-success:      #22c55e;
  --form-success-light: rgba(34, 197, 94, 0.15);
  --form-error:        #ef4444;
  --form-error-light:  rgba(239, 68, 68, 0.15);
  --form-shadow-sm:    var(--shadow-sm);
  --form-shadow-md:    0 4px 12px rgba(0, 0, 0, 0.08);
  --form-shadow-lg:    0 8px 24px rgba(0, 0, 0, 0.12);
  --form-shadow-glow:  0 0 20px var(--form-accent-glow);

  /* ── Layout ── */
  --header-h: calc(clamp(60px, 8vh, 80px) + 36px);
  --header-total-h: calc(clamp(60px, 8vh, 80px) + 36px);
}

/* Dark mode overrides */
.dark {
  --color-bg-primary: #1e1e1e;
  --color-bg-secondary: #262626;
  --color-bg-card: #2d2d2d;
  --color-bg-tertiary: #343434;
  --color-text-primary: #f0f0f0;
  --color-text-secondary: #c0c0c0;
  --color-text-muted: #888888;
  --color-border: #404040;
  --color-border-subtle: rgba(255, 255, 255, 0.08);
  --color-orange-text: #E87A30;
}


/* ================================================================
   2. KEYFRAME ANIMATIONS + SCROLL REVEAL
   ================================================================ */

/* ----------------------------------------------------------------
   Scroll-reveal + micro-interactions
   Mirrors Framer Motion system used on the Next.js Vercel build:
   - duration 0.6s, cubic-bezier(0.22, 1, 0.36, 1) ("easeOutExpo")
   - fade-in-up/down/left/right (30px offset), scale-in (0.9)
   - stagger container + children (0.1s default gap)
   - card hover (scale 1.03 + lift) / tap (scale 0.98)
   - prefers-reduced-motion: full static fallback
   ---------------------------------------------------------------- */

[data-animate] {
  opacity: 0;
  transition:
    opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
[data-animate="fade-in-up"]    { transform: translateY(30px); }
[data-animate="fade-in-down"]  { transform: translateY(-30px); }
[data-animate="fade-in-left"]  { transform: translateX(-30px); }
[data-animate="fade-in-right"] { transform: translateX(30px); }
[data-animate="scale-in"]      { transform: scale(0.9); }

[data-animate].animated {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

/* Stagger: children of [data-stagger] cascade in after the parent reveals.
   data-stagger-speed="fast|slow" tunes the gap (default 100ms). */
[data-stagger] > [data-stagger-child] {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
/* Direction overrides for individual stagger children */
[data-stagger] > [data-stagger-child][data-enter="left"]  { transform: translateX(-30px); }
[data-stagger] > [data-stagger-child][data-enter="right"] { transform: translateX(30px); }
[data-stagger] > [data-stagger-child][data-enter="down"]  { transform: translateY(-30px); }
[data-stagger] > [data-stagger-child][data-enter="scale"] { transform: scale(0.9); }
[data-stagger].animated > [data-stagger-child] {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Card hover/tap — matches AnimatedCard.tsx cardHover + cardTap */
[data-card-hover] {
  transition:
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
@media (hover: hover) {
  [data-card-hover]:hover {
    transform: translateY(-8px) scale(1.03);
    box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.18);
  }
}
[data-card-hover]:active {
  transform: scale(0.98);
  transition-duration: 0.12s;
}

@media (min-width: 768px) and (max-width: 1023px) {
  :root { --header-total-h: calc(clamp(60px, 8vh, 80px) + 40px); }
}

/* ================================================================
   REUSABLE COMPONENT CLASSES
   ================================================================ */

/* ── Section Header ── */
.section-header-wrap {
  margin-bottom: var(--section-header-mb);
}
.section-header-wrap.is-centered {
  text-align: center;
}
.section-divider {
  width:         var(--section-divider-w);
  height:        var(--section-divider-h);
  background:    #B5430A;
  border-radius: var(--radius-full);
  margin:        0.5rem 0 0.75rem;
}
.dark .section-divider {
  background: var(--color-orange-text);
}
.section-header-wrap.is-centered .section-divider {
  margin-left:  auto;
  margin-right: auto;
}
/* Dark-background sections (e.g. Testimonials) — always-white titles */
.section-header-wrap--dark .section-title    { color: #ffffff; }
.section-header-wrap--dark .section-subtitle { color: var(--color-white-60); }

/* ── Trust Bar Pills (Hero + TrustBar section) ── */
.trust-pill {
  display:       inline-flex;
  align-items:   center;
  gap:           0.5rem;
  padding:       0.25rem 0.75rem;
  border-radius: var(--radius-full);
  background:    var(--color-white-5);
  font-size:     clamp(0.875rem, 0.9vw + 0.25rem, 1rem);
  font-weight:   600;
  font-family:   'Rajdhani', sans-serif;
  letter-spacing: 0.025em;
  color:         var(--color-white-92);
  transition:    background 0.3s ease, color 0.3s ease, transform 0.3s var(--ease-out-expo);
  cursor:        default;
}
.trust-pill:hover {
  background: var(--color-orange-20);
  color:      var(--color-orange-light);
}
.trust-pill svg {
  flex-shrink: 0;
  color:       var(--color-orange);
  transition:  transform 0.3s var(--ease-out-expo);
}
.trust-pill:hover svg {
  transform: scale(1.1);
}

/* ── Why Choose Us Cards ── */
.why-card {
  position:      relative;
  text-align:    center;
  padding:       var(--card-pad);
  border-radius: var(--radius-2xl);
  background:    var(--color-bg-card);
  border:        1.5px solid var(--color-border);
  height:        100%;
  transition:    box-shadow 0.3s var(--ease-out-expo),
                 transform 0.3s var(--ease-out-expo),
                 border-color 0.3s ease;
}
.why-card:hover {
  box-shadow:    var(--shadow-m);
  transform:     scale(1.02);
}
.why-card__icon {
  width:           3.5rem;
  height:          3.5rem;
  border-radius:   var(--radius-full);
  background:      var(--color-orange-glow);
  color:           var(--color-orange);
  display:         flex;
  align-items:     center;
  justify-content: center;
  margin:          0 auto 1.5rem;
  transition:      background 0.3s ease, color 0.3s ease, transform 0.3s var(--ease-out-expo);
}
.why-card:hover .why-card__icon {
  background:  var(--color-orange);
  color:       #ffffff;
  transform:   scale(1.1);
}
.why-card__title {
  font-family:   'Rajdhani', sans-serif;
  font-weight:   700;
  margin-bottom: 0.5rem;
  color:         var(--color-text-primary);
  transition:    color 0.3s ease;
}
.why-card:hover .why-card__title {
  color: var(--color-orange);
}
.why-card__desc {
  color:       var(--color-text-muted);
  line-height: 1.7;
  margin:      0;
}

/* ── Testimonial Cards ── */
.testimonial-card {
  position:      relative;
  background:    var(--color-dark-mid);
  border-radius: var(--radius-2xl);
  padding:       var(--testimonial-pad);
  overflow:      hidden;
  transition:    background 0.3s ease;
}
.testimonial-card:hover {
  background: var(--color-dark-soft);
}
.testimonial-card__quote-mark {
  position:        absolute;
  top:             1.5rem;
  right:           2rem;
  font-size:       8rem;
  line-height:     1;
  color:           var(--color-orange-15);
  font-family:     'Rajdhani', Georgia, serif;
  pointer-events:  none;
  user-select:     none;
  aria-hidden:     true;
}
.testimonial-card__blockquote {
  position:      relative;
  z-index:       1;
  margin-bottom: 2rem;
}
.testimonial-card__quote-text {
  color:       var(--color-white-85);
  line-height: 1.8;
  margin:      0;
  font-weight: 300;
  display:     -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow:    hidden;
}
.testimonial-card__quote-text.is-expanded {
  display:             block;
  -webkit-line-clamp:  unset;
  -webkit-box-orient:  unset;
  overflow:            visible;
}
.testimonial-card__expand-btn {
  background:  none;
  border:      none;
  color:       var(--color-orange);
  font-family: 'Rajdhani', sans-serif;
  font-size:   0.875rem;
  font-weight: 600;
  cursor:      pointer;
  padding:     0.5rem 0 0;
  display:     flex;
  align-items: center;
  gap:         0.25rem;
  position:    relative;
  z-index:     1;
  margin-top: -1rem;
  margin-bottom: 1.5rem;
  transition:  color 0.2s ease;
}
.testimonial-card__expand-btn:hover { color: var(--color-orange-light); }
.testimonial-card__expand-btn.is-hidden {
  visibility: hidden;
  pointer-events: none;
}
.testimonial-card__footer {
  position:    relative;
  z-index:     1;
  display:     flex;
  align-items: center;
  gap:         1rem;
}
.testimonial-card__avatar {
  width:           var(--avatar-sz);
  height:          var(--avatar-sz);
  border-radius:   var(--radius-full);
  background:      var(--color-orange-20);
  color:           var(--color-orange);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-family:     'Rajdhani', sans-serif;
  font-weight:     700;
  font-size:       0.875rem;
  flex-shrink:     0;
}
.testimonial-card__name {
  display:     block;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size:   1rem;
  color:       #ffffff;
  font-style:  normal;
}
.testimonial-card__location {
  font-size: 0.875rem;
  color:     var(--color-orange-70);
}

/* ── Service Cards ── */
.service-card {
  border:           1.5px solid var(--color-border);
  border-radius:    var(--radius-xl);
  overflow:         hidden;
  background:       var(--color-bg-card);
  display:          flex;
  flex-direction:   column;
  height:           100%;
  transition:       border-color 0.3s var(--ease-out-expo),
                    box-shadow 0.3s var(--ease-out-expo),
                    transform 0.3s var(--ease-out-expo);
}
.service-card:hover {
  border-color: var(--color-orange-50);
  box-shadow:   var(--shadow-m);
  transform:    scale(1.01);
}
.service-card__img-wrap {
  width:     100%;
  height:    10rem;
  flex-shrink: 0;
  overflow:  hidden;
}
.service-card__img-wrap img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.service-card:hover .service-card__img-wrap img { transform: scale(1.05); }
.service-card__body {
  padding:         1.25rem;
  display:         flex;
  flex-direction:  column;
  justify-content: center;
  flex:            1;
}
.service-card__number {
  color:          var(--color-orange);
  font-family:    'Rajdhani', sans-serif;
  font-weight:    700;
  font-size:      0.75rem;
  letter-spacing: 0.05em;
  margin-bottom:  0.25rem;
}
.service-card__title {
  font-family:   'Rajdhani', sans-serif;
  font-weight:   700;
  color:         var(--color-text-primary);
  margin:        0 0 0.5rem;
}
.service-card__desc {
  color:         var(--color-text-muted);
  line-height:   1.7;
  margin-bottom: 0.75rem;
}
.service-card__link {
  color:       var(--color-orange);
  font-weight: 600;
  text-decoration: none;
  display:     inline-flex;
  align-items: center;
  gap:         0.375rem;
  transition:  gap 0.25s var(--ease-out-expo);
}
.service-card__link svg { transition: transform 0.25s var(--ease-out-expo); }
.service-card__link:hover { gap: 0.75rem; }
.service-card__link:hover svg { transform: translateX(4px); }

/* ── Services Grid ── */
.services-grid {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   2rem;
}
@media (min-width: 640px) {
  .service-card            { flex-direction: row; }
  .service-card__img-wrap  { width: 12rem; height: auto; align-self: stretch; }
}
@media (min-width: 1024px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1920px) { .services-grid { grid-template-columns: repeat(3, 1fr); } }

/* ── Why Choose Us Grid ── */
.why-choose-grid {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   2rem;
}
@media (min-width: 640px)  { .why-choose-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .why-choose-grid { grid-template-columns: repeat(3, 1fr); } }

/* ── Gallery Grid ── */
.gallery-grid-ba {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   2rem;
}
@media (min-width: 640px)  { .gallery-grid-ba { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .gallery-grid-ba { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1920px) { .gallery-grid-ba { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 2560px) { .gallery-grid-ba { grid-template-columns: repeat(5, 1fr); } }

/* ── FAQ Accordion ── */
.faq-item {
  border-bottom:     1px solid var(--color-border);
  border-left:       2px solid transparent;
  padding-left:      0;
  transition:        border-left-color 0.3s ease,
                     padding-left 0.3s ease;
}
.faq-item:last-child { border-bottom: none; }
.faq-item.active {
  border-left:  2px solid var(--color-orange);
  padding-left: 1rem;
}
.faq-toggle {
  width:           100%;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             1rem;
  padding:         1.25rem;
  background:      none;
  border:          none;
  cursor:          pointer;
  text-align:      left;
  font-family:     'Rajdhani', sans-serif;
  font-weight:     700;
  color:           var(--color-text-primary);
  transition:      color 0.2s ease;
}
.faq-toggle:hover,
.faq-item.active .faq-toggle { color: var(--color-orange); }
.faq-icon {
  flex-shrink: 0;
  color:       var(--color-orange);
  font-weight: 700;
  font-size:   1.25rem;
  line-height: 1;
  font-family: 'Rajdhani', sans-serif;
  transition:  transform 0.3s var(--ease-out-expo);
  min-width:   1.25rem;
  text-align:  center;
}
.faq-answer {
  max-height: 0;
  overflow:   hidden;
  transition: max-height 0.35s ease, padding 0.35s ease;
}
.faq-answer-inner { padding: 0 1.25rem 1.25rem; }

/* ── Social Links ── */
.social-link {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           2.75rem;  /* 44px */
  height:          2.75rem;
  border-radius:   var(--radius-full);
  background:      var(--color-white-10);
  color:           var(--color-white-70);
  text-decoration: none;
  transition:      background 0.3s ease, color 0.3s ease, transform 0.3s var(--ease-out-expo);
}
.social-link:hover {
  background: var(--color-orange);
  color:      #ffffff;
  transform:  scale(1.1);
}

/* ── Footer ── */
.footer-heading {
  font-family:    'Rajdhani', sans-serif;
  font-size:      clamp(0.875rem, 0.75vw + 0.125rem, 1.125rem);
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color:          #ffffff;
  margin:         0 0 1.25rem 0;
}
.footer-links {
  list-style: none;
  margin:     0;
  padding:    0;
}
.footer-links li { margin-bottom: 0.625rem; }
.footer-links a {
  color:           var(--color-white-60);
  text-decoration: none;
  font-size:       clamp(0.8125rem, 0.7vw + 0.125rem, 1.25rem);
  transition:      color 0.2s ease;
}
.footer-links a:hover { color: var(--color-orange); }
.footer-contact-list {
  list-style: none;
  margin:     0;
  padding:    0;
}
.footer-contact-item {
  display:     flex;
  align-items: flex-start;
  gap:         0.625rem;
  margin-bottom: 0.875rem;
  font-size:   clamp(0.8125rem, 0.7vw + 0.125rem, 1.25rem);
  line-height: 1.5;
}
.footer-contact-icon { color: var(--color-white-60); flex-shrink: 0; margin-top: 0.125rem; }
.footer-contact-item a {
  color:           var(--color-white-60);
  text-decoration: none;
  transition:      color 0.2s ease;
  word-break:      break-all;
}
.footer-contact-item a:hover { color: var(--color-orange); }
.footer-contact-item span   { color: var(--color-white-60); }
.footer-brand-logo-box {
  width:           3rem;
  height:          3rem;
  border-radius:   var(--radius-lg);
  background:      var(--color-white-10);
  border:          1px solid var(--color-white-20);
  overflow:        hidden;
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  transition:      border-color 0.3s ease;
}
.footer-brand-link:hover .footer-brand-logo-box { border-color: var(--color-orange); }
.footer-brand-link {
  display:         flex;
  align-items:     center;
  gap:             0.75rem;
  font-family:     'Rajdhani', sans-serif;
  font-weight:     800;
  font-size:       1.25rem;
  color:           #ffffff;
  text-decoration: none;
  margin-bottom:   1rem;
  transition:      opacity 0.3s ease;
}
.footer-brand-link:hover { opacity: 0.9; }
.footer-tagline {
  font-size:   clamp(0.8125rem, 0.7vw + 0.125rem, 1rem);
  line-height: 1.6;
  color:       var(--color-white-50);
  margin:      0 0 1.5rem 0;
  max-width:   17.5rem; /* 280px */
}
.footer-social { display: flex; gap: 0.75rem; }
.footer-grid {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   2rem;
  margin-bottom:         2rem;
}
@media (min-width: 640px)  { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: repeat(4, 1fr); gap: 2.5rem; } }
@media (min-width: 1920px) { .footer-grid { gap: 4rem; } }
@media (min-width: 2560px) { .footer-grid { gap: 5rem; } }
@media (min-width: 3840px) { .footer-grid { gap: 6rem; } }
.footer-bottom {
  border-top: 1px solid var(--color-white-10);
  padding:    1.5rem 0;
  text-align: center;
}
.footer-copyright {
  margin:    0;
  font-size: clamp(0.75rem, 0.6vw + 0.125rem, 0.9rem);
  color:     var(--color-white-40);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ── Process Steps ── */
.process-grid-desktop {
  display:               grid;
  grid-template-columns: repeat(7, 1fr);
  gap:                   0.5rem;
}
@media (min-width: 1024px) { .process-grid-desktop { gap: 1rem; } }
.process-step-inner {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  text-align:     center;
  position:       relative;
  z-index:        2;
}
.process-step-mobile {
  display:        flex;
  gap:            1rem;
  padding-bottom: 1.5rem;
}
.process-step-mobile:last-child { padding-bottom: 0; }

/* ── Service Area Layout ── */
.service-area-layout {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   3rem;
  align-items:           center;
}
@media (min-width: 1024px) { .service-area-layout { grid-template-columns: 1fr 1fr; } }

/* ── City Filter Buttons ── */
.city-filter-btn {
  padding:       0.5rem 1rem;
  border-radius: var(--radius-full);
  border:        1.5px solid var(--color-border);
  background:    var(--color-bg-card);
  color:         var(--color-text-primary);
  font-size:     0.875rem;
  font-weight:   500;
  cursor:        pointer;
  white-space:   nowrap;
  transition:    background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.city-filter-btn:hover {
  background:    var(--color-orange-glow);
  border-color:  var(--color-orange);
  color:         var(--color-orange);
  transform:     scale(1.05);
}
.city-filter-btn.active {
  background:   var(--color-orange);
  border-color: var(--color-orange);
  color:        #ffffff;
}

/* ── Skeleton loaders (shimmer / pulse / expand) ── */
.skel {
  position: relative;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 8px;
}
.dark .skel { background: rgba(255, 255, 255, 0.06); }
.skel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: translateX(-100%);
  animation: skeletonShimmer 1.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  animation-delay: var(--skel-delay, 0s);
}
.dark .skel::after {
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0) 100%);
}
@keyframes skeletonShimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.skel--pulse { animation: skeletonPulse 1.6s ease-in-out infinite; }
.skel--pulse::after { display: none; }
@keyframes skeletonPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}
.skel--expand {
  width: 0;
  animation: skeletonExpand 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: var(--skel-delay, 0s);
}
@keyframes skeletonExpand {
  from { width: 0; }
  to   { width: var(--skel-w, 100%); }
}

/* ── Page-loader overlay ── */
.page-loader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: var(--color-bg-primary, #ffffff);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1.25rem;
  transition: opacity 0.45s ease, visibility 0.45s ease;
}
.dark .page-loader { background: #1a1a1a; }
.page-loader.hide { opacity: 0; visibility: hidden; pointer-events: none; }
.page-loader__mark {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: #D4500A;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: 'Rajdhani', system-ui, sans-serif;
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: 0.02em;
  animation: pulseGlow 1.8s ease-in-out infinite;
}
.page-loader__bar {
  width: 160px;
  height: 3px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.08);
  overflow: hidden;
  position: relative;
}
.dark .page-loader__bar { background: rgba(255, 255, 255, 0.1); }
.page-loader__bar::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 35%;
  background: #D4500A;
  border-radius: 999px;
  animation: loaderSlide 1.1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes loaderSlide {
  0%   { left: -35%; }
  100% { left: 100%; }
}
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212, 80, 10, 0.55); transform: scale(1); }
  50%      { box-shadow: 0 0 0 18px rgba(212, 80, 10, 0); transform: scale(1.04); }
}

/* ── Process step animated circle ── */
.process-circle {
  transform: scale(0);
  background: rgba(212, 80, 10, 0.15);
  color: #D4500A;
  transition:
    transform 0.45s var(--ease-back),
    background-color 0.4s ease,
    color 0.4s ease;
  transition-delay: var(--step-delay, 0s);
}
.process-step.animated .process-circle {
  transform: scale(1);
  background: #D4500A;
  color: #ffffff;
}
.process-step .process-text {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.4s var(--ease-out-expo),
    transform 0.4s var(--ease-out-expo);
  transition-delay: calc(var(--step-delay, 0s) + 0.2s);
}
.process-step.animated .process-text {
  opacity: 1;
  transform: translateY(0);
}
.process-progress-line {
  width: 0;
  transition: width 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.3s;
}
.process-progress-line.animated {
  width: 100%; /* fills wrapper that already spans calc(100%/14) → calc(100% - 100%/14) */
}

/* ── Hover polish (Vercel parity) ── */
.nav-link:hover,
.dropdown-link:hover,
.footer-links a:hover,
.footer-contact-item a:hover,
.mobile-nav-link:hover,
.top-bar a:hover {
  color: #D4500A !important;
}
.top-bar a:hover {
  opacity: 1;
  transform: scale(1.05);
  transition: transform 0.2s ease, color 0.2s ease;
}
.site-header .header-logo,
.footer-logo {
  transition: transform 0.3s ease;
}
.site-header .header-logo:hover,
.footer-logo:hover {
  transform: scale(1.05);
}
.social-link {
  transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease !important;
}
.social-link:hover {
  transform: scale(1.1);
  background: #D4500A !important;
  color: #ffffff !important;
}
.service-card {
  transition:
    transform 0.3s var(--ease-out-expo),
    box-shadow 0.3s var(--ease-out-expo),
    border-color 0.3s var(--ease-out-expo) !important;
}
.service-card:hover {
  border-color: rgba(212, 80, 10, 0.5) !important;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
}
.service-card a:hover span {
  transform: translateX(6px);
}
.btn-primary {
  transition: transform 0.25s var(--ease-out-expo), box-shadow 0.25s ease, background 0.25s ease !important;
}
.btn-primary:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 24px rgba(212, 80, 10, 0.4);
}

/* Pulse glow on the hero CTA (Vercel parity) */
.hero-section .btn-primary {
  animation: pulseGlowSubtle 3s ease-in-out infinite 1.5s;
}
@keyframes pulseGlowSubtle {
  0%, 100% { box-shadow: 0 4px 16px rgba(212, 80, 10, 0.3); }
  50%      { box-shadow: 0 4px 32px rgba(212, 80, 10, 0.55); }
}

/* Header is always solid (bg-white light / bg-dark dark) — matches Next.js */

/* ── Form input inline reveal (EstimateForm parity) ── */
.form-card-premium [data-form-field] {
  opacity: 0;
  transform: translateY(12px);
  animation: inputReveal 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: var(--field-delay, 0s);
}
@keyframes inputReveal {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.input-premium:focus,
.textarea-premium:focus,
.form-card-premium input:focus,
.form-card-premium select:focus,
.form-card-premium textarea:focus {
  animation: inputFocusGlow 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes inputFocusGlow {
  0%   { box-shadow: 0 0 0 0 rgba(212, 80, 10, 0.4); }
  50%  { box-shadow: 0 0 0 8px rgba(212, 80, 10, 0); }
  100% { box-shadow: 0 0 0 4px rgba(212, 80, 10, 0.12); }
}

/* Submit button shake on validation error */
.btn-primary.shake {
  animation: formErrorShake 0.45s ease-in-out;
}
@keyframes formErrorShake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

/* Success pop for form completion */
.form-success-message {
  animation: formLift 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes formLift {
  from { opacity: 0; transform: translateY(20px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Gallery image zoom on hover ── */
[data-before-after-slider] img,
.service-gallery-item img {
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.gallery-item:hover [data-before-after-slider] img,
.service-gallery-item:hover img {
  transform: scale(1.06);
}

/* ── FAQ item: smooth height reveal handled in JS; add polish on trigger ── */
.faq-question:hover,
[data-faq-trigger]:hover {
  color: #D4500A;
}
.faq-chevron {
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.faq-item.open .faq-chevron,
[data-faq-item].open .faq-chevron {
  transform: rotate(180deg);
}

/* ── Trust Bar (4-item) stagger when entering viewport ── */
.hero-trust-bar [data-stagger-child] {
  transition-delay: calc(var(--trust-i, 0) * 80ms);
}

/* ── Float infinite on decorative elements (optional) ── */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
.float { animation: float 4s ease-in-out infinite; }

/* ── Scroll indicator (chevron bounce) ── */
@keyframes scrollIndicator {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50%      { transform: translateY(8px); opacity: .5; }
}
.scroll-indicator { animation: scrollIndicator 2s ease-in-out infinite; }

/* ── Topbar "Licensed & Bonded" pill badge (Vercel parity) ── */
.top-bar-badge {
  background: rgba(212, 80, 10, 0.12);
  border: 1px solid rgba(212, 80, 10, 0.35);
  padding: 0.2rem 0.75rem;
  border-radius: 999px;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.top-bar-badge:hover {
  background: rgba(212, 80, 10, 0.2);
  border-color: rgba(212, 80, 10, 0.55);
}

/* ── Skeleton-style section pre-reveal (applied by JS before IntersectionObserver fires) ── */
.is-prerender [data-animate]:not(.animated) { opacity: 0; }

/* Respect user preferences for reduced motion */
@media (prefers-reduced-motion: reduce) {
  [data-animate],
  [data-stagger] > [data-stagger-child],
  [data-card-hover] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

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

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

@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to   { opacity: 1; transform: translateX(0); }
}

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

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}

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

@keyframes formLift {
  from { opacity: 0; transform: translateY(20px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes inputFocusGlow {
  0%   { box-shadow: 0 0 0 0 rgba(212, 80, 10, 0.4); }
  50%  { box-shadow: 0 0 0 6px rgba(212, 80, 10, 0); }
  100% { box-shadow: 0 0 0 4px rgba(212, 80, 10, 0.1); }
}

@keyframes successCircle {
  from { transform: scale(0.5); border-radius: 50%; }
  to   { transform: scale(1); border-radius: 9999px; }
}

@keyframes checkmarkDraw {
  to { stroke-dashoffset: 0; }
}

@keyframes formFocusRipple {
  0%   { box-shadow: 0 0 0 0 var(--form-accent-light); }
  50%  { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: 0 0 0 4px var(--form-accent-light); }
}

@keyframes formFloatUp {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes formSuccessPop {
  0%   { transform: scale(0) rotate(-45deg); opacity: 0; }
  50%  { transform: scale(1.2) rotate(0deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

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

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-15px); }
}

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212, 80, 10, 0.4); }
  50%      { box-shadow: 0 0 20px 10px rgba(212, 80, 10, 0); }
}

@keyframes scrollIndicator {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50%      { transform: translateY(8px); opacity: 0.5; }
}

@keyframes wiggle {
  0%, 100% { transform: rotate(-3deg); }
  50%      { transform: rotate(3deg); }
}


/* ================================================================
   3. BASE / RESET STYLES
   ================================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  font-family: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--color-text-primary);
  background-color: var(--color-bg-primary);
  transition: background-color 0.3s ease, color 0.3s ease;
  margin: 0;
  padding: 0;
  line-height: 1.6;
}

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

a {
  color: inherit;
}

/* 4K html base font-size */
@media (min-width: 2560px) {
  html { font-size: 18px; }
}
@media (min-width: 3840px) {
  html { font-size: 22px; }
}

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

/* Screen reader only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Skip to content link */
.skip-link {
  position: absolute;
  top: -100%;
  left: 50%;
  transform: translateX(-50%);
  background: #D4500A;
  color: white;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  font-weight: 600;
  z-index: 9999;
  transition: top 0.3s ease;
  text-decoration: none;
}

.skip-link:focus {
  top: 1rem;
}

/* Focus-visible outlines (WCAG 2.4.7 — Focus Visible, 2.4.11 — Focus Not Obscured) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
[role="slider"]:focus-visible {
  outline: 3px solid #D4500A;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Current-page indicator (WCAG 2.4.8 — Location) */
[aria-current="page"] {
  color: #D4500A !important;
  font-weight: 700;
}
nav [aria-current="page"]::after {
  content: "";
  display: block;
  height: 2px;
  background: #D4500A;
  border-radius: 2px;
  margin-top: 4px;
}

/* Minimum 44×44 touch target (WCAG 2.5.5) */
button,
.btn,
a.nav-link,
a.dropdown-link,
a.mobile-nav-link,
a.footer-links a,
.city-filter-btn {
  min-height: 44px;
}

/* Windows High-Contrast / Forced-Colors mode (WCAG 1.4.3, 1.4.11) */
@media (forced-colors: active) {
  .btn,
  .btn-primary,
  .btn-outline {
    border: 2px solid ButtonText;
    forced-color-adjust: none;
    background: ButtonFace;
    color: ButtonText;
  }
  a:focus-visible,
  button:focus-visible {
    outline: 3px solid Highlight;
  }
  [data-animate],
  [data-stagger] > [data-stagger-child],
  [data-card-hover] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* High-contrast preference (WCAG 1.4.6 AAA) */
@media (prefers-contrast: more) {
  :root {
    --color-text-primary: #000000;
    --color-text-muted: #1a1a1a;
    --color-border: #000000;
  }
  .dark {
    --color-text-primary: #ffffff;
    --color-text-muted: #f4f4f4;
    --color-border: #ffffff;
  }
  a:not(.btn) { text-decoration: underline; }
  /* Navigation elements stay underline-free even in high-contrast mode */
  .nav-link,
  .dropdown-link,
  .mobile-nav-link,
  .footer-links a,
  .footer-contact-item a,
  .social-link,
  .header-logo,
  .service-card__link { text-decoration: none !important; }
}

/* Decorative SVGs should be hidden from screen readers */
svg[aria-hidden="true"],
.nav-link svg,
.footer-contact-icon,
.chevron-icon,
.logo-light,
.logo-dark {
  /* visual only — belt-and-suspenders hide for AT */
}

/* High contrast mode */
@media (prefers-contrast: high) {
  :root {
    --color-text-muted: #444444;
    --color-border: #999999;
  }
  .dark {
    --color-text-muted: #cccccc;
    --color-border: #888888;
  }
  .section-label {
    letter-spacing: 0.2em;
    font-weight: 800;
  }
  .btn {
    border: 2px solid currentColor;
  }
  .btn-primary {
    border-color: transparent;
  }
}

/* Disable transitions during theme switch */
.theme-switching,
.theme-switching *,
.theme-switching *::before,
.theme-switching *::after {
  transition-duration: 0s !important;
  animation-duration: 0s !important;
}


/* ================================================================
   4. CONTAINER SYSTEM
   ================================================================ */

.container {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(1rem, 4vw, 2rem);
  padding-right: clamp(1rem, 4vw, 2rem);
}

@media (min-width: 768px) and (max-width: 1023px) {
  .container {
    padding-left: clamp(1.5rem, 4vw, 2.5rem);
    padding-right: clamp(1.5rem, 4vw, 2.5rem);
  }
}

@media (min-width: 1366px) {
  .container {
    max-width: 1260px;
    padding-left: clamp(1.5rem, 3.5vw, 2.5rem);
    padding-right: clamp(1.5rem, 3.5vw, 2.5rem);
  }
}

@media (min-width: 1440px) {
  .container {
    max-width: 1320px;
  }
}

@media (min-width: 1600px) {
  .container {
    max-width: 1400px;
  }
}

@media (min-width: 1920px) {
  .container {
    max-width: 1400px;
    padding-left: clamp(2rem, 3vw, 3rem);
    padding-right: clamp(2rem, 3vw, 3rem);
  }
}

@media (min-width: 2560px) {
  .container {
    max-width: 1600px;
    padding-left: clamp(2.5rem, 3vw, 4rem);
    padding-right: clamp(2.5rem, 3vw, 4rem);
  }
}

@media (min-width: 3840px) {
  .container {
    max-width: 2400px;
    padding-left: clamp(3rem, 3vw, 5rem);
    padding-right: clamp(3rem, 3vw, 5rem);
  }
}

@media (max-width: 360px) {
  .container {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
}

@media (min-width: 5120px) {
  .container {
    max-width: 3200px;
    padding-left: clamp(4rem, 3vw, 6rem);
    padding-right: clamp(4rem, 3vw, 6rem);
  }
}


/* ================================================================
   5. SECTION SPACING
   ================================================================ */

.section-py {
  padding-top: clamp(3rem, 8vh, 5rem);
  padding-bottom: clamp(3rem, 8vh, 5rem);
}

.section-py-sm {
  padding-top: clamp(2rem, 5vh, 3.5rem);
  padding-bottom: clamp(2rem, 5vh, 3.5rem);
}

.section-py-lg {
  padding-top: clamp(4rem, 10vh, 7rem);
  padding-bottom: clamp(4rem, 10vh, 7rem);
}

.section-py-xl {
  padding-top: clamp(5rem, 12vh, 9rem);
  padding-bottom: clamp(5rem, 12vh, 9rem);
}

@media (min-width: 768px) and (max-width: 1023px) {
  .section-py {
    padding-top: clamp(3.5rem, 8vh, 6rem);
    padding-bottom: clamp(3.5rem, 8vh, 6rem);
  }
  .section-py-lg {
    padding-top: clamp(4.5rem, 10vh, 7.5rem);
    padding-bottom: clamp(4.5rem, 10vh, 7.5rem);
  }
}

@media (min-width: 1920px) {
  .section-py {
    padding-top: clamp(4rem, 8vh, 7rem);
    padding-bottom: clamp(4rem, 8vh, 7rem);
  }
}

@media (min-width: 2560px) {
  .section-py {
    padding-top: clamp(5rem, 8vh, 9rem);
    padding-bottom: clamp(5rem, 8vh, 9rem);
  }
}

@media (min-width: 3840px) {
  .section-py {
    padding-top: clamp(6rem, 10vh, 11rem);
    padding-bottom: clamp(6rem, 10vh, 11rem);
  }
  .section-py-lg {
    padding-top: clamp(7rem, 12vh, 13rem);
    padding-bottom: clamp(7rem, 12vh, 13rem);
  }
}

@media (min-width: 5120px) {
  .section-py {
    padding-top: clamp(7rem, 10vh, 13rem);
    padding-bottom: clamp(7rem, 10vh, 13rem);
  }
  .section-py-lg {
    padding-top: clamp(8rem, 12vh, 15rem);
    padding-bottom: clamp(8rem, 12vh, 15rem);
  }
}

/* Mobile S overrides */
@media (max-width: 360px) {
  .section-py {
    padding-top: clamp(2rem, 6vh, 4rem);
    padding-bottom: clamp(2rem, 6vh, 4rem);
  }
}


/* ================================================================
   6. TYPOGRAPHY CLASSES
   ================================================================ */

.section-label {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  color: #B5430A;
  font-size: clamp(0.75rem, 0.75vw + 0.25rem, 0.875rem);
  letter-spacing: 0.15em;
  margin-bottom: clamp(0.5rem, 1.5vh, 0.875rem);
}

.dark .section-label {
  color: var(--color-orange-text);
}

.section-title {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  color: var(--color-text-primary);
  font-size: clamp(1.75rem, 4vw + 0.5rem, 2.75rem);
  line-height: 1.12;
  text-wrap: balance;
  margin-bottom: clamp(0.75rem, 2vh, 1.25rem);
}

.section-title-lg {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  color: var(--color-text-primary);
  font-size: clamp(2rem, 5vw + 0.5rem, 3.25rem);
  line-height: 1.1;
  text-wrap: balance;
  margin-bottom: clamp(1rem, 2.5vh, 1.5rem);
}

.section-subtitle {
  color: var(--color-text-muted);
  font-size: clamp(0.9375rem, 1.25vw + 0.25rem, 1.125rem);
  line-height: 1.7;
  max-width: 42rem;
  text-wrap: pretty;
}

.section-subtitle-lg {
  color: var(--color-text-muted);
  font-size: clamp(1rem, 1.5vw + 0.25rem, 1.25rem);
  line-height: 1.7;
  max-width: 42rem;
  text-wrap: pretty;
}

/* 2560px typography scaling */
@media (min-width: 2560px) {
  .section-title {
    font-size: clamp(2rem, 3.5vw + 0.5rem, 4.5rem);
  }
  .section-title-lg {
    font-size: clamp(2.5rem, 4.5vw + 0.5rem, 5rem);
  }
  .section-subtitle {
    font-size: clamp(1rem, 1.25vw + 0.25rem, 1.625rem);
    max-width: 56rem;
  }
  .section-subtitle-lg {
    font-size: clamp(1.125rem, 1.5vw + 0.25rem, 1.75rem);
    max-width: 64rem;
  }
  .section-label {
    font-size: clamp(0.8125rem, 0.75vw + 0.25rem, 1.0625rem);
  }
}

/* 3840px typography scaling */
@media (min-width: 3840px) {
  .section-title {
    font-size: clamp(2.5rem, 4vw + 0.5rem, 5.5rem);
  }
  .section-title-lg {
    font-size: clamp(3rem, 5vw + 0.5rem, 6rem);
  }
  .section-subtitle {
    font-size: clamp(1.125rem, 1.5vw + 0.25rem, 1.875rem);
    max-width: 64rem;
  }
  .section-subtitle-lg {
    font-size: clamp(1.25rem, 1.75vw + 0.25rem, 2rem);
    max-width: 72rem;
  }
  .section-label {
    font-size: clamp(0.875rem, 0.875vw + 0.25rem, 1.125rem);
  }
}

/* Mobile S typography overrides */
@media (max-width: 360px) {
  .section-title {
    font-size: clamp(1.5rem, 4vw + 0.4rem, 2.5rem);
  }
  .section-title-lg {
    font-size: clamp(1.75rem, 5vw + 0.4rem, 3rem);
  }
  .section-subtitle {
    font-size: clamp(0.875rem, 1.25vw + 0.25rem, 1rem);
  }
}


/* ================================================================
   7. FLUID FONT SIZES
   ================================================================ */

/* Display / Hero */
.fluid-hero {
  font-size: clamp(2.5rem, 4vw + 1rem, 6rem);
  line-height: 1.1;
  font-weight: 700;
}

.fluid-display {
  font-size: clamp(2rem, 3.5vw + 0.75rem, 5rem);
  line-height: 1.15;
  font-weight: 700;
}

/* Headings */
.fluid-h1 {
  font-size: clamp(1.875rem, 3vw + 0.5rem, 4rem);
  line-height: 1.2;
  font-weight: 700;
}

.fluid-h2 {
  font-size: clamp(1.5rem, 2.5vw + 0.375rem, 3.5rem);
  line-height: 1.25;
  font-weight: 700;
}

.fluid-h3 {
  font-size: clamp(1.25rem, 2vw + 0.25rem, 2.5rem);
  line-height: 1.3;
  font-weight: 600;
}

.fluid-h4 {
  font-size: clamp(1.125rem, 1.5vw + 0.125rem, 2rem);
  line-height: 1.35;
  font-weight: 600;
}

/* Body text */
.fluid-body {
  font-size: clamp(1rem, 1vw + 0.25rem, 1.5rem);
  line-height: 1.7;
}

.fluid-body-sm {
  font-size: clamp(0.875rem, 0.875vw + 0.25rem, 1.375rem);
  line-height: 1.6;
}

.fluid-body-lg {
  font-size: clamp(1.0625rem, 1.25vw + 0.25rem, 1.5rem);
  line-height: 1.7;
}

/* Labels and small text */
.fluid-label {
  font-size: clamp(0.75rem, 0.6vw + 0.25rem, 1rem);
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.fluid-caption {
  font-size: clamp(0.8125rem, 0.7vw + 0.125rem, 1.25rem);
  line-height: 1.5;
}

/* Buttons */
.fluid-btn {
  font-size: clamp(0.875rem, 0.875vw + 0.25rem, 1.375rem);
  line-height: 1.4;
  font-weight: 600;
}

.fluid-btn-lg {
  font-size: clamp(1rem, 1vw + 0.25rem, 1.625rem);
  line-height: 1.4;
  font-weight: 600;
}


/* ================================================================
   8. BUTTON SYSTEM
   ================================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  letter-spacing: 0.025em;
  transition: all 0.3s ease;
  border-radius: 9999px;
  font-size: clamp(0.8125rem, 1vw + 0.125rem, 0.9375rem);
  padding: clamp(0.75rem, 1.5vh, 0.9375rem) clamp(1.5rem, 3vw, 2rem);
  gap: clamp(0.375rem, 0.75vw, 0.5rem);
  text-decoration: none;
  cursor: pointer;
  border: none;
  line-height: 1.4;
}

.btn-primary {
  background-color: #D4500A;
  color: #ffffff;
  box-shadow: 0 4px 16px rgba(212, 80, 10, 0.3);
}

.btn-primary:hover {
  background-color: #B5430A;
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(212, 80, 10, 0.4);
}

.btn-outline {
  background: transparent;
  color: #343434;
  border: 2px solid rgba(52, 52, 52, 0.5);
}

.btn-outline:hover {
  background: rgba(52, 52, 52, 0.1);
  border-color: #343434;
}

.dark .btn-outline {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.5);
}

.dark .btn-outline:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: #ffffff;
}

.btn-dark {
  background-color: #343434;
  color: #ffffff;
}

.btn-dark:hover {
  background-color: #1a1a1a;
}

.btn-lg {
  font-size: clamp(0.875rem, 1.25vw + 0.125rem, 1rem);
  padding: clamp(0.875rem, 2vh, 1.125rem) clamp(1.75rem, 4vw, 2.5rem);
}

.btn-sm {
  font-size: clamp(0.8125rem, 0.875vw + 0.125rem, 0.875rem);
  padding: clamp(0.5rem, 1vh, 0.625rem) clamp(1rem, 2vw, 1.25rem);
}

/* Mobile S button overrides */
@media (max-width: 360px) {
  .btn {
    font-size: clamp(0.8125rem, 1vw + 0.125rem, 0.875rem);
    padding: clamp(0.625rem, 1.5vh, 0.75rem) clamp(1.25rem, 3vw, 1.5rem);
  }
  .btn-lg {
    font-size: clamp(0.875rem, 1.25vw + 0.125rem, 0.9375rem);
    padding: clamp(0.75rem, 2vh, 0.875rem) clamp(1.5rem, 4vw, 2rem);
  }
}

/* 2560px button scaling */
@media (min-width: 2560px) {
  .btn {
    font-size: clamp(0.875rem, 1vw + 0.125rem, 1.125rem);
    padding: clamp(0.875rem, 1.75vh, 1.125rem) clamp(1.75rem, 3.5vw, 2.5rem);
  }
  .btn-lg {
    font-size: clamp(1rem, 1.25vw + 0.125rem, 1.25rem);
    padding: clamp(1rem, 2.25vh, 1.375rem) clamp(2rem, 4.5vw, 3rem);
  }
  .btn-sm {
    font-size: clamp(0.875rem, 0.875vw + 0.125rem, 1rem);
  }
}

/* 3840px button scaling */
@media (min-width: 3840px) {
  .btn {
    font-size: clamp(1rem, 1.25vw + 0.125rem, 1.375rem);
    padding: clamp(1rem, 2vh, 1.375rem) clamp(2rem, 4vw, 3rem);
  }
  .btn-lg {
    font-size: clamp(1.125rem, 1.5vw + 0.125rem, 1.5rem);
    padding: clamp(1.125rem, 2.5vh, 1.5rem) clamp(2.25rem, 5vw, 3.5rem);
  }
  .btn-sm {
    font-size: clamp(1rem, 1vw + 0.125rem, 1.125rem);
  }
}


/* ================================================================
   9. BACKGROUND UTILITIES
   ================================================================ */

/* ──────────────────────────────────────────────────────────────
   Section background utilities (Vercel parity)
   Color tokens:
     --color-bg-warm       light: #f8f5f2  dark: #1a1a1a (dark-deep)
     --color-bg-white-sec  light: #ffffff  dark: #343434 (dark)
     --color-bg-dark-deep  always #1a1a1a  (testimonials)
     --color-bg-process    light: linear-gradient(warm→white)
                           dark:  linear-gradient(dark-deep→dark)
   All transitions smooth 0.3s for theme-toggle crossfade.
   ────────────────────────────────────────────────────────────── */

.bg-warm {
  background-color: #f8f5f2;
  transition: background-color 0.3s ease;
}
.dark .bg-warm {
  background-color: #1a1a1a;
}

.bg-cream {
  background-color: #faf9f7;
  transition: background-color 0.3s ease;
}
.dark .bg-cream {
  background-color: #1e1e1e;
}

/* Always-white panel that flips to #343434 in dark mode (Vercel bg-white dark:bg-dark) */
.bg-surface {
  background-color: #ffffff;
  transition: background-color 0.3s ease;
}
.dark .bg-surface {
  background-color: #343434;
}

/* Process gradient (Vercel: from-warm to-white dark:from-dark-deep dark:to-dark) */
.bg-process-gradient {
  background: linear-gradient(to bottom, #f8f5f2, #ffffff);
  transition: background 0.3s ease;
}
.dark .bg-process-gradient {
  background: linear-gradient(to bottom, #1a1a1a, #343434);
}

/* Always-dark panel (Testimonials) */
.bg-dark-deep {
  background-color: #1a1a1a;
}

.bg-dark-mid {
  background-color: #2a2a2a;
}

.bg-dark-soft {
  background-color: #404040;
}

.bg-orange {
  background-color: #D4500A;
}

.bg-white {
  background-color: #ffffff;
}


/* ================================================================
   10. FORM SYSTEM
   ================================================================ */

/* -- Fix for dropdown z-index stacking context -- */
.form-field-group:has(.z-50) {
  z-index: 50 !important;
}

/* -- Form container -- */
.form-container-sm {
  max-width: clamp(720px, 50vw, 960px);
  margin-left: auto;
  margin-right: auto;
}

/* -- Form card premium wrapper -- */
.form-card-premium {
  border-radius: 24px;
  padding: clamp(2rem, 3vw, 3.5rem);
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1);
  transition: all 0.5s ease;
}

.dark .form-card-premium {
  background-color: var(--color-bg-card);
  border-color: var(--color-border-subtle);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.3);
}

.form-card-premium:hover {
  box-shadow: 0 35px 60px -12px rgba(0, 0, 0, 0.15);
  border-color: rgba(212, 80, 10, 0.2);
}

.dark .form-card-premium:hover {
  box-shadow: 0 35px 60px -12px rgba(0, 0, 0, 0.4);
}

/* -- Premium input field styles -- */
.input-premium {
  padding: 0.875rem 1rem;
  border: 2px solid var(--color-border);
  border-radius: 12px;
  font-size: 0.875rem;
  font-family: 'Source Sans 3', system-ui, sans-serif;
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
  transition: all 0.3s ease-out;
  width: 100%;
}

.input-premium:focus {
  outline: none;
  border-color: #D4500A;
  box-shadow: 0 0 0 4px rgba(212, 80, 10, 0.1);
  animation: inputFocusGlow 0.4s ease-out;
  transform: translateY(-2px);
}

.input-premium:hover {
  border-color: rgba(212, 80, 10, 0.5);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.input-premium::placeholder {
  color: var(--color-text-muted);
  opacity: 0.7;
}

/* -- Premium textarea -- */
.textarea-premium {
  padding: 0.875rem 1rem;
  border: 2px solid var(--color-border);
  border-radius: 12px;
  font-size: 0.875rem;
  font-family: 'Source Sans 3', system-ui, sans-serif;
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
  transition: all 0.3s ease-out;
  width: 100%;
  resize: vertical;
  min-height: 120px;
}

.textarea-premium:focus {
  outline: none;
  border-color: #D4500A;
  box-shadow: 0 0 0 4px rgba(212, 80, 10, 0.1);
  animation: inputFocusGlow 0.4s ease-out;
  transform: translateY(-2px);
}

.textarea-premium:hover {
  border-color: rgba(212, 80, 10, 0.5);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.textarea-premium::placeholder {
  color: var(--color-text-muted);
  opacity: 0.7;
}

/* -- Premium select dropdown -- */
.select-premium {
  color-scheme: light;
  padding: 0.875rem 1rem;
  border: 2px solid var(--color-border);
  border-radius: 12px;
  font-size: 0.875rem;
  font-family: 'Source Sans 3', system-ui, sans-serif;
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
  transition: all 0.3s ease-out;
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23D4500A'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 20px;
  padding-right: 44px;
}

.select-premium:focus {
  outline: none;
  border-color: #D4500A;
  box-shadow: 0 0 0 4px rgba(212, 80, 10, 0.1);
  animation: inputFocusGlow 0.4s ease-out;
  transform: translateY(-2px);
}

.select-premium:hover {
  border-color: rgba(212, 80, 10, 0.5);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.select-premium option {
  background-color: #ffffff;
  color: #1a1a1a;
  padding: 12px 16px;
}

.select-premium option:hover,
.select-premium option:focus,
.select-premium option:active {
  background-color: #D4500A !important;
  background: linear-gradient(#D4500A, #D4500A) !important;
  color: #ffffff !important;
}

.select-premium option:checked {
  background-color: #D4500A !important;
  background: linear-gradient(#D4500A, #D4500A) !important;
  color: #ffffff !important;
}

/* Dark mode option styling */
.dark .select-premium option {
  background-color: #2a2a2a;
  color: #ededed;
}

.dark .select-premium option:hover,
.dark .select-premium option:focus,
.dark .select-premium option:active,
.dark .select-premium option:checked {
  background-color: #D4500A !important;
  background: linear-gradient(#D4500A, #D4500A) !important;
  color: #ffffff !important;
}

/* -- Submit button premium -- */
.btn-submit-premium {
  position: relative;
  width: 100%;
  padding: 1rem 2rem;
  border-radius: 9999px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  letter-spacing: 0.025em;
  font-size: clamp(0.9375rem, 1vw + 0.25rem, 1.375rem);
  background: linear-gradient(to right, #D4500A, #B5430A);
  color: #ffffff;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1), 0 4px 16px rgba(212, 80, 10, 0.3);
  transition: all 0.3s ease-out;
  overflow: hidden;
  border: none;
  cursor: pointer;
}

.btn-submit-premium:hover {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1), 0 6px 24px rgba(212, 80, 10, 0.4);
  transform: translateY(-4px);
}

.btn-submit-premium:active {
  transform: translateY(0);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

.btn-submit-premium:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.btn-submit-premium:disabled:hover {
  transform: translateY(0);
}

/* Shimmer effect */
.btn-submit-premium::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.3) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  background-position: -200% center;
  transition: background-position 0.5s ease;
}

.btn-submit-premium:hover::before {
  background-position: 200% center;
}

/* -- Form field group -- */
.form-field-group {
  transition: all 0.3s ease;
}

.form-field-group:focus-within {
  transform: translateY(-2px);
}

/* -- Input reveal animation -- */
.animate-input-reveal {
  animation: formFloatUp 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* -- Form lift animation -- */
.animate-form-lift {
  animation: formLift 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* -- Success animation -- */
.animate-success {
  animation: successCircle 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* -- Success checkmark -- */
.success-checkmark {
  stroke-dasharray: 50;
  stroke-dashoffset: 50;
  animation: checkmarkDraw 0.5s ease-out 0.2s forwards;
}

/* -- Stagger delays -- */
.stagger-1 { animation-delay: 0.05s; }
.stagger-2 { animation-delay: 0.1s; }
.stagger-3 { animation-delay: 0.15s; }
.stagger-4 { animation-delay: 0.2s; }
.stagger-5 { animation-delay: 0.25s; }
.stagger-6 { animation-delay: 0.3s; }

/* -- Form Input Field -- */
.form-input-field {
  width: 100%;
  padding: clamp(0.875rem, 1vw + 0.25rem, 1.375rem) clamp(1rem, 1.25vw + 0.25rem, 1.75rem);
  padding-right: 3rem;
  border: 2px solid var(--color-border);
  border-radius: 1rem;
  font-size: clamp(1rem, 1vw + 0.25rem, 1.375rem);
  font-family: 'Source Sans 3', system-ui, sans-serif;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 255, 255, 0.85) 100%
  );
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--color-text-primary);
  min-height: 60px;
  transition:
    border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    background 0.3s ease;
  will-change: transform, box-shadow;
}

.form-input-field:hover {
  border-color: rgba(212, 80, 10, 0.4);
  box-shadow: var(--form-shadow-md);
  transform: translateY(-1px);
}

.form-input-field:focus {
  outline: none;
  border-color: var(--form-accent);
  box-shadow:
    0 0 0 4px var(--form-accent-light),
    var(--form-shadow-lg);
  transform: translateY(-2px) scale(1.005);
  animation: formFocusRipple 0.6s ease-out;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0.95) 100%
  );
}

.form-input-field::placeholder {
  color: var(--color-text-muted);
  opacity: 0.6;
  transition: opacity 0.2s ease;
}

.form-input-field:focus::placeholder {
  opacity: 0.4;
}

/* Error State */
.form-input-field--error {
  border-color: var(--form-error) !important;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(239, 68, 68, 0.03) 100%
  ) !important;
  animation: formErrorShake 0.4s ease-out;
}

.form-input-field--error:focus {
  box-shadow:
    0 0 0 4px var(--form-error-light),
    var(--form-shadow-md) !important;
}

/* Success State */
.form-input-field--success {
  border-color: var(--form-success) !important;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(34, 197, 94, 0.03) 100%
  ) !important;
}

.form-input-field--success:focus {
  box-shadow:
    0 0 0 4px var(--form-success-light),
    var(--form-shadow-md) !important;
}

/* -- Floating Label -- */
.form-floating-label {
  position: absolute;
  left: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: clamp(0.875rem, 0.875vw + 0.125rem, 1.125rem);
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-weight: 500;
  color: var(--color-text-muted);
  pointer-events: none;
  background: transparent;
  padding: 0 0.25rem;
  transition:
    top 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    font-size 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    color 0.2s ease,
    font-weight 0.2s ease;
}

.form-floating-label--active {
  top: 0.5rem;
  transform: translateY(0);
  font-size: clamp(0.7rem, 0.6vw + 0.125rem, 0.875rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--form-accent);
}

.form-input-field:focus ~ .form-floating-label,
.form-input-field:not(:placeholder-shown) ~ .form-floating-label {
  top: 0.5rem;
  transform: translateY(0);
  font-size: clamp(0.7rem, 0.6vw + 0.125rem, 0.875rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--form-accent);
}

/* -- Form Textarea Field -- */
.form-textarea-field {
  width: 100%;
  padding: clamp(0.875rem, 1vw + 0.25rem, 1.375rem) clamp(1rem, 1.25vw + 0.25rem, 1.75rem);
  border: 2px solid var(--color-border);
  border-radius: 1rem;
  font-size: clamp(1rem, 1vw + 0.25rem, 1.375rem);
  font-family: 'Source Sans 3', system-ui, sans-serif;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 255, 255, 0.85) 100%
  );
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--color-text-primary);
  min-height: 140px;
  resize: vertical;
  transition:
    border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    background 0.3s ease;
  will-change: transform, box-shadow;
}

.form-textarea-field:hover {
  border-color: rgba(212, 80, 10, 0.4);
  box-shadow: var(--form-shadow-md);
  transform: translateY(-1px);
}

.form-textarea-field:focus {
  outline: none;
  border-color: var(--form-accent);
  box-shadow:
    0 0 0 4px var(--form-accent-light),
    var(--form-shadow-lg);
  transform: translateY(-2px);
  animation: formFocusRipple 0.6s ease-out;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0.95) 100%
  );
}

.form-textarea-field::placeholder {
  color: var(--color-text-muted);
  opacity: 0.6;
  transition: opacity 0.2s ease;
}

.form-textarea-field:focus::placeholder {
  opacity: 0.4;
}

.form-textarea-field--error {
  border-color: var(--form-error) !important;
  animation: formErrorShake 0.4s ease-out;
}

.form-textarea-field--error:focus {
  box-shadow:
    0 0 0 4px var(--form-error-light),
    var(--form-shadow-md) !important;
}

/* -- Form Label -- */
.form-label {
  display: block;
  font-size: clamp(0.875rem, 0.875vw + 0.125rem, 1.125rem);
  font-weight: 600;
  font-family: 'Source Sans 3', system-ui, sans-serif;
  color: var(--color-text-primary);
  letter-spacing: 0.02em;
  transition: color 0.2s ease;
}

/* -- Form Error Message -- */
.form-error-message {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: clamp(0.8rem, 0.75vw + 0.125rem, 1rem);
  font-weight: 500;
  color: var(--form-error);
  margin-top: 0.5rem;
  padding-left: 0.25rem;
  animation: formFloatUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* -- Form Legend -- */
.form-legend {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  line-height: 1.5;
}

.form-legend-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(0.875rem, 0.875vw + 0.125rem, 1.125rem);
  font-weight: 600;
  color: var(--form-accent);
}

/* -- Form Wrappers -- */
.form-input-wrapper,
.form-textarea-wrapper,
.form-select-wrapper,
.form-field-wrapper {
  position: relative;
  animation: formFloatUp 0.4s cubic-bezier(0.4, 0, 0.2, 1) backwards;
}

/* -- Success/Error Icon Animations -- */
.form-input-wrapper .lucide-check,
.form-textarea-wrapper .lucide-check {
  animation: formSuccessPop 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  color: var(--form-success);
}

.form-input-wrapper .lucide-alert-circle,
.form-textarea-wrapper .lucide-alert-circle {
  animation: formErrorShake 0.4s ease-out;
  color: var(--form-error);
}

/* -- Dark Mode Form Adjustments -- */
.dark .form-input-field,
.dark .form-textarea-field {
  background: linear-gradient(
    135deg,
    rgba(30, 30, 35, 0.95) 0%,
    rgba(25, 25, 30, 0.9) 100%
  );
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--color-text-primary);
}

.dark .form-input-field:hover,
.dark .form-textarea-field:hover {
  border-color: rgba(212, 80, 10, 0.5);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.dark .form-input-field:focus,
.dark .form-textarea-field:focus {
  border-color: var(--form-accent);
  background: linear-gradient(
    135deg,
    rgba(35, 35, 40, 1) 0%,
    rgba(30, 30, 35, 0.95) 100%
  );
  box-shadow:
    0 0 0 4px rgba(212, 80, 10, 0.2),
    0 8px 24px rgba(0, 0, 0, 0.4);
}

.dark .form-input-field::placeholder,
.dark .form-textarea-field::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.dark .form-floating-label {
  color: rgba(255, 255, 255, 0.5);
}

.dark .form-floating-label--active,
.dark .form-input-field:focus ~ .form-floating-label {
  color: var(--form-accent);
}

.dark .form-label {
  color: rgba(255, 255, 255, 0.9);
}

/* -- Accessibility: Focus-visible -- */
.form-input-field:focus-visible,
.form-textarea-field:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--color-bg-primary),
    0 0 0 4px var(--form-accent),
    var(--form-shadow-lg);
}

.dark .form-input-field:focus-visible,
.dark .form-textarea-field:focus-visible {
  box-shadow:
    0 0 0 2px rgba(30, 30, 35, 1),
    0 0 0 4px var(--form-accent),
    0 8px 24px rgba(0, 0, 0, 0.4);
}

/* -- Touch Target Optimization -- */
@media (pointer: coarse) {
  .form-input-field,
  .form-textarea-field {
    min-height: 56px;
    font-size: 16px;
    padding: 1rem 1.25rem;
  }

  .form-input-field:active,
  .form-textarea-field:active {
    transform: scale(0.995);
  }
}

/* -- Reduced Motion: Forms -- */
@media (prefers-reduced-motion: reduce) {
  .form-input-field,
  .form-textarea-field {
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }

  .form-input-field:focus,
  .form-textarea-field:focus,
  .form-input-field:hover,
  .form-textarea-field:hover {
    transform: none;
    animation: none;
  }

  .form-floating-label {
    transition: all 0.15s ease;
  }

  .form-error-message,
  .form-input-wrapper,
  .form-textarea-wrapper,
  .form-select-wrapper,
  .form-field-wrapper,
  .animate-input-reveal {
    animation: none;
    opacity: 1;
  }

  .form-input-wrapper .lucide-check,
  .form-input-wrapper .lucide-alert-circle,
  .form-textarea-wrapper .lucide-check,
  .form-textarea-wrapper .lucide-alert-circle {
    animation: none;
  }
}

/* -- High Contrast Mode: Forms -- */
@media (prefers-contrast: high) {
  .form-input-field,
  .form-textarea-field {
    border-width: 3px;
  }

  .form-input-field:focus,
  .form-textarea-field:focus {
    box-shadow: 0 0 0 3px var(--form-accent);
  }
}

/* -- Help Text -- */
.form-help-text {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: clamp(0.75rem, 0.7vw + 0.125rem, 1rem);
  color: var(--color-text-muted);
  margin-top: 0.375rem;
  padding-left: 0.25rem;
  animation: formFloatUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.dark .form-help-text {
  color: rgba(255, 255, 255, 0.5);
}

/* -- Checkbox -- */
.form-checkbox-wrapper {
  position: relative;
}

.form-checkbox-wrapper input[type="checkbox"]:checked + span {
  border-color: var(--form-accent);
  background: linear-gradient(135deg, var(--form-accent) 0%, #B5430A 100%);
}

.form-checkbox-wrapper input[type="checkbox"]:checked + span .lucide-check {
  opacity: 1;
  transform: scale(1);
}

.form-checkbox-wrapper input[type="checkbox"]:focus-visible + span {
  box-shadow: 0 0 0 4px var(--form-accent-light);
}

/* -- Toggle/Switch -- */
.form-toggle-wrapper {
  position: relative;
}

.form-toggle-track {
  position: relative;
  width: 2.75rem;
  height: 1.5rem;
  border-radius: 0.75rem;
  background: var(--color-border);
  transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.form-toggle-track--on {
  background: linear-gradient(135deg, var(--form-accent) 0%, #B5430A 100%);
}

.form-toggle-thumb {
  position: absolute;
  top: 0.125rem;
  left: 0.125rem;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.form-toggle-track--on .form-toggle-thumb {
  transform: translateX(1.25rem);
}

.dark .form-toggle-track {
  background: rgba(255, 255, 255, 0.15);
}

/* -- Radio Group -- */
.form-radio-group-wrapper {
  border: none;
  padding: 0;
  margin: 0;
}

.form-radio-group-wrapper legend {
  padding: 0;
}

/* -- File Upload Dropzone -- */
.form-file-dropzone {
  border: 2px dashed var(--color-border);
  border-radius: 1rem;
  padding: 2rem;
  text-align: center;
  transition: all 0.3s ease;
  cursor: pointer;
}

.form-file-dropzone:hover,
.form-file-dropzone--active {
  border-color: var(--form-accent);
  background: var(--form-accent-light);
}

.form-file-dropzone--reject {
  border-color: var(--form-error);
  background: var(--form-error-light);
}

.dark .form-file-dropzone {
  border-color: rgba(255, 255, 255, 0.15);
}

.dark .form-file-dropzone:hover,
.dark .form-file-dropzone--active {
  border-color: var(--form-accent);
  background: rgba(212, 80, 10, 0.1);
}

/* -- Chips/Tags -- */
.form-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  background: var(--form-accent-light);
  border: 1px solid rgba(212, 80, 10, 0.3);
  border-radius: 9999px;
  font-size: clamp(0.875rem, 0.875vw + 0.125rem, 1.125rem);
  color: var(--form-accent);
  font-weight: 500;
  transition: all 0.2s ease;
}

.form-chip:hover {
  background: rgba(212, 80, 10, 0.2);
}

.form-chip-remove {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease;
}

.form-chip-remove:hover {
  background: rgba(212, 80, 10, 0.3);
}

/* -- Slider/Range -- */
.form-slider-wrapper input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 0.5rem;
  border-radius: 0.25rem;
  background: transparent;
  cursor: pointer;
}

.form-slider-wrapper input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: white;
  border: 4px solid var(--form-accent);
  box-shadow: 0 2px 8px rgba(212, 80, 10, 0.3);
  cursor: pointer;
  transition: all 0.2s ease;
}

.form-slider-wrapper input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.1);
}

.form-slider-wrapper input[type="range"]::-webkit-slider-thumb:active {
  transform: scale(0.95);
}

.form-slider-wrapper input[type="range"]::-moz-range-thumb {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: white;
  border: 4px solid var(--form-accent);
  box-shadow: 0 2px 8px rgba(212, 80, 10, 0.3);
  cursor: pointer;
}

.form-slider-wrapper input[type="range"]:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px var(--form-accent-light), 0 2px 8px rgba(212, 80, 10, 0.3);
}

/* -- Number Stepper -- */
.form-number-stepper-wrapper input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.form-number-stepper-wrapper input[type="number"]::-webkit-outer-spin-button,
.form-number-stepper-wrapper input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}

/* -- Date Picker -- */
.form-datepicker-calendar {
  background: white;
  border: 2px solid rgba(212, 80, 10, 0.2);
  border-radius: 1rem;
  box-shadow: 0 20px 60px -15px rgba(212, 80, 10, 0.25);
  padding: 1rem;
}

.dark .form-datepicker-calendar {
  background: #2a2a2a;
  border-color: rgba(212, 80, 10, 0.3);
}

.form-datepicker-day {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(0.875rem, 0.875vw + 0.125rem, 1.125rem);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.form-datepicker-day:hover {
  background: var(--form-accent-light);
}

.form-datepicker-day--selected {
  background: linear-gradient(135deg, var(--form-accent) 0%, #B5430A 100%);
  color: white;
}

.form-datepicker-day--today {
  border: 2px solid var(--form-accent);
  color: var(--form-accent);
}

.form-datepicker-day--disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* -- Color Picker -- */
.form-color-swatch {
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 2px solid transparent;
}

.form-color-swatch:hover {
  transform: scale(1.1);
}

.form-color-swatch--selected {
  outline: 2px solid var(--form-accent);
  outline-offset: 2px;
}

/* -- Error Summary -- */
.form-error-summary {
  background: var(--form-error-light);
  border: 2px solid var(--form-error);
  border-radius: 0.75rem;
  padding: 1rem;
  animation: formFloatUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.dark .form-error-summary {
  background: rgba(239, 68, 68, 0.1);
}

/* -- Form Group -- */
.form-group {
  border: none;
  padding: 0;
  margin: 0;
}

.form-group legend {
  font-size: clamp(1.125rem, 1.25vw + 0.125rem, 1.5rem);
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 0.5rem;
  padding: 0;
}

.dark .form-group legend {
  color: rgba(255, 255, 255, 0.9);
}

/* -- Combobox/Autocomplete -- */
.form-combobox-dropdown {
  background: white;
  border: 2px solid rgba(212, 80, 10, 0.2);
  border-radius: 0.75rem;
  box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

.dark .form-combobox-dropdown {
  background: #2a2a2a;
  border-color: rgba(212, 80, 10, 0.3);
}

.form-combobox-option {
  padding: 0.75rem 1rem;
  cursor: pointer;
  transition: background 0.15s ease;
}

.form-combobox-option:hover,
.form-combobox-option--highlighted {
  background: var(--form-accent-light);
}

.form-combobox-option--selected {
  background: rgba(212, 80, 10, 0.1);
  color: var(--form-accent);
  font-weight: 500;
}

/* -- Loading Overlay -- */
.form-loading-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
  z-index: 10;
}

.dark .form-loading-overlay {
  background: rgba(30, 30, 35, 0.7);
}

/* -- Tablet Form Adjustments -- */
@media (min-width: 768px) and (max-width: 1023px) {
  .form-card-premium {
    padding: clamp(1.75rem, 3vw, 2.5rem);
  }
  .form-input-field,
  .form-textarea-field {
    min-height: 54px;
  }
}

/* -- 4K Form Scaling -- */
@media (min-width: 2560px) {
  .form-container-sm {
    max-width: clamp(800px, 40vw, 1100px);
  }
  .form-card-premium {
    padding: clamp(2.5rem, 3vw, 4rem);
  }
}

@media (min-width: 3840px) {
  .form-container-sm {
    max-width: clamp(960px, 35vw, 1400px);
  }
  .form-card-premium {
    padding: clamp(3rem, 3vw, 5rem);
  }
}


/* ================================================================
   11. GALLERY GRID
   ================================================================ */

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(0.75rem, 1.5vw, 1.5rem);
}

/* At very small viewports, force 2 columns so cards don't become full-width */
@media (min-width: 480px) and (max-width: 767px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Cap max columns at ultrawide viewports so cards don't become tiny */
@media (min-width: 3840px) {
  .gallery-grid {
    grid-template-columns: repeat(6, 1fr);
    gap: 1.5rem;
  }
}

@media (min-width: 5120px) {
  .gallery-grid {
    grid-template-columns: repeat(8, 1fr);
    gap: 2rem;
  }
}


/* ================================================================
   12. LAYOUT UTILITIES
   ================================================================ */

.text-center  { text-align: center; }
.text-left    { text-align: left; }
.text-right   { text-align: right; }
.mx-auto      { margin-left: auto; margin-right: auto; }


/* ================================================================
   14. SPACING UTILITIES
   ================================================================ */

/* Margin-bottom */
.mb-0  { margin-bottom: 0; }
.mb-1  { margin-bottom: 0.25rem; }
.mb-2  { margin-bottom: 0.5rem; }
.mb-3  { margin-bottom: 0.75rem; }
.mb-4  { margin-bottom: 1rem; }
.mb-5  { margin-bottom: 1.25rem; }
.mb-6  { margin-bottom: 1.5rem; }
.mb-8  { margin-bottom: 2rem; }
.mb-10 { margin-bottom: 2.5rem; }
.mb-12 { margin-bottom: 3rem; }
.mb-16 { margin-bottom: 4rem; }

/* Margin-top */
.mt-0  { margin-top: 0; }
.mt-1  { margin-top: 0.25rem; }
.mt-2  { margin-top: 0.5rem; }
.mt-3  { margin-top: 0.75rem; }
.mt-4  { margin-top: 1rem; }
.mt-5  { margin-top: 1.25rem; }
.mt-6  { margin-top: 1.5rem; }
.mt-8  { margin-top: 2rem; }
.mt-10 { margin-top: 2.5rem; }
.mt-12 { margin-top: 3rem; }
.mt-16 { margin-top: 4rem; }

/* Padding-y */
.py-0  { padding-top: 0; padding-bottom: 0; }
.py-1  { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-2  { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-3  { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-4  { padding-top: 1rem; padding-bottom: 1rem; }
.py-6  { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-8  { padding-top: 2rem; padding-bottom: 2rem; }
.py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.py-16 { padding-top: 4rem; padding-bottom: 4rem; }
.py-20 { padding-top: 5rem; padding-bottom: 5rem; }

/* Padding-x */
.px-0  { padding-left: 0; padding-right: 0; }
.px-1  { padding-left: 0.25rem; padding-right: 0.25rem; }
.px-2  { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-3  { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-4  { padding-left: 1rem; padding-right: 1rem; }
.px-6  { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-8  { padding-left: 2rem; padding-right: 2rem; }

/* Padding */
.p-0  { padding: 0; }
.p-2  { padding: 0.5rem; }
.p-3  { padding: 0.75rem; }
.p-4  { padding: 1rem; }
.p-6  { padding: 1.5rem; }
.p-8  { padding: 2rem; }


/* ================================================================
   15. FLEXBOX & GRID UTILITIES
   ================================================================ */

.flex          { display: flex; }
.flex-col      { flex-direction: column; }
.flex-row      { flex-direction: row; }
.flex-wrap     { flex-wrap: wrap; }
.flex-1        { flex: 1 1 0%; }
.flex-shrink-0 { flex-shrink: 0; }
.items-center  { align-items: center; }
.items-start   { align-items: flex-start; }
.items-end     { align-items: flex-end; }
.items-stretch { align-items: stretch; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-start   { justify-content: flex-start; }
.justify-end     { justify-content: flex-end; }
.self-center   { align-self: center; }
.self-start    { align-self: flex-start; }

/* Gap */
.gap-0  { gap: 0; }
.gap-1  { gap: 0.25rem; }
.gap-2  { gap: 0.5rem; }
.gap-3  { gap: 0.75rem; }
.gap-4  { gap: 1rem; }
.gap-5  { gap: 1.25rem; }
.gap-6  { gap: 1.5rem; }
.gap-8  { gap: 2rem; }
.gap-10 { gap: 2.5rem; }
.gap-12 { gap: 3rem; }
.gap-16 { gap: 4rem; }

/* Grid */
.grid          { display: grid; }
.grid-cols-1   { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3   { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4   { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-cols-5   { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid-cols-6   { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.col-span-1    { grid-column: span 1 / span 1; }
.col-span-2    { grid-column: span 2 / span 2; }
.col-span-3    { grid-column: span 3 / span 3; }
.col-span-full { grid-column: 1 / -1; }

/* Responsive grid */
@media (min-width: 640px) {
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}


/* ================================================================
   16. SIZING UTILITIES
   ================================================================ */

.w-full      { width: 100%; }
.w-auto      { width: auto; }
.w-1\/2      { width: 50%; }
.h-full      { height: 100%; }
.h-auto      { height: auto; }
.h-screen    { height: 100vh; }
.min-h-screen { min-height: 100vh; }

.max-w-xs    { max-width: 20rem; }
.max-w-sm    { max-width: 24rem; }
.max-w-md    { max-width: 28rem; }
.max-w-lg    { max-width: 32rem; }
.max-w-xl    { max-width: 36rem; }
.max-w-2xl   { max-width: 42rem; }
.max-w-3xl   { max-width: 48rem; }
.max-w-4xl   { max-width: 56rem; }
.max-w-5xl   { max-width: 64rem; }
.max-w-6xl   { max-width: 72rem; }
.max-w-7xl   { max-width: 80rem; }
.max-w-full  { max-width: 100%; }
.max-w-prose { max-width: 65ch; }
.max-w-none  { max-width: none; }


/* ================================================================
   17. BORDER RADIUS UTILITIES
   ================================================================ */

.rounded       { border-radius: 10px; }
.rounded-sm    { border-radius: 6px; }
.rounded-md    { border-radius: 8px; }
.rounded-lg    { border-radius: 16px; }
.rounded-xl    { border-radius: 12px; }
.rounded-2xl   { border-radius: 16px; }
.rounded-3xl   { border-radius: 24px; }
.rounded-full  { border-radius: 9999px; }
.rounded-none  { border-radius: 0; }


/* ================================================================
   18. DISPLAY & VISIBILITY UTILITIES
   ================================================================ */

.hidden        { display: none; }
.block         { display: block; }
.inline        { display: inline; }
.inline-block  { display: inline-block; }
.inline-flex   { display: inline-flex; }
.overflow-hidden  { overflow: hidden; }
.overflow-auto    { overflow: auto; }
.overflow-x-auto  { overflow-x: auto; }
.overflow-y-auto  { overflow-y: auto; }
.relative      { position: relative; }
.absolute      { position: absolute; }
.fixed         { position: fixed; }
.sticky        { position: sticky; }
.inset-0       { inset: 0; }
.top-0         { top: 0; }
.right-0       { right: 0; }
.bottom-0      { bottom: 0; }
.left-0        { left: 0; }
.z-0           { z-index: 0; }
.z-10          { z-index: 10; }
.z-20          { z-index: 20; }
.z-30          { z-index: 30; }
.z-40          { z-index: 40; }
.z-50          { z-index: 50; }


/* ================================================================
   19. TRANSITION & ANIMATION UTILITIES
   ================================================================ */

.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-shadow {
  transition-property: box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.duration-150 { transition-duration: 150ms; }
.duration-200 { transition-duration: 200ms; }
.duration-300 { transition-duration: 300ms; }
.duration-500 { transition-duration: 500ms; }
.duration-700 { transition-duration: 700ms; }
.duration-1000 { transition-duration: 1000ms; }

.ease-in      { transition-timing-function: cubic-bezier(0.4, 0, 1, 1); }
.ease-out     { transition-timing-function: cubic-bezier(0, 0, 0.2, 1); }
.ease-in-out  { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }

/* Animation utilities */
.animate-fade-in-up    { animation: fadeInUp 0.7s ease-out forwards; }
.animate-fade-in-down  { animation: fadeInDown 0.7s ease-out forwards; }
.animate-fade-in-left  { animation: fadeInLeft 0.7s ease-out forwards; }
.animate-fade-in-right { animation: fadeInRight 0.7s ease-out forwards; }
.animate-scale-in      { animation: scaleIn 0.5s ease-out forwards; }
.animate-float         { animation: float 4s ease-in-out infinite; }
.animate-pulse-glow    { animation: pulseGlow 2s ease-in-out infinite; }
.animate-scroll-indicator { animation: scrollIndicator 2s ease-in-out infinite; }
.animate-wiggle        { animation: wiggle 1s ease-in-out infinite; }

/* Animation delay utilities */
.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-500 { animation-delay: 500ms; }
.delay-700 { animation-delay: 700ms; }
.delay-1000 { animation-delay: 1000ms; }


/* ================================================================
   20. OPACITY UTILITIES
   ================================================================ */

.opacity-0   { opacity: 0; }
.opacity-5   { opacity: 0.05; }
.opacity-10  { opacity: 0.1; }
.opacity-20  { opacity: 0.2; }
.opacity-25  { opacity: 0.25; }
.opacity-30  { opacity: 0.3; }
.opacity-40  { opacity: 0.4; }
.opacity-50  { opacity: 0.5; }
.opacity-60  { opacity: 0.6; }
.opacity-70  { opacity: 0.7; }
.opacity-75  { opacity: 0.75; }
.opacity-80  { opacity: 0.8; }
.opacity-90  { opacity: 0.9; }
.opacity-100 { opacity: 1; }


/* ================================================================
   21. SHADOW UTILITIES
   ================================================================ */

.shadow-s          { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); }
.shadow-m          { box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08); }
.shadow-l          { box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12); }
.shadow-orange-sm  { box-shadow: 0 4px 16px rgba(212, 80, 10, 0.3); }
.shadow-orange-md  { box-shadow: 0 6px 24px rgba(212, 80, 10, 0.4); }
.shadow-orange-lg  { box-shadow: 0 8px 32px rgba(212, 80, 10, 0.4); }
.shadow-none       { box-shadow: none; }

/* Standard Tailwind-like shadow aliases */
.shadow      { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1); }
.shadow-sm   { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }
.shadow-md   { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); }
.shadow-lg   { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); }
.shadow-xl   { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); }
.shadow-2xl  { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); }


/* ================================================================
   22. RESPONSIVE DISPLAY UTILITIES
   ================================================================ */

/* Hidden on mobile, shown at breakpoint */
.sm\:block   { display: none; }
.md\:block   { display: none; }
.lg\:block   { display: none; }
.sm\:flex    { display: none; }
.md\:flex    { display: none; }
.lg\:flex    { display: none; }
.sm\:inline-flex { display: none; }
.md\:inline-flex { display: none; }
.lg\:inline-flex { display: none; }

/* Shown on mobile, hidden at breakpoint */
.sm\:hidden  { }
.md\:hidden  { }
.lg\:hidden  { }

@media (min-width: 640px) {
  .sm\:block       { display: block; }
  .sm\:flex        { display: flex; }
  .sm\:inline-flex { display: inline-flex; }
  .sm\:hidden      { display: none; }
  .sm\:flex-row    { flex-direction: row; }
  .sm\:gap-4       { gap: 1rem; }
  .sm\:gap-6       { gap: 1.5rem; }
  .sm\:text-left   { text-align: left; }
  .sm\:text-center { text-align: center; }
}

@media (min-width: 768px) {
  .md\:block       { display: block; }
  .md\:flex        { display: flex; }
  .md\:inline-flex { display: inline-flex; }
  .md\:hidden      { display: none; }
  .md\:flex-row    { flex-direction: row; }
  .md\:flex-col    { flex-direction: column; }
  .md\:items-center   { align-items: center; }
  .md\:justify-between { justify-content: space-between; }
  .md\:gap-4       { gap: 1rem; }
  .md\:gap-6       { gap: 1.5rem; }
  .md\:gap-8       { gap: 2rem; }
  .md\:gap-10      { gap: 2.5rem; }
  .md\:gap-12      { gap: 3rem; }
  .md\:text-left   { text-align: left; }
  .md\:text-center { text-align: center; }
  .md\:px-6        { padding-left: 1.5rem; padding-right: 1.5rem; }
  .md\:px-8        { padding-left: 2rem; padding-right: 2rem; }
  .md\:py-6        { padding-top: 1.5rem; padding-bottom: 1.5rem; }
  .md\:py-8        { padding-top: 2rem; padding-bottom: 2rem; }
  .md\:mb-0        { margin-bottom: 0; }
  .md\:mb-4        { margin-bottom: 1rem; }
  .md\:mb-6        { margin-bottom: 1.5rem; }
  .md\:w-1\/2      { width: 50%; }
  .md\:w-auto      { width: auto; }
  .md\:max-w-none  { max-width: none; }
}

@media (min-width: 1024px) {
  .lg\:block       { display: block; }
  .lg\:flex        { display: flex; }
  .lg\:inline-flex { display: inline-flex; }
  .lg\:hidden      { display: none; }
  .lg\:flex-row    { flex-direction: row; }
  .lg\:flex-col    { flex-direction: column; }
  .lg\:items-center   { align-items: center; }
  .lg\:justify-between { justify-content: space-between; }
  .lg\:gap-4       { gap: 1rem; }
  .lg\:gap-6       { gap: 1.5rem; }
  .lg\:gap-8       { gap: 2rem; }
  .lg\:gap-10      { gap: 2.5rem; }
  .lg\:gap-12      { gap: 3rem; }
  .lg\:gap-16      { gap: 4rem; }
  .lg\:text-left   { text-align: left; }
  .lg\:text-center { text-align: center; }
  .lg\:px-6        { padding-left: 1.5rem; padding-right: 1.5rem; }
  .lg\:px-8        { padding-left: 2rem; padding-right: 2rem; }
  .lg\:py-8        { padding-top: 2rem; padding-bottom: 2rem; }
  .lg\:py-12       { padding-top: 3rem; padding-bottom: 3rem; }
  .lg\:mb-0        { margin-bottom: 0; }
  .lg\:w-1\/2      { width: 50%; }
  .lg\:w-1\/3      { width: 33.333333%; }
  .lg\:w-2\/3      { width: 66.666667%; }
  .lg\:max-w-none  { max-width: none; }
}

@media (min-width: 1280px) {
  .xl\:block       { display: block; }
  .xl\:flex        { display: flex; }
  .xl\:hidden      { display: none; }
  .xl\:gap-8       { gap: 2rem; }
  .xl\:gap-12      { gap: 3rem; }
  .xl\:gap-16      { gap: 4rem; }
  .xl\:px-8        { padding-left: 2rem; padding-right: 2rem; }
  .xl\:px-12       { padding-left: 3rem; padding-right: 3rem; }
}


/* ================================================================
   WORDPRESS-SPECIFIC UTILITIES
   ================================================================ */

/* WordPress alignment classes */
.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.alignleft {
  float: left;
  margin-right: 1.5rem;
  margin-bottom: 1rem;
}

.alignright {
  float: right;
  margin-left: 1.5rem;
  margin-bottom: 1rem;
}

/* WordPress caption */
.wp-caption {
  max-width: 100%;
}

.wp-caption-text {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin-top: 0.5rem;
  text-align: center;
}

/* WordPress gallery */
.gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.gallery-item {
  flex:           1 1 auto;
  border:         1.5px solid var(--color-border);
  border-radius:  var(--radius-lg);
  overflow:       hidden;
  transition:     border-color 0.3s ease;
}
.gallery-item:hover { border-color: var(--color-orange); }

/* WordPress navigation */
.nav-links {
  display: flex;
  justify-content: space-between;
  padding: 2rem 0;
}

/* WordPress comment list */
.comment-list {
  list-style: none;
  padding: 0;
}

/* Screen reader text (WordPress default class) */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.screen-reader-text:focus {
  background-color: #f1f1f1;
  border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  clip: auto !important;
  color: #21759b;
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
}

/* Text color utilities */
.text-orange      { color: #D4500A; }
.text-orange-dark { color: #B5430A; }
.text-white       { color: #ffffff; }
.text-dark        { color: #343434; }
.text-muted       { color: var(--color-text-muted); }
.text-primary     { color: var(--color-text-primary); }
.text-secondary   { color: var(--color-text-secondary); }

/* Font family utilities */
.font-display { font-family: 'Rajdhani', sans-serif; }
.font-body    { font-family: 'Source Sans 3', system-ui, sans-serif; }

/* Font weight utilities */
.font-light    { font-weight: 300; }
.font-normal   { font-weight: 400; }
.font-medium   { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold     { font-weight: 700; }

/* Line height utilities */
.leading-none    { line-height: 1; }
.leading-tight   { line-height: 1.25; }
.leading-snug    { line-height: 1.375; }
.leading-normal  { line-height: 1.5; }
.leading-relaxed { line-height: 1.625; }
.leading-loose   { line-height: 2; }

/* Letter spacing */
.tracking-tight  { letter-spacing: -0.025em; }
.tracking-normal { letter-spacing: 0; }
.tracking-wide   { letter-spacing: 0.025em; }
.tracking-wider  { letter-spacing: 0.05em; }
.tracking-widest { letter-spacing: 0.1em; }

/* Text transform */
.uppercase   { text-transform: uppercase; }
.lowercase   { text-transform: lowercase; }
.capitalize  { text-transform: capitalize; }
.normal-case { text-transform: none; }

/* Text decoration */
.underline    { text-decoration: underline; }
.no-underline { text-decoration: none; }

/* White space / overflow */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.whitespace-nowrap { white-space: nowrap; }
.whitespace-normal { white-space: normal; }

/* Border utilities */
.border     { border: 1px solid var(--color-border); }
.border-0   { border: 0; }
.border-2   { border-width: 2px; }
.border-t   { border-top: 1px solid var(--color-border); }
.border-b   { border-bottom: 1px solid var(--color-border); }
.border-l   { border-left: 1px solid var(--color-border); }
.border-r   { border-right: 1px solid var(--color-border); }

/* Cursor utilities */
.cursor-pointer  { cursor: pointer; }
.cursor-default  { cursor: default; }
.cursor-not-allowed { cursor: not-allowed; }

/* Pointer events */
.pointer-events-none { pointer-events: none; }
.pointer-events-auto { pointer-events: auto; }

/* User select */
.select-none { user-select: none; }
.select-text { user-select: text; }
.select-all  { user-select: all; }

/* Object fit */
.object-cover   { object-fit: cover; }
.object-contain { object-fit: contain; }
.object-center  { object-position: center; }

/* Aspect ratio */
.aspect-square { aspect-ratio: 1 / 1; }
.aspect-video  { aspect-ratio: 16 / 9; }
.aspect-auto   { aspect-ratio: auto; }