/* Front page only: hero video + wordmark, videos grid, about/expertise,
   stats counters, services + accordion, contact closer. */

/* ===== Hero: full-bleed video with oversized wordmark ===== */
.hero-video {
  position: relative;
  min-height: 100vh;
  display: flex; flex-direction: column;
  overflow: hidden;
  background: var(--surface-hero);
}
.hero-video-media { position: absolute; inset: 0; z-index: 0; }
.hero-video-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-video-media::after {
  content: ""; position: absolute; inset: 0;
  background: #000; opacity: .4;
}
.hero-video-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, #00000070 0%, #00000000 32%, #00000000 55%, #000000a6 100%);
}

.hero-video-wordmark {
  position: relative; z-index: 1;
  flex: 0.8;
  display: flex; align-items: flex-end;
  padding-top: calc(var(--layout-header) + var(--space-8));
}
.hero-video-wordmark-inner { width: 100%; }

/* Slice reveal: the word is duplicated into strips, each clipped to its
   own row via clip-path, then slid in alternately from opposite sides. */
.word-slice { position: relative; display: inline-block; }
.word-slice .slice-sizer,
.word-slice .slice-strip {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(72px, 15vw, 220px); line-height: 0.9; letter-spacing: -0.01em;
  color: #fff; white-space: nowrap;
}
.word-slice .slice-sizer { visibility: hidden; }
.word-slice .slice-strip { position: absolute; inset: 0; }

.word-slice-horizontal .slice-strip:nth-child(2) { clip-path: inset(0 0 83.334% 0); }
.word-slice-horizontal .slice-strip:nth-child(3) { clip-path: inset(16.667% 0 66.667% 0); }
.word-slice-horizontal .slice-strip:nth-child(4) { clip-path: inset(33.333% 0 50% 0); }
.word-slice-horizontal .slice-strip:nth-child(5) { clip-path: inset(50% 0 33.333% 0); }
.word-slice-horizontal .slice-strip:nth-child(6) { clip-path: inset(66.667% 0 16.667% 0); }
.word-slice-horizontal .slice-strip:nth-child(7) { clip-path: inset(83.334% 0 0 0); }

@media (prefers-reduced-motion: no-preference) {
  .slice-strip {
    opacity: 0;
    animation-duration: .7s;
    animation-timing-function: cubic-bezier(.22,.61,.36,1);
    animation-fill-mode: both;
  }
  .slice-strip.slice-from-left   { animation-name: sliceFromLeft; }
  .slice-strip.slice-from-right  { animation-name: sliceFromRight; }

  @keyframes sliceFromLeft {
    from { opacity: 0; transform: translateX(-60%); }
    to   { opacity: 1; transform: translateX(0); }
  }
  @keyframes sliceFromRight {
    from { opacity: 0; transform: translateX(60%); }
    to   { opacity: 1; transform: translateX(0); }
  }

  .slice-delay-1 { animation-delay: 1s; }
  .slice-delay-2 { animation-delay: 1.08s; }
  .slice-delay-3 { animation-delay: 1.16s; }
  .slice-delay-4 { animation-delay: 1.24s; }
  .slice-delay-5 { animation-delay: 1.32s; }
  .slice-delay-6 { animation-delay: 1.4s; }

  .word-slice { animation: heroFloat 5s ease-in-out infinite 2.2s; }
}

.hero-video-bottom {
  position: relative; z-index: 1;
  display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap;
  gap: var(--space-6);
  padding-top: var(--space-3);
  padding-bottom: var(--space-12);
}
.hero-video-tagline {
  color: #fff; max-width: 560px; margin-left: 24px;
  font-family: var(--font-body); font-size: 26px; line-height: 1.4; font-weight: 500;
}
.hero-video-ctas { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-left: auto; }

@media (prefers-reduced-motion: no-preference) {
  .hero-video-bottom .delay-1 { animation-delay: 1.8s; }
  .hero-video-bottom .delay-2 { animation-delay: 2.1s; }
  .hero-video-bottom .delay-3 { animation-delay: 2.3s; }

  .hero-video-bottom .hero-video-tagline.in-view {
    animation-name: slideInRight, heroFloat;
    animation-duration: .7s, 4s;
    animation-timing-function: cubic-bezier(.22,.61,.36,1), ease-in-out;
    animation-delay: 1.8s, 2.6s;
    animation-iteration-count: 1, infinite;
    animation-fill-mode: both, none;
  }
  .hero-video-bottom .hero-video-cta.delay-2.in-view {
    animation-name: slideInRight, heroFloat;
    animation-duration: .7s, 4.4s;
    animation-timing-function: cubic-bezier(.22,.61,.36,1), ease-in-out;
    animation-delay: 2.1s, 2.9s;
    animation-iteration-count: 1, infinite;
    animation-fill-mode: both, none;
  }
  .hero-video-bottom .hero-video-cta.delay-3.in-view {
    animation-name: slideInRight, heroFloat;
    animation-duration: .7s, 4.2s;
    animation-timing-function: cubic-bezier(.22,.61,.36,1), ease-in-out;
    animation-delay: 2.3s, 3.1s;
    animation-iteration-count: 1, infinite;
    animation-fill-mode: both, none;
  }
}
.hero-video-cta {
  display: inline-flex; align-items: center; gap: 14px; flex-shrink: 0;
  background: var(--gold); color: var(--on-banner);
  border-radius: var(--radius-full);
  padding: 8px 8px 8px 26px;
  transition: background-color .2s;
}
.hero-video-cta:hover { background: var(--gold-hover); }
.hero-video-cta span:first-child { font-family: var(--font-body); font-size: 15px; font-weight: 600; letter-spacing: 0.02em; }
.hero-video-cta-arrow {
  width: 38px; height: 38px; border-radius: 50%;
  background: #fff; color: var(--gold);
  display: flex; align-items: center; justify-content: center; font-size: 14px;
}
.hero-video-cta-whatsapp { background: #25d366; color: #fff; }
.hero-video-cta-whatsapp:hover { background: #1ebe57; }
.hero-video-cta-whatsapp .hero-video-cta-arrow { color: #25d366; }

@media (max-width: 640px) {
  .hero-video-wordmark span { font-size: clamp(52px, 20vw, 120px); }
  .hero-video-bottom { flex-direction: column; align-items: center; }
  .hero-video-tagline { font-size: 20px; margin-left: 0; text-align: center; }
  .hero-video-ctas { margin-left: 0; align-self: center; flex-direction: column; width: 100%; }
  .hero-video-cta { justify-content: center; width: 100%; }
}

/* ===== Videos (social proof) ===== */
.video-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6);
}
.video-card { display: block; }
.video-thumb { position: relative; border-radius: var(--radius-2xl); overflow: hidden; aspect-ratio: 16/9; }
.video-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.video-card:hover .video-thumb img { transform: scale(1.05); }
.play-btn {
  position: absolute; inset: 0; margin: auto; width: 56px; height: 56px;
  background: var(--gold); color: var(--on-gold); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 18px;
  transition: background-color .2s;
}
.video-card:hover .play-btn { background: var(--gold-hover); }
.video-title {
  margin-top: var(--space-3); font-size: 14px; font-weight: 600; color: var(--text-body); line-height: 1.4;
  min-height: calc(1.4em * 2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.video-card-cta { display: block; }
.video-card-cta-inner {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  border: 1px dashed var(--border-subtle); color: var(--gold-text); font-weight: 600;
  transition: border-color .2s, color .2s;
}
.video-card-cta-inner i { font-size: 28px; }
.video-card-cta:hover .video-card-cta-inner { border-color: var(--gold); color: var(--gold-hover); }

@media (max-width: 900px) { .video-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .video-grid { grid-template-columns: 1fr; } }

/* ===== About / expertise ===== */
.about-grid {
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-16); align-items: center;
}
.about-sub { margin: var(--space-4) 0 var(--space-8); max-width: 480px; }
.feature-list { display: flex; flex-direction: column; gap: var(--space-6); margin-bottom: var(--space-8); }
.feature-item { display: flex; gap: var(--space-3); }
.feature-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); margin-top: 8px; flex-shrink: 0; }
.feature-title { font-size: 14px; font-weight: 700; color: var(--text-body); margin-bottom: 4px; }
.feature-desc { font-size: 13px; color: var(--text-body); line-height: 1.6; }
.about-image img { border-radius: var(--radius-3xl); width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/5; }

@media (max-width: 900px) {
  .about-grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .about-image { order: -1; }
  .about-image img { aspect-ratio: 16/9; }
}

/* ===== Stats ===== */
.stats-section { background: var(--surface-dark); }
.stats-heading { color: var(--text-on-dark); max-width: 760px; margin-bottom: var(--space-12); }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
.stat { text-align: left; border-left: 1px solid var(--border-on-dark); padding-left: var(--space-4); }
.stat-number { font-family: var(--font-heading); font-size: 48px; font-weight: 800; color: var(--gold); line-height: 1; }
.stat-label { margin-top: 8px; color: var(--text-on-dark-muted); font-size: 13px; }

@media (max-width: 760px) { .stats-grid { grid-template-columns: repeat(2, 1fr); row-gap: var(--space-8); } }

/* ===== Services + accordion ===== */
.services-section .section-title { max-width: 820px; margin: var(--space-4) 0 var(--space-12); }
.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: var(--space-16); }
.service-card { background: var(--surface-dark); border-radius: var(--radius-3xl); padding: 28px 24px 32px; }
.service-icon {
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border-gold);
  display: flex; align-items: center; justify-content: center; color: var(--gold); font-size: 16px;
  margin-bottom: 40px;
}
.service-title { color: var(--gold); font-size: 14px; margin-bottom: var(--space-2); }
.service-card .body-sm { color: var(--text-on-dark); }

@media (max-width: 900px) { .service-grid { grid-template-columns: 1fr; } }

.accordion-heading { color: var(--text-body); margin-bottom: var(--space-4); }
.accordion-item { border-bottom: 1px solid var(--border-subtle); }
.accordion-item-last { border-bottom: 1px solid var(--border-gold-hairline); }
.accordion-row {
  width: 100%; background: none; border: none; display: flex; align-items: center; gap: var(--space-3);
  padding: 31px 0; text-align: left;
}
.accordion-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); flex-shrink: 0; }
.accordion-title { flex: 1; }
.accordion-toggle {
  width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--text-body); color: var(--text-body);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background-color .2s, border-color .2s, color .2s;
}
.accordion-panel {
  max-height: 0; overflow: hidden; transition: max-height .3s ease;
  padding-left: calc(8px + var(--space-3));
}
.accordion-panel p { padding-bottom: 0; max-width: 680px; }
.accordion-item[data-open="true"] .accordion-panel { max-height: 300px; }
.accordion-item[data-open="true"] .accordion-row { padding-bottom: 16px; }
.accordion-item[data-open="true"] .accordion-panel { padding-bottom: 40px; }
.accordion-item[data-open="true"] .accordion-toggle {
  background: var(--gold); border-color: var(--gold); color: var(--on-gold);
}
.accordion-btn { margin-top: 56px; }

/* ===== Contact / closer ===== */
.contact-card {
  background: var(--gold); border-radius: var(--radius-3xl); overflow: hidden;
  display: grid; grid-template-columns: 1.1fr 0.9fr; align-items: stretch;
}
.contact-form-wrap { position: relative; padding: 48px 40px; overflow: hidden; }
.contact-form-wrap::before {
  content: "";
  position: absolute; bottom: -10%; left: -10%;
  width: 65%; max-width: 480px; aspect-ratio: 1300/850;
  background: var(--simco-world-map-url) no-repeat 10% 35% / contain;
  opacity: .16; pointer-events: none;
  animation: world-map-drift 26s linear infinite alternate;
}
.contact-form-wrap > * { position: relative; }
.contact-heading { color: var(--on-banner); margin: var(--space-3) 0 var(--space-8); max-width: 480px; }
.contact-card .eyebrow { color: var(--on-banner); }

.contact-form { display: flex; flex-direction: column; gap: 28px; max-width: 480px; }
.form-field { display: flex; flex-direction: column; gap: 10px; }
.form-field label { font-size: 11px; font-weight: 600; color: var(--on-banner); }
.form-field input {
  background: transparent; border: none; border-bottom: 1px solid rgba(255,255,255,.55);
  padding: 4px 0 10px; font-size: 14px; color: var(--on-banner); font-family: var(--font-body);
}
.form-field input::placeholder { color: rgba(255,255,255,.6); }
.form-field input:focus { outline: none; border-bottom: 2px solid var(--on-banner); }
.btn-submit { align-self: flex-start; margin-top: 8px; }
.form-success { color: var(--on-banner); font-weight: 600; font-size: 13px; }

.contact-side { position: relative; min-height: 320px; }
.contact-side img { width: 100%; height: 100%; object-fit: cover; }
.contact-info {
  position: absolute; left: 0; right: 0; bottom: 0; padding: var(--space-6);
  background: linear-gradient(180deg, transparent, rgba(11,11,11,.85));
  display: flex; flex-direction: column; gap: 10px;
}
.contact-info a { color: var(--text-on-dark); font-size: 13px; display: flex; align-items: center; gap: 8px; }
.contact-info i { color: var(--gold); width: 16px; }

@media (max-width: 900px) {
  .contact-card { grid-template-columns: 1fr; }
  .contact-side { min-height: 240px; }
}
@media (max-width: 560px) {
  .contact-form-wrap { padding: 32px 24px; }
}