/* ══════════════════════════════════════
   SHARED  —  cross-page component styles
   ══════════════════════════════════════ */

/* ────────────────────────────────────
   REVEAL LINE  (about scroll-fade)
   ──────────────────────────────────── */
.reveal-line {
  display: block;
  opacity: 0.3;
  transform: translateY(30px);
}
.reveal-line + .reveal-line { margin-top: 24px; }

/* ────────────────────────────────────
   CIRCLE BUTTON  (ripple)
   ──────────────────────────────────── */
.circle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.12);
  color: #fff;
  font-family: var(--ff-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.6;
  cursor: pointer;
  margin: 36px auto 32px;
  position: relative;
  transition: border-color 0.3s ease, transform 0.3s ease;
}
.circle-btn:hover {
  border-color: rgba(255,255,255,0.45);
  transform: scale(1.04);
  background: rgba(255,255,255,0.08);
}

.circle-btn-ring {
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.35);
  pointer-events: none;
  animation: ripple-out 2s ease-out infinite;
}
.circle-btn-ring::before,
.circle-btn-ring::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.35);
  animation: ripple-out 2s ease-out infinite;
}
.circle-btn-ring::before { animation-delay: 0.67s; }
.circle-btn-ring::after  { animation-delay: 1.33s; }

@keyframes ripple-out {
  0%   { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(3.2); opacity: 0; }
}

@keyframes ringSpin {
  to { transform: rotate(360deg); }
}

/* ────────────────────────────────────
   CHAR PULSE  (hero headings)
   ──────────────────────────────────── */
.char-pulse {
  display: inline-block;
  animation: charPulse 1.5s cubic-bezier(0.25,0.46,0.45,0.94) both;
  animation-play-state: paused;
}
.animate .char-pulse {
  animation-play-state: running;
  animation-iteration-count: infinite;
  animation-delay: calc(var(--i) * 200ms);
}

@keyframes charPulse {
  0%   { transform: scaleX(1); opacity: 1; }
  15%  { transform: scaleX(0.7); opacity: 0.5; }
  100% { transform: scaleX(1); opacity: 1; }
}

/* ────────────────────────────────────
   SERVICES  (3 rows — home + concierge)
   ──────────────────────────────────── */
.services-section { border-bottom: 1px solid var(--border); }

.service-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 800px;
  border-bottom: 1px solid var(--border);
  padding: 100px 0;
}
.service-row:last-child { border-bottom: none; }

.service-row-flip { direction: rtl; }
.service-row-flip > * { direction: ltr; }

.service-images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  overflow: hidden;
  min-height: 500px;
}

.grow-img { position: relative; overflow: hidden; transition: transform 0.15s ease-out; }

.grow-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: background-position 0.08s ease-out;
}

.service-info {
  padding: 72px 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-left: 1px solid var(--border);
}
.service-row-flip .service-info {
  border-left: none;
  border-right: 1px solid var(--border);
}
.service-info .subtitle      { margin-bottom: 0; }
.service-info .heading       { font-size: clamp(28px, 3vw, 40px); margin-top: 14px; }
.service-info .body-display  { font-size: 16px; max-width: 420px; margin-bottom: 28px; }

@media (max-width: 1024px) {
  .service-row {
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 72px 0;
  }

  .service-row-flip {
    direction: ltr;
  }

  .service-images {
    order: 1;
    aspect-ratio: 16 / 10;
    min-height: 360px;
  }

  .service-info {
    order: 2;
    padding: 48px 40px 0;
    border-left: none;
    border-right: none;
    border-top: 1px solid var(--border);
  }

  .service-row-flip .service-info {
    border-right: none;
  }
}

@media (max-width: 768px) {
  .service-row {
    padding: 56px 0;
  }

  .service-images {
    min-height: 0;
    aspect-ratio: 1 / 1;
    gap: 8px;
  }

  .service-info {
    padding: 36px 24px 0;
  }

  .service-info .heading {
    font-size: clamp(28px, 9vw, 38px);
    margin-bottom: 18px;
  }

  .service-info .body-display {
    max-width: none;
    font-size: 15px;
    line-height: 1.65;
    margin-bottom: 0;
  }
}

/* ────────────────────────────────────
   CONTACT INNER  (shared section)
   ──────────────────────────────────── */
.section-contact-inner {
  position: relative;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.contact-deco {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  pointer-events: none;
}

.contact-triangle {
  border-style: none none solid solid;
  border-width: 1px;
  border-color: rgba(255,255,255,0.06);
  min-width: 500px;
  min-height: 500px;
  transform: rotate(45deg);
  position: absolute;
  bottom: -200px;
  left: -200px;
}

.contact-triangle-right {
  border-style: solid solid none none;
  left: auto;
  right: -200px;
  bottom: auto;
  top: -200px;
}

.contact-inner-bg {
  position: absolute;
  inset: 0;
  background-image: url('../assets/images/shared/contact-cta/contact-inner-bg.jpg');
  background-size: cover;
  background-position: center;
  z-index: 0;
}
.contact-inner-overlay {
  position: absolute;
  inset: 0;
  background: rgba(4,6,10,0.72);
  z-index: 1;
}

.contact-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 680px;
  margin: 0 auto;
}
.contact-body .subtitle    { margin-bottom: 22px; }
.contact-body .body-display { margin: 24px 0 40px; }

.contact-body > .reveal:nth-child(1) { transition-delay: 0s; }
.contact-body > .reveal:nth-child(2) { transition-delay: 80ms; }
.contact-body > .reveal:nth-child(3) { transition-delay: 160ms; }
.contact-body > .reveal:nth-child(4) { transition-delay: 240ms; }