/* ==========================================================================
   SERENITY HOMES BY MARK — Stylesheet
   ========================================================================== */

/* --------------------------------------------------------------------------
   CSS Custom Properties
   -------------------------------------------------------------------------- */
:root {
  /* Brand Colors */
  --clr-primary:        #1B3D2F;
  --clr-primary-light:  #2D5C42;
  --clr-primary-dark:   #112618;
  --clr-accent:         #C4A35A;
  --clr-accent-dark:    #A8873F;

  /* Neutrals */
  --clr-bg:             #F8F5F0;
  --clr-bg-alt:         #EDE8DF;
  --clr-surface:        #FFFFFF;
  --clr-border:         #DDD8CE;

  /* Text */
  --clr-text:           #1A1A1A;
  --clr-text-muted:     #6B6560;
  --clr-text-light:     #9E9890;

  /* Feedback */
  --clr-error:          #B03A2E;
  --clr-success:        #1E8449;

  /* Typography */
  --font-heading: 'Playfair Display', Georgia, serif;
  --font-body:    'Lato', system-ui, -apple-system, sans-serif;

  /* Layout */
  --max-width:     1240px;
  --header-height: 80px;

  /* Spacing scale */
  --sp-xs:   0.5rem;    /*  8px */
  --sp-sm:   1rem;      /* 16px */
  --sp-md:   1.5rem;    /* 24px */
  --sp-lg:   2.5rem;    /* 40px */
  --sp-xl:   4rem;      /* 64px */
  --sp-2xl:  6rem;      /* 96px */

  /* Radii */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   16px;
  --r-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 2px 8px  rgba(17, 38, 24, 0.08);
  --shadow-md: 0 4px 24px rgba(17, 38, 24, 0.12);
  --shadow-lg: 0 8px 48px rgba(17, 38, 24, 0.18);

  /* Transitions */
  --t-fast: 0.2s ease;
  --t-base: 0.3s ease;
  --t-slow: 0.55s ease;
}

/* --------------------------------------------------------------------------
   Reset & Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin:     0;
  padding:    0;
}

html {
  scroll-behavior: smooth;
  font-size:       16px;
}

body {
  font-family:             var(--font-body);
  color:                   var(--clr-text);
  background-color:        var(--clr-bg);
  line-height:             1.65;
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.nav-open {
  overflow: hidden;
}

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

a {
  text-decoration: none;
  color:           inherit;
  transition:      color var(--t-fast);
}

ul {
  list-style: none;
}

button {
  cursor:      pointer;
  border:      none;
  background:  none;
  font-family: inherit;
}

address {
  font-style: normal;
}

/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */
.container {
  width:         100%;
  max-width:     var(--max-width);
  margin-inline: auto;
  padding-inline: var(--sp-md);
}

.section-header {
  text-align:    center;
  margin-bottom: var(--sp-xl);
}

.section-eyebrow {
  font-size:      0.75rem;
  font-weight:    700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color:          var(--clr-accent);
  margin-bottom:  var(--sp-xs);
}

.section-title {
  font-family:   var(--font-heading);
  font-size:     clamp(2rem, 4vw, 3rem);
  font-weight:   700;
  color:         var(--clr-primary);
  line-height:   1.2;
  margin-bottom: var(--sp-sm);
}

.section-subtitle {
  font-size:     1.05rem;
  color:         var(--clr-text-muted);
  max-width:     55ch;
  margin-inline: auto;
  line-height:   1.75;
}

/* --------------------------------------------------------------------------
   Scroll-Reveal (fade-in on scroll)
   -------------------------------------------------------------------------- */
.fade-in {
  opacity:    0;
  transform:  translateY(24px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}

.fade-in.visible {
  opacity:   1;
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  display:        inline-flex;
  align-items:    center;
  justify-content: center;
  gap:            0.5rem;
  padding:        0.875rem 2rem;
  font-family:    var(--font-body);
  font-size:      0.9rem;
  font-weight:    700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius:  var(--r-sm);
  transition:     all var(--t-base);
  cursor:         pointer;
  white-space:    nowrap;
}

.btn-primary {
  background-color: var(--clr-accent);
  color:            var(--clr-primary-dark);
  border:           2px solid var(--clr-accent);
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background-color: var(--clr-accent-dark);
  border-color:     var(--clr-accent-dark);
  transform:        translateY(-2px);
  box-shadow:       var(--shadow-md);
}

.btn-outline {
  background-color: transparent;
  color:            var(--clr-surface);
  border:           2px solid rgba(255, 255, 255, 0.75);
}

.btn-outline:hover,
.btn-outline:focus-visible {
  background-color: var(--clr-surface);
  border-color:     var(--clr-surface);
  color:            var(--clr-primary);
  transform:        translateY(-2px);
}

/* --------------------------------------------------------------------------
   HEADER / NAVIGATION
   -------------------------------------------------------------------------- */
.site-header {
  position:          fixed;
  top:               0;
  left:              0;
  right:             0;
  z-index:           1000;
  background-color:  transparent;
  transition:        background-color var(--t-base), box-shadow var(--t-base);
}

.site-header.scrolled {
  background-color: var(--clr-primary);
  box-shadow:       var(--shadow-md);
}

.nav {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  height:          var(--header-height);
  max-width:       var(--max-width);
  margin-inline:   auto;
  padding-inline:  var(--sp-md);
}

/* Logo */
.nav-logo a {
  display:        flex;
  flex-direction: column;
  line-height:    1.15;
  gap:            2px;
}

.logo-text {
  font-family:    var(--font-heading);
  font-size:      1.35rem;
  font-weight:    700;
  color:          var(--clr-surface);
  letter-spacing: 0.02em;
}

.logo-sub {
  font-family:    var(--font-body);
  font-size:      0.7rem;
  font-weight:    400;
  color:          var(--clr-accent);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* Nav Links */
.nav-links {
  display:     flex;
  align-items: center;
  gap:         var(--sp-lg);
}

.nav-link {
  font-size:      0.8rem;
  font-weight:    700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--clr-surface);
  position:       relative;
  padding-bottom: 4px;
}

.nav-link::after {
  content:          '';
  position:         absolute;
  bottom:           0;
  left:             0;
  width:            0;
  height:           2px;
  background-color: var(--clr-accent);
  transition:       width var(--t-base);
}

.nav-link:hover::after,
.nav-link:focus-visible::after {
  width: 100%;
}

/* Hamburger */
.hamburger {
  display:        none;
  flex-direction: column;
  gap:            5px;
  width:          32px;
  padding:        4px 0;
  z-index:        1001;
}

.hamburger-line {
  display:          block;
  height:           2px;
  background-color: var(--clr-surface);
  border-radius:    var(--r-full);
  transition:       transform var(--t-base), opacity var(--t-base);
}

.hamburger.is-open .hamburger-line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.is-open .hamburger-line:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.is-open .hamburger-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */
.hero {
  position:            relative;
  min-height:          100vh;
  display:             flex;
  align-items:         center;
  justify-content:     center;
  text-align:          center;
  /* Replace this URL with your own full-size hero photo */
  background-image:    url('https://picsum.photos/seed/serenityhero/1920/1080');
  background-size:     cover;
  background-position: center;
  background-attachment: fixed;
  padding-top:         var(--header-height);
}

.hero-overlay {
  position:   absolute;
  inset:      0;
  background: linear-gradient(
    to bottom,
    rgba(17, 38, 24, 0.45) 0%,
    rgba(17, 38, 24, 0.65) 55%,
    rgba(17, 38, 24, 0.82) 100%
  );
}

.hero-content {
  position:  relative;
  z-index:   1;
  max-width: 820px;
  padding:   var(--sp-xl) var(--sp-md);
}

.hero-eyebrow {
  font-size:      0.75rem;
  font-weight:    700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color:          var(--clr-accent);
  margin-bottom:  var(--sp-md);
}

.hero-title {
  font-family:   var(--font-heading);
  font-size:     clamp(3.2rem, 7.5vw, 5.75rem);
  font-weight:   700;
  color:         var(--clr-surface);
  line-height:   1.08;
  margin-bottom: var(--sp-md);
  letter-spacing: -0.01em;
}

.hero-subtitle {
  font-size:     clamp(1rem, 2vw, 1.2rem);
  color:         rgba(255, 255, 255, 0.82);
  max-width:     52ch;
  margin-inline: auto;
  margin-bottom: var(--sp-lg);
  line-height:   1.75;
  font-weight:   300;
}

.hero-actions {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--sp-md);
  flex-wrap:       wrap;
}

/* Scroll Indicator */
.scroll-indicator {
  position:  absolute;
  bottom:    var(--sp-lg);
  left:      50%;
  transform: translateX(-50%);
  z-index:   1;
  animation: bounce 2.2s ease-in-out infinite;
}

.scroll-arrow {
  width:        22px;
  height:       22px;
  border-right: 2.5px solid rgba(255, 255, 255, 0.6);
  border-bottom: 2.5px solid rgba(255, 255, 255, 0.6);
  transform:    rotate(45deg);
}

@keyframes bounce {
  0%, 100% { transform: translateX(-50%) translateY(0);    opacity: 0.7; }
  50%       { transform: translateX(-50%) translateY(10px); opacity: 1;   }
}

/* --------------------------------------------------------------------------
   CAROUSEL
   -------------------------------------------------------------------------- */
.carousel-section {
  padding:          var(--sp-2xl) 0;
  background-color: var(--clr-surface);
}

.carousel {
  position:      relative;
  border-radius: var(--r-lg);
  overflow:      hidden;
  box-shadow:    var(--shadow-lg);
}

.carousel-viewport {
  position:         relative;
  width:            100%;
  aspect-ratio:     16 / 7;
  overflow:         hidden;
  background-color: var(--clr-bg-alt);
}

/* Slides */
.carousel-slide {
  position:       absolute;
  inset:          0;
  opacity:        0;
  transition:     opacity var(--t-slow);
  pointer-events: none;
}

.carousel-slide.active {
  opacity:        1;
  pointer-events: auto;
}

.carousel-slide img {
  width:       100%;
  height:      100%;
  object-fit:  cover;
  object-position: center;
}

.slide-caption {
  position:         absolute;
  bottom:           var(--sp-md);
  left:             var(--sp-md);
  background-color: rgba(17, 38, 24, 0.82);
  color:            var(--clr-surface);
  padding:          0.4rem 1rem;
  border-radius:    var(--r-sm);
  font-size:        0.85rem;
  font-weight:      700;
  letter-spacing:   0.06em;
  text-transform:   uppercase;
  backdrop-filter:  blur(6px);
}

/* Nav Buttons */
.carousel-btn {
  position:         absolute;
  top:              50%;
  transform:        translateY(-50%);
  z-index:          10;
  width:            50px;
  height:           50px;
  background-color: rgba(255, 255, 255, 0.92);
  color:            var(--clr-primary);
  border-radius:    50%;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  transition:       all var(--t-base);
  box-shadow:       var(--shadow-sm);
}

.carousel-btn:hover,
.carousel-btn:focus-visible {
  background-color: var(--clr-accent);
  color:            var(--clr-primary-dark);
  box-shadow:       var(--shadow-md);
  transform:        translateY(-50%) scale(1.06);
}

.carousel-btn svg {
  width:  22px;
  height: 22px;
}

.carousel-btn-prev { left:  var(--sp-md); }
.carousel-btn-next { right: var(--sp-md); }

/* Dots */
.carousel-dots {
  position: absolute;
  bottom:   var(--sp-md);
  right:    var(--sp-md);
  display:  flex;
  gap:      8px;
  z-index:  10;
}

.carousel-dot {
  width:            10px;
  height:           10px;
  border-radius:    50%;
  background-color: rgba(255, 255, 255, 0.45);
  border:           2px solid rgba(255, 255, 255, 0.65);
  transition:       all var(--t-base);
  cursor:           pointer;
  padding:          0;
}

.carousel-dot.active {
  background-color: var(--clr-accent);
  border-color:     var(--clr-accent);
  transform:        scale(1.25);
}

.carousel-dot:hover:not(.active) {
  background-color: rgba(255, 255, 255, 0.75);
}

/* --------------------------------------------------------------------------
   FEATURE CARDS
   -------------------------------------------------------------------------- */
.cards-section {
  padding:          var(--sp-2xl) 0;
  background-color: var(--clr-bg);
}

.cards-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   var(--sp-lg);
}

.feature-card {
  display:          flex;
  align-items:      flex-start;
  gap:              var(--sp-md);
  background-color: var(--clr-surface);
  border-radius:    var(--r-lg);
  padding:          var(--sp-lg);
  box-shadow:       var(--shadow-sm);
  border:           1px solid var(--clr-border);
  transition:       transform var(--t-base), box-shadow var(--t-base);
}

.feature-card:hover {
  transform:  translateY(-5px);
  box-shadow: var(--shadow-md);
}

.card-icon-wrapper {
  flex-shrink:      0;
  width:            62px;
  height:           62px;
  background-color: rgba(196, 163, 90, 0.1);
  border-radius:    var(--r-md);
  display:          flex;
  align-items:      center;
  justify-content:  center;
  border:           1px solid rgba(196, 163, 90, 0.25);
}

.card-icon {
  width:  28px;
  height: 28px;
  color:  var(--clr-accent);
  stroke: var(--clr-accent);
}

.card-body {
  flex: 1;
}

.card-title {
  font-family:   var(--font-heading);
  font-size:     1.5rem;
  font-weight:   700;
  color:         var(--clr-primary);
  margin-bottom: var(--sp-sm);
  line-height:   1.25;
}

.card-text {
  color:         var(--clr-text-muted);
  font-size:     0.95rem;
  line-height:   1.8;
  margin-bottom: var(--sp-md);
}

.card-link {
  display:        inline-flex;
  align-items:    center;
  gap:            6px;
  color:          var(--clr-accent);
  font-weight:    700;
  font-size:      0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition:     gap var(--t-fast), color var(--t-fast);
}

.card-link:hover,
.card-link:focus-visible {
  gap:   12px;
  color: var(--clr-accent-dark);
}

.card-link svg {
  width:  16px;
  height: 16px;
}

/* --------------------------------------------------------------------------
   CONTACT
   -------------------------------------------------------------------------- */
.contact-section {
  padding:         var(--sp-2xl) 0;
  background-color: var(--clr-primary);
  position:        relative;
  overflow:        hidden;
}

/* Decorative glow */
.contact-section::before {
  content:          '';
  position:         absolute;
  top:              -30%;
  right:            -8%;
  width:            540px;
  height:           540px;
  background:       radial-gradient(circle, rgba(196, 163, 90, 0.07) 0%, transparent 70%);
  pointer-events:   none;
}

.contact-wrapper {
  display:               grid;
  grid-template-columns: 1fr 1.25fr;
  gap:                   var(--sp-2xl);
  align-items:           start;
}

/* Contact info */
.contact-info .section-eyebrow {
  color: var(--clr-accent);
}

.contact-title {
  color:         var(--clr-surface);
  margin-bottom: var(--sp-md);
}

.contact-description {
  color:         rgba(255, 255, 255, 0.72);
  font-size:     1rem;
  line-height:   1.8;
  margin-bottom: var(--sp-lg);
  max-width:     40ch;
}

.contact-details {
  display:        flex;
  flex-direction: column;
  gap:            var(--sp-md);
}

.contact-detail-item {
  display:     flex;
  align-items: center;
  gap:         var(--sp-sm);
  color:       rgba(255, 255, 255, 0.8);
  font-size:   0.95rem;
}

.contact-detail-item svg {
  width:      20px;
  height:     20px;
  color:      var(--clr-accent);
  flex-shrink: 0;
}

/* Contact form card */
.contact-form-wrapper {
  background-color: var(--clr-surface);
  border-radius:    var(--r-lg);
  padding:          var(--sp-xl);
  box-shadow:       var(--shadow-lg);
}

/* Form rows / groups */
.form-row {
  margin-bottom: var(--sp-md);
}

.form-row-double {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   var(--sp-md);
}

.form-group {
  display:        flex;
  flex-direction: column;
  gap:            var(--sp-xs);
}

.form-label {
  font-size:      0.75rem;
  font-weight:    700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--clr-text);
}

.form-input {
  width:            100%;
  padding:          0.9rem var(--sp-sm);
  font-family:      var(--font-body);
  font-size:        0.95rem;
  color:            var(--clr-text);
  background-color: var(--clr-bg);
  border:           1.5px solid var(--clr-border);
  border-radius:    var(--r-sm);
  transition:       border-color var(--t-fast), box-shadow var(--t-fast), background-color var(--t-fast);
  outline:          none;
  appearance:       none;
  -webkit-appearance: none;
}

.form-input:focus {
  border-color:     var(--clr-accent);
  box-shadow:       0 0 0 3px rgba(196, 163, 90, 0.2);
  background-color: var(--clr-surface);
}

.form-input::placeholder {
  color: var(--clr-text-light);
}

.form-input.has-error {
  border-color: var(--clr-error);
}

.form-input.has-error:focus {
  box-shadow: 0 0 0 3px rgba(176, 58, 46, 0.15);
}

.form-textarea {
  resize:     vertical;
  min-height: 130px;
}

.form-error {
  font-size:  0.78rem;
  color:      var(--clr-error);
  min-height: 1.1em;
  font-weight: 600;
}

/* Form status banner */
.form-status {
  border-radius: var(--r-sm);
  font-size:     0.9rem;
  font-weight:   700;
  overflow:      hidden;
  max-height:    0;
  transition:    max-height var(--t-base), padding var(--t-base), margin var(--t-base);
}

.form-status.success {
  background-color: rgba(30, 132, 73, 0.1);
  color:            var(--clr-success);
  border:           1px solid rgba(30, 132, 73, 0.3);
  padding:          var(--sp-sm) var(--sp-md);
  max-height:       120px;
  margin-bottom:    var(--sp-md);
}

.form-status.error {
  background-color: rgba(176, 58, 46, 0.1);
  color:            var(--clr-error);
  border:           1px solid rgba(176, 58, 46, 0.3);
  padding:          var(--sp-sm) var(--sp-md);
  max-height:       120px;
  margin-bottom:    var(--sp-md);
}

/* Submit button */
.btn-submit {
  width:      100%;
  padding:    1rem 2rem;
  font-size:  1rem;
  margin-top: var(--sp-xs);
}

.btn-submit .btn-icon {
  width:  18px;
  height: 18px;
}

.btn-submit:disabled {
  opacity:   0.65;
  cursor:    not-allowed;
  transform: none;
}

.btn-submit.loading .btn-text::after {
  content: '...';
}

/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */
.site-footer {
  background-color: var(--clr-primary-dark);
  color:            rgba(255, 255, 255, 0.75);
  padding-top:      var(--sp-2xl);
}

.footer-grid {
  display:               grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap:                   var(--sp-xl);
  margin-bottom:         var(--sp-xl);
}

.footer-brand .footer-logo {
  display:        flex;
  flex-direction: column;
  margin-bottom:  var(--sp-md);
  gap:            2px;
}

.footer-tagline {
  font-size:   0.9rem;
  line-height: 1.75;
  color:       rgba(255, 255, 255, 0.55);
  max-width:   30ch;
}

.footer-heading {
  font-size:      0.7rem;
  font-weight:    700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color:          var(--clr-accent);
  margin-bottom:  var(--sp-md);
}

.footer-links {
  display:        flex;
  flex-direction: column;
  gap:            var(--sp-sm);
}

.footer-links a {
  color:       rgba(255, 255, 255, 0.65);
  font-size:   0.9rem;
  transition:  color var(--t-fast);
}

.footer-links a:hover {
  color: var(--clr-accent);
}

.footer-address {
  display:        flex;
  flex-direction: column;
  gap:            var(--sp-sm);
}

.footer-address p {
  font-size: 0.9rem;
  color:     rgba(255, 255, 255, 0.65);
}

.footer-bottom {
  border-top:      1px solid rgba(255, 255, 255, 0.1);
  padding:         var(--sp-md) 0;
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  gap:             var(--sp-sm);
  flex-wrap:       wrap;
}

.footer-bottom p {
  font-size: 0.78rem;
  color:     rgba(255, 255, 255, 0.4);
}

.footer-site {
  color: rgba(196, 163, 90, 0.65) !important;
}

/* --------------------------------------------------------------------------
   ACCESSIBILITY — Focus Visible
   -------------------------------------------------------------------------- */
:focus-visible {
  outline:        2px solid var(--clr-accent);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   RESPONSIVE — Tablet (≤ 1024px)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  :root {
    --sp-2xl: 5rem;
  }

  .contact-wrapper {
    grid-template-columns: 1fr;
    gap:                   var(--sp-xl);
  }

  .contact-description {
    max-width: 100%;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap:                   var(--sp-lg);
  }

  .footer-brand {
    grid-column: 1 / -1;
  }

  .footer-tagline {
    max-width: 100%;
  }
}

/* --------------------------------------------------------------------------
   RESPONSIVE — Mobile (≤ 768px)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  :root {
    --header-height: 68px;
    --sp-2xl:        4rem;
    --sp-xl:         3rem;
  }

  /* Mobile Navigation */
  .hamburger {
    display: flex;
  }

  .nav-links {
    position:         fixed;
    inset:            0;
    flex-direction:   column;
    justify-content:  center;
    gap:              var(--sp-lg);
    background-color: var(--clr-primary);
    transform:        translateX(100%);
    transition:       transform var(--t-base);
    z-index:          999;
  }

  .nav-links.is-open {
    transform: translateX(0);
  }

  .nav-link {
    font-size: 1.4rem;
  }

  /* Hero */
  .hero {
    background-attachment: scroll; /* fix iOS parallax bug */
    min-height:            100svh;
  }

  .hero-actions {
    flex-direction: column;
    align-items:    stretch;
  }

  /* Carousel */
  .carousel-viewport {
    aspect-ratio: 4 / 3;
  }

  .carousel-btn {
    width:  40px;
    height: 40px;
  }

  .carousel-btn svg {
    width:  18px;
    height: 18px;
  }

  /* Cards */
  .cards-grid {
    grid-template-columns: 1fr;
    gap:                   var(--sp-md);
  }

  .feature-card {
    flex-direction: column;
  }

  /* Contact */
  .form-row-double {
    grid-template-columns: 1fr;
  }

  .contact-form-wrapper {
    padding: var(--sp-lg);
  }

  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr;
    gap:                   var(--sp-lg);
    text-align:            center;
  }

  .footer-brand {
    grid-column: auto;
  }

  .footer-brand .footer-logo,
  .footer-tagline {
    align-items: center;
    max-width:   100%;
  }

  .footer-bottom {
    flex-direction: column;
    text-align:     center;
    gap:            var(--sp-xs);
  }
}

/* --------------------------------------------------------------------------
   RESPONSIVE — Small Mobile (≤ 480px)
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  .carousel-viewport {
    aspect-ratio: 1 / 1;
  }

  .contact-form-wrapper {
    padding: var(--sp-md);
  }

  .slide-caption {
    font-size: 0.75rem;
    padding:   0.3rem 0.75rem;
  }
}

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

  .hero {
    background-attachment: scroll;
  }

  .fade-in {
    opacity:   1;
    transform: none;
  }
}