/* ==========================================================================
   Nuvasah Interiors — Base Styles
   Depends on variables.css being loaded first.
   Look: warm sand editorial, frosted-glass panels over photos and soft light,
   quick calm motion. Every animation is switched off for visitors who ask
   their device for reduced motion.
   ========================================================================== */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);
  interpolate-size: allow-keywords; /* lets the FAQ answers slide open */
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-ink);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  line-height: var(--lh-heading);
  font-weight: 500;
  color: var(--color-ink);
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); font-weight: 400; }
h2 { font-size: var(--fs-h2); font-weight: 400; }
h3 { font-size: var(--fs-h3); font-weight: 500; }

p {
  color: var(--color-ink-muted);
}

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

a:hover {
  color: var(--color-accent-hover);
}

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

address {
  font-style: normal;
}

::selection {
  background: var(--color-accent-2);
  color: var(--color-ink);
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: fixed;
  left: var(--space-sm);
  top: -100px;
  z-index: 1000;
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-deep);
  color: var(--color-on-dark);
  border-radius: var(--radius);
}
.skip-link:focus {
  top: var(--space-sm);
  color: var(--color-on-dark);
}

/* Layout */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.container.narrow {
  max-width: calc(760px + 2 * var(--space-md));
}

.section {
  padding: var(--space-xl) 0;
}

.section p + p {
  margin-top: var(--space-sm);
}

.eyebrow {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-sm);
}

.section-title {
  margin-bottom: var(--space-md);
}

.center {
  text-align: center;
}

.narrow-copy {
  max-width: 700px;
}

/* ---------------------------------------------------------------- Glass */
.glass {
  background: var(--glass-light);
  border: 1px solid var(--glass-light-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

.glass-dark {
  background: var(--glass-dark);
  border-color: var(--glass-dark-border);
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color: var(--color-on-dark);
}
.glass-dark h2,
.glass-dark h3 {
  color: var(--color-on-dark);
}
.glass-dark p {
  color: var(--color-on-dark-muted);
}

/* Browsers without frosted glass get solid panels, so text stays readable. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: rgba(255, 255, 255, 0.92); }
  .glass-dark { background: rgba(28, 25, 21, 0.86); }
}

/* Soft light that drifts behind glass cards on sand sections. */
.ambient {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.ambient-orbs {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
}
.ambient-orbs span {
  position: absolute;
  width: min(46vmax, 640px);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  animation: drift 12s ease-in-out infinite alternate;
}
.ambient-orbs span:nth-child(1) {
  top: -8%;
  left: -10%;
  background: radial-gradient(circle, rgba(212, 175, 106, 0.26), transparent 65%);
}
.ambient-orbs span:nth-child(2) {
  top: 30%;
  right: -14%;
  background: radial-gradient(circle, rgba(92, 122, 94, 0.28), transparent 65%);
  animation-duration: 15s;
  animation-delay: -8s;
}
.ambient-orbs span:nth-child(3) {
  bottom: -18%;
  left: 30%;
  background: radial-gradient(circle, rgba(190, 149, 82, 0.16), transparent 65%);
  animation-duration: 14s;
  animation-delay: -14s;
}
@keyframes drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(14%, 12%, 0) scale(1.25); }
}

/* --------------------------------------------------------------- Header */
.scroll-progress {
  display: none;
}

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  border-bottom: 1px solid transparent;
  transition: background var(--transition-base), border-color var(--transition-base),
    box-shadow var(--transition-base);
}

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

.site-header.is-scrolled,
.site-header.nav-open {
  background: rgba(28, 25, 21, 0.8);
  border-bottom-color: var(--glass-dark-border);
  box-shadow: 0 10px 30px -20px rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header.is-scrolled,
  .site-header.nav-open { background: rgba(28, 25, 21, 0.94); }
}

.site-logo {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}
.site-logo img {
  display: block;
  width: auto;
  height: 52px;
  transform-origin: 0 0;
  transition: transform 600ms var(--ease-soft);
}
/* Over the hero the logo sits three times larger, easing back to its bar
   size once the page scrolls or the menu opens. */
.js .site-header:not(.is-scrolled):not(.nav-open) .site-logo img {
  transform: translateY(12px) scale(3);
}

.site-nav {
  display: flex;
  gap: var(--space-md);
  list-style: none;
}

.site-nav a {
  position: relative;
  display: inline-block;
  padding: 6px 0;
  color: var(--color-on-dark);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.35);
}
.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--color-accent-2);
  transform: scaleX(0);
  transition: transform 300ms var(--ease-soft);
}
.site-nav a:hover,
.site-nav a[aria-current="true"] {
  color: var(--color-accent-2);
}
.site-nav a:hover::after,
.site-nav a[aria-current="true"]::after {
  transform: scaleX(1);
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--glass-dark-border);
  border-radius: 50%;
  background: rgba(28, 25, 21, 0.35);
  color: var(--color-on-dark);
  cursor: pointer;
}
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  display: block;
  width: 18px;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 300ms var(--ease-soft), opacity var(--transition-fast);
}
.nav-toggle-bars {
  position: relative;
}
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: "";
  position: absolute;
  left: 0;
}
.nav-toggle-bars::before { transform: translateY(-6px); }
.nav-toggle-bars::after  { transform: translateY(6px); }
.nav-open .nav-toggle-bars { background: transparent; }
.nav-open .nav-toggle-bars::before { transform: rotate(45deg); }
.nav-open .nav-toggle-bars::after  { transform: rotate(-45deg); }

@media (max-width: 900px) {
  :root { --header-height: 66px; }
  .site-logo img { height: 42px; }

  /* Without JavaScript the links simply wrap; with it they fold into a menu. */
  .site-nav { flex-wrap: wrap; gap: var(--space-xs) var(--space-sm); }

  .js .nav-toggle { display: flex; }
  .js .site-nav {
    position: fixed;
    top: calc(var(--header-height) + 8px);
    left: 12px;
    right: 12px;
    flex-direction: column;
    gap: 0;
    padding: var(--space-xs);
    background: rgba(28, 25, 21, 0.94);
    border: 1px solid var(--glass-dark-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.6);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 220ms ease, transform 260ms var(--ease-soft), visibility 0s 260ms;
  }
  .js .nav-open .site-nav {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
  }
  .js .site-nav a {
    display: block;
    padding: 14px 12px;
    font-size: 0.9rem;
  }
  .js .site-nav a::after {
    left: 12px;
    right: auto;
    width: 24px;
    bottom: 8px;
  }
}

/* ----------------------------------------------------------------- Hero */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
  color: var(--color-on-dark);
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: 60% 40%;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(15, 20, 18, 0.55) 0%, rgba(15, 20, 18, 0.1) 26%, rgba(15, 20, 18, 0.2) 50%, rgba(15, 20, 18, 0.8) 100%),
    linear-gradient(90deg, rgba(15, 20, 18, 0.6) 0%, rgba(15, 20, 18, 0.25) 50%, rgba(15, 20, 18, 0) 75%);
}

.hero-content {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-2xl) var(--space-md) calc(var(--space-xl) + 1rem);
}

.hero .eyebrow {
  color: var(--color-accent-2);
}

.hero-title {
  font-size: clamp(2.4rem, 5.4vw, 4.6rem);
  line-height: 1.05;
  color: var(--color-on-dark);
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.25);
}
.hero-title em {
  display: block;
  font-style: italic;
  color: var(--color-champagne);
}

.hero-lead {
  max-width: 520px;
  margin: var(--space-sm) 0 var(--space-md);
  color: var(--color-on-dark-muted);
  font-size: 1.05rem;
}

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: var(--space-md);
  width: 1px;
  height: 56px;
  background: rgba(250, 247, 242, 0.25);
  overflow: hidden;
}
.scroll-cue span {
  position: absolute;
  inset: 0;
  background: var(--color-accent-2);
  animation: cue 2.4s var(--ease-soft) infinite;
}
.scroll-cue::before {
  content: "";
  position: absolute;
  inset: -12px -20px; /* a finger-sized tap area around the thin line */
}
@keyframes cue {
  0%   { transform: translateY(-100%); }
  60%  { transform: translateY(0); }
  100% { transform: translateY(100%); }
}

@media (max-width: 600px), (max-height: 600px) {
  .scroll-cue { display: none; }
}

/* ---------------------------------------------------------------- Intro */
.intro {
  display: grid;
  gap: var(--space-md);
  align-items: start;
}
.intro h2 {
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-accent-2);
}
@media (min-width: 900px) {
  .intro {
    grid-template-columns: 1.1fr 1fr;
    gap: var(--space-lg);
  }
  .intro p {
    padding-top: calc(var(--space-sm) + 0.4rem);
  }
}

/* --------------------------------------------------------- How It Works */
.how-steps {
  display: grid;
  gap: var(--space-md);
  list-style: none;
}
@media (min-width: 700px) {
  .how-steps { grid-template-columns: repeat(2, 1fr); }
  .how-step:last-child { grid-column: 1 / -1; }
}
@media (min-width: 1050px) {
  .how-steps { grid-template-columns: repeat(6, 1fr); }
  .how-step { grid-column: span 2; }
  .how-step:nth-child(n + 4) { grid-column: span 3; }
}
.how-step {
  position: relative;
  padding: var(--space-md);
  overflow: hidden;
}
.how-step-num {
  position: absolute;
  top: 0.4rem;
  right: 1.1rem;
  font-family: var(--font-heading);
  font-size: 3.4rem;
  line-height: 1;
  color: rgba(138, 100, 35, 0.09);
}
.how-step-icon {
  width: 52px;
  height: 52px;
  padding: 12px;
  margin-bottom: var(--space-sm);
  border-radius: 50%;
  color: var(--color-accent);
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--color-line);
}
.how-step-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.how-step-label {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.how-step h3 {
  margin: 0.15rem 0 var(--space-xs);
  font-size: 1.3rem;
}
.how-step-list {
  margin-top: var(--space-xs);
  padding-left: 1.1rem;
}
.how-step-list li {
  color: var(--color-ink-muted);
  margin-bottom: var(--space-xs);
}
.how-step-list li strong {
  color: var(--color-ink);
}

/* ---------------------------------------------------------- Carousel */
.home-carousel {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-bg-alt);
  box-shadow: var(--shadow-lift);
  touch-action: pan-y; /* sideways swipes change the photo, vertical ones scroll */
}

.carousel-track {
  position: relative;
  list-style: none;
  aspect-ratio: 4 / 3;            /* mobile-first: taller crop reads well on phones */
}

.carousel-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  overflow: hidden;
  transition: opacity 900ms ease;
}

/* No-JS fallback: show the first slide until JS marks the carousel ready. */
.home-carousel:not(.is-ready) .carousel-slide:first-child {
  opacity: 1;
}
.home-carousel.is-ready .carousel-slide.is-active {
  opacity: 1;
}

.carousel-slide img,
.carousel-slide video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;                    /* comfortable mobile touch target */
  height: 48px;
  padding: 13px;
  border: 1px solid var(--glass-dark-border);
  border-radius: 50%;
  background: var(--glass-dark);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  color: var(--color-on-dark);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-base), color var(--transition-base), transform 300ms var(--ease-soft);
}
.carousel-btn svg {
  width: 100%;
  height: 100%;
}
.carousel-btn:hover,
.carousel-btn:focus-visible {
  background: var(--color-accent-2);
  color: var(--color-ink);
  transform: translateY(-50%) scale(1.06);
}
.carousel-prev { left: var(--space-sm); }
.carousel-next { right: var(--space-sm); }

.carousel-dots {
  position: absolute;
  bottom: var(--space-sm);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.5rem;
  padding: 8px 12px;
  border-radius: var(--radius-pill);
  background: var(--glass-dark);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
.carousel-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: var(--radius-pill);
  background: rgba(250, 247, 242, 0.55);
  cursor: pointer;
  transition: width 300ms var(--ease-soft), background var(--transition-base);
}
.carousel-dot.is-active {
  width: 26px;
  background: var(--color-accent-2);
}

@media (min-width: 769px) {
  .carousel-track { aspect-ratio: 16 / 9; }   /* wider crop on larger screens */
}

/* ------------------------------------------------ Photo sections */
.photo-band,
.principles,
.contact {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.photo-band-media,
.principles-media,
.contact-media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.photo-band-media img,
.principles-media img,
.contact-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.photo-band::before,
.principles::before,
.contact::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(15, 20, 18, 0.45);
}

.photo-band {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xl) var(--space-md);
  text-align: center;
}
.photo-band-content {
  max-width: 620px;
  padding: var(--space-lg) var(--space-md);
}
.photo-band-content p {
  margin: var(--space-sm) 0 var(--space-md);
}

/* Philosophy principles — dark glass cards over one of her own projects. */
.principles {
  padding: var(--space-xl) 0;
}
.principles::before {
  background: linear-gradient(180deg, rgba(15, 20, 18, 0.55), rgba(15, 20, 18, 0.35));
}
.principles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-md);
}
.principle {
  padding: var(--space-md);
}
.principle h3 {
  position: relative;
  padding-top: var(--space-sm);
  margin-bottom: var(--space-xs);
  font-size: 1.35rem;
  color: var(--color-champagne);
}
.principle h3::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 32px;
  height: 1px;
  background: var(--color-accent-2);
}

/* ---------------------------------------------------------------- About */
.split {
  display: grid;
  gap: var(--space-lg);
  align-items: center;
}
.split-media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lift);
}
.split-media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
@media (min-width: 900px) {
  .split {
    grid-template-columns: 1fr 1fr;
  }
}

/* ------------------------------------------------------------- Services */
#services {
  background: var(--color-bg-alt);
}
.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-lg);
}
.service-card {
  position: relative;
  padding: var(--space-md);
  overflow: hidden;
}
.service-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--space-md);
  right: var(--space-md);
  height: 2px;
  background: var(--color-accent-2);
  transform: scaleX(0.25);
  transform-origin: left;
  transition: transform 450ms var(--ease-soft);
}
.service-card h3 {
  margin-bottom: var(--space-xs);
  font-size: 1.3rem;
}
.service-card:hover::before,
.service-card:focus-within::before,
.service-card.is-focus::before {
  transform: scaleX(1);
}

/* ----------------------------------------------------------- Card focus
   The card you point at (on phones: the one in the middle of the screen)
   grows a little, lifts, and glows gold onto the background around it. */
.how-step,
.service-card,
.principle,
.faq-item {
  position: relative;
  transition: scale 400ms var(--ease-soft), translate 400ms var(--ease-soft),
    box-shadow 400ms ease, border-color 400ms ease, background 400ms ease;
}
.how-step:focus-within,
.service-card:focus-within,
.faq-item:focus-within,
.how-step.is-focus,
.service-card.is-focus,
.principle.is-focus {
  z-index: 2;
  scale: 1.045;
  translate: 0 -6px;
  border-color: rgba(212, 175, 106, 0.45);
  background: rgba(255, 255, 255, 0.74);
  box-shadow:
    0 0 0 1px rgba(212, 175, 106, 0.16),
    0 26px 60px -20px rgba(38, 34, 29, 0.28),
    0 0 50px -12px rgba(212, 175, 106, 0.16);
}
.principle.is-focus {
  background: rgba(28, 25, 21, 0.7);
  box-shadow:
    0 0 0 1px rgba(212, 175, 106, 0.2),
    0 30px 70px -18px rgba(0, 0, 0, 0.6),
    0 0 60px -12px rgba(212, 175, 106, 0.14);
}
.faq-item:focus-within {
  scale: 1.02;
}
@media (hover: hover) {
  .how-step:hover,
  .service-card:hover,
  .principle:hover,
  .faq-item:hover {
    z-index: 2;
    scale: 1.045;
    translate: 0 -6px;
    border-color: rgba(212, 175, 106, 0.45);
    background: rgba(255, 255, 255, 0.74);
    box-shadow:
      0 0 0 1px rgba(212, 175, 106, 0.16),
      0 26px 60px -20px rgba(38, 34, 29, 0.28),
      0 0 50px -12px rgba(212, 175, 106, 0.16);
  }
  .faq-item:hover {
    scale: 1.02;
  }
  .principle:hover {
    background: rgba(28, 25, 21, 0.7);
    box-shadow:
      0 0 0 1px rgba(212, 175, 106, 0.2),
      0 30px 70px -18px rgba(0, 0, 0, 0.6),
      0 0 60px -12px rgba(212, 175, 106, 0.14);
  }
}

/* FAQ — native disclosure, so it works without JavaScript. */
.faq {
  max-width: 760px;
  margin: var(--space-xl) 0 var(--space-lg);
}
.faq-item {
  margin-bottom: var(--space-sm);
  border-radius: 14px;
}
.faq-item summary {
  position: relative;
  padding: 1.1rem 3.2rem 1.1rem 1.4rem;
  font-family: var(--font-heading);
  font-size: 1.1rem;
  color: var(--color-ink);
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item summary::before,
.faq-item summary::after {
  content: "";
  position: absolute;
  right: 1.4rem;
  top: 50%;
  width: 14px;
  height: 1.5px;
  background: var(--color-accent);
  transition: transform 300ms var(--ease-soft);
}
.faq-item summary::after {
  transform: rotate(90deg);
}
.faq-item[open] summary::after {
  transform: rotate(0deg);
}
.faq-body {
  padding: 0 1.4rem 1.2rem;
}
.faq-item::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size 220ms var(--ease-soft), content-visibility 220ms allow-discrete;
}
.faq-item[open]::details-content {
  block-size: auto;
}

/* -------------------------------------------------------------- Process */
.timeline {
  position: relative;
  list-style: none;
  margin: var(--space-md) 0 var(--space-lg);
  padding-left: 2.5rem;
}
.timeline::before,
.timeline::after {
  content: "";
  position: absolute;
  top: 0.5rem;
  bottom: 0.5rem;
  left: 7px;
  width: 1px;
  background: var(--color-line);
}
.timeline::after {
  background: var(--color-accent-2);
  transform-origin: top;
}
.timeline-step {
  position: relative;
  padding-bottom: var(--space-lg);
}
.timeline-step:last-child {
  padding-bottom: 0;
}
.timeline-step::before {
  content: "";
  position: absolute;
  left: calc(-2.5rem + 1px);
  top: 0.3rem;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 1px solid var(--color-accent-2);
  background: var(--color-bg);
  z-index: 1;
  transition: background var(--transition-base), box-shadow var(--transition-base);
}
.timeline-step.is-visible::before,
html:not(.js) .timeline-step::before {
  background: var(--color-accent-2);
  box-shadow: 0 0 0 5px rgba(212, 175, 106, 0.1);
}
.timeline-step h3 {
  margin: 0.15rem 0 var(--space-xs);
}

/* -------------------------------------------------------------- Contact */
.contact::before {
  background: linear-gradient(100deg, rgba(15, 20, 18, 0.82) 0%, rgba(15, 20, 18, 0.6) 55%, rgba(15, 20, 18, 0.35) 100%);
}
.contact-grid {
  display: grid;
  gap: var(--space-lg);
  align-items: start;
}
@media (min-width: 900px) {
  .contact-grid {
    grid-template-columns: 1fr 1.15fr;
  }
}
.contact-copy .eyebrow {
  color: var(--color-accent-2);
}
.contact-copy h2 {
  color: var(--color-on-dark);
}
.contact-copy p {
  max-width: 420px;
  color: var(--color-on-dark-muted);
}
.contact-copy a {
  color: var(--color-accent-2);
}
.contact-copy a:hover {
  color: var(--color-on-dark);
}
.contact-details {
  margin-top: var(--space-md);
  font-size: var(--fs-small);
}
.contact-details p + p {
  margin-top: var(--space-xs);
}
.contact-copy .contact-name {
  color: var(--color-on-dark);
  font-weight: 500;
}

.contact-form {
  padding: var(--space-md);
  background: rgba(250, 247, 242, 0.86);
}
.field {
  margin-bottom: var(--space-sm);
}
.field label {
  display: block;
  margin-bottom: 0.3rem;
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--color-ink);
}
.field-row {
  display: grid;
  gap: 0 var(--space-sm);
}
@media (min-width: 520px) {
  .field-row { grid-template-columns: 1fr 1fr; }
}
.contact-form .btn {
  width: 100%;
  margin-top: var(--space-xs);
}

/* Forms */
input, select, textarea {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--color-line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.85);
  color: var(--color-ink);
  width: 100%;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  background: var(--color-surface);
  box-shadow: 0 0 0 3px rgba(212, 175, 106, 0.2);
}

/* -------------------------------------------------------------- Buttons */
.btn {
  position: relative;
  display: inline-block;
  overflow: hidden;
  padding: var(--space-xs) var(--space-md);
  border: 1px solid var(--color-ink);
  border-radius: var(--radius);
  background: transparent;
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base),
    box-shadow var(--transition-base), translate 300ms var(--ease-soft);
}

.btn:hover {
  background: var(--color-ink);
  color: var(--color-bg);
}

.btn-primary {
  background: var(--color-accent-2);
  border-color: var(--color-accent-2);
  color: var(--color-ink);
  border-radius: var(--radius-pill);
  padding: var(--space-sm) var(--space-lg);
  font-weight: 600;
}

/* A soft sheen passes across the button on hover. */
.btn-primary::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: skewX(-20deg);
  transition: left 0s;
}

.btn-primary:hover {
  background: var(--color-accent-2-hover);
  border-color: var(--color-accent-2-hover);
  color: var(--color-ink);
  translate: 0 -2px;
  box-shadow: 0 12px 28px -14px rgba(38, 34, 29, 0.35);
}
.btn-primary:hover::after {
  left: 130%;
  transition: left 700ms var(--ease-soft);
}

/* --------------------------------------------------------------- Footer */
.site-footer {
  padding: var(--space-lg) 0;
  background: var(--color-deep);
  color: var(--color-on-dark-muted);
  font-size: var(--fs-small);
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
}
.site-footer p {
  color: var(--color-on-dark-muted);
}
.site-footer a {
  color: var(--color-accent-2);
}
.site-footer a:hover {
  color: var(--color-on-dark);
}
.footer-links {
  margin-top: var(--space-xs);
}
.footer-logo img {
  height: 60px;
}

/* Floating WhatsApp button — fixed bottom-right, above all content. Uses the
   universal WhatsApp brand green (a recognizable affordance), not the site palette. */
.whatsapp-float {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  z-index: 999;
  transition: transform var(--transition-fast), background var(--transition-fast);
}
.whatsapp-float:hover,
.whatsapp-float:focus-visible {
  background: #1da851;
  color: #fff;
  transform: scale(1.06);
  outline: none;
}
.whatsapp-float svg {
  width: 30px;
  height: 30px;
  display: block;
}
@media (max-width: 768px) {
  .whatsapp-float {
    right: 16px;
    bottom: 16px;
    width: 52px;
    height: 52px;
  }
  .whatsapp-float svg {
    width: 27px;
    height: 27px;
  }
}

/* Responsive */
@media (max-width: 768px) {
  .section {
    padding: var(--space-lg) 0;
  }
  .container {
    padding-left: var(--space-sm);
    padding-right: var(--space-sm);
  }
  .hero-content {
    padding-left: var(--space-sm);
    padding-right: var(--space-sm);
  }
  .how-step,
  .service-card,
  .principle,
  .contact-form {
    padding: var(--space-md) var(--space-sm);
  }
  .photo-band-content {
    padding: var(--space-md) var(--space-sm);
  }
}

/* =================================================================
   Motion — only for visitors whose device allows it.
   ================================================================= */
@media (prefers-reduced-motion: no-preference) {

  /* Hero: the photo breathes slowly; the headline rises in word by word. */
  .hero-media img {
    animation: hero-breathe 17s ease-in-out infinite alternate;
    /* Begin a little into the cycle, where the slow ease-in has already picked
       up speed, so the photo is visibly moving within the first second. */
    animation-delay: -3s;
  }
  .js .hero-rise {
    animation: rise var(--reveal-duration) var(--ease-reveal) both;
    animation-delay: calc(var(--d, 0ms) + 90ms);
  }
  .js .hero-title:not(.is-split) {
    opacity: 0;
  }
  .js .hero-title .w {
    display: inline-block;
    animation: rise 860ms var(--ease-reveal) both;
    animation-delay: calc(190ms + var(--i) * 80ms);
  }

  /* Every photo behind text keeps drifting slowly, so no background sits still. */
  .principles-media,
  .contact-media {
    animation: slow-zoom 18s ease-in-out infinite alternate;
  }
  /* The TV wall is centred behind the card, so it grows in place instead of drifting. */
  .photo-band-media {
    animation: slow-zoom-centred 18s ease-in-out infinite alternate;
  }
  .split-media img {
    animation: slow-zoom 15s ease-in-out infinite alternate;
  }

  /* The active carousel photo drifts in slowly; a transition (not an animation)
     so the outgoing photo eases back instead of snapping while it fades. */
  .carousel-slide img {
    transition: transform 7s ease-out;
  }
  .carousel-slide.is-active img {
    transform: scale(1.07);
  }

  /* Scroll reveals: main.js toggles .is-visible both ways as things
     enter and leave the screen. */
  .js [data-reveal] {
    opacity: 0;
    transform: translateY(44px);
    filter: blur(8px);
    transition:
      opacity var(--reveal-duration) var(--ease-reveal) var(--d, 0ms),
      transform var(--reveal-duration) var(--ease-reveal) var(--d, 0ms),
      filter var(--reveal-duration) var(--ease-reveal) var(--d, 0ms),
      clip-path 525ms var(--ease-soft) var(--d, 0ms),
      scale 400ms var(--ease-soft),
      translate 400ms var(--ease-soft),
      box-shadow 400ms ease,
      border-color 400ms ease,
      background 400ms ease;
  }
  /* Blurring a glass panel would stop its own frosting, so glass only fades and rises. */
  .js .glass[data-reveal],
  .js .home-carousel[data-reveal] {
    filter: none;
  }
  .js [data-reveal="image"] {
    transform: scale(1.06);
    filter: none;
    clip-path: inset(10% 6% 10% 6% round var(--radius-lg));
  }
  .js [data-reveal].is-visible {
    opacity: 1;
    transform: none;
    filter: none;
  }
  .js [data-reveal="image"].is-visible {
    clip-path: inset(0 round var(--radius-lg));
  }

  /* Headings: the heading stays put and its words rise one after another. */
  .js [data-reveal][data-split] {
    opacity: 1;
    transform: none;
    filter: none;
  }
  .js [data-split][data-reveal] .w {
    display: inline-block;
    opacity: 0;
    transform: translateY(0.6em);
    filter: blur(6px);
    transition:
      opacity 750ms var(--ease-reveal) calc(var(--d, 0ms) + var(--i) * 64ms),
      transform 750ms var(--ease-reveal) calc(var(--d, 0ms) + var(--i) * 64ms),
      filter 750ms var(--ease-reveal) calc(var(--d, 0ms) + var(--i) * 64ms);
  }
  .js [data-split].is-visible .w {
    opacity: 1;
    transform: none;
    filter: none;
  }

  /* Inside a glass card, each line follows the card in, one after another. */
  .js .glass[data-reveal] > * {
    opacity: 0;
    transform: translateY(18px);
    transition:
      opacity 675ms var(--ease-reveal) calc(var(--d, 0ms) + 165ms + var(--c, 0) * 98ms),
      transform 675ms var(--ease-reveal) calc(var(--d, 0ms) + 165ms + var(--c, 0) * 98ms),
      translate 300ms var(--ease-soft),
      background var(--transition-base),
      color var(--transition-base),
      border-color var(--transition-base),
      box-shadow var(--transition-base);
  }
  .js .glass[data-reveal].is-visible > * {
    opacity: 1;
    transform: none;
  }

  /* FAQ answers skip that cascade: they only show when opened, and should
     arrive at once with a short fade, not wait their turn. */
  .js .faq-item[data-reveal] > .faq-body {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .faq-item[open] > .faq-body {
    animation: faq-in 240ms ease-out both;
  }

  /* Scroll-linked extras, where the browser supports them. */
  @supports (animation-timeline: scroll()) {
    .scroll-progress {
      display: block;
      position: fixed;
      inset: 0 0 auto;
      height: 2px;
      z-index: 101;
      background: var(--color-accent-2);
      opacity: 0.6;
      transform-origin: left;
      animation: grow-x linear both;
      animation-timeline: scroll(root);
    }

    .photo-band-media img,
    .principles-media img,
    .contact-media img {
      scale: 1.18;
      animation: parallax linear both;
      animation-timeline: view();
    }

    .hero-media {
      animation: hero-drift linear both;
      animation-timeline: view();
      animation-range: exit;
    }

    .timeline {
      view-timeline: --timeline;
    }
    .timeline::after {
      animation: grow-y linear both;
      animation-timeline: --timeline;
      animation-range: cover 15% cover 65%;
    }
  }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(22px); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: none; }
}
@keyframes faq-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
@keyframes hero-breathe {
  from { transform: scale(1.15); }
  to   { transform: scale(1); }
}
@keyframes slow-zoom {
  from { transform: scale(1) translate(0, 0); }
  to   { transform: scale(1.12) translate(-2%, -1.5%); }
}
@keyframes slow-zoom-centred {
  from { transform: scale(1); }
  to   { transform: scale(1.08); }
}
@keyframes hero-drift {
  to { transform: translateY(18%); }
}
@keyframes parallax {
  from { translate: 0 -7%; }
  to   { translate: 0 7%; }
}
@keyframes grow-x {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes grow-y {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .carousel-slide,
  .site-logo img { transition: none; }
  .ambient-orbs span,
  .scroll-cue span { animation: none; }
}