/* Reserve header clearance in CSS, before fonts, images or JavaScript arrive. */
.hero { padding-top: clamp(6rem, 12vh, 9rem); }
.hero .hero-content { margin-top: 24px; }
.inner-page { padding-top: calc(clamp(6rem, 12vh, 9rem) + 24px); }
html { scrollbar-gutter: stable; }
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped, html:has(dialog[open]) { overflow: hidden; }
.lenis.lenis-scrolling iframe { pointer-events: none; }

.method-step { opacity: 1; transform: none; transition: none !important; }
.brand-seal { display: block; width: 128px; height: 128px; margin-block: 26px; color: var(--forest); flex-shrink: 0; }
.brand-seal text { fill: currentColor; }
.seal-ring { transform-origin: 64px 64px; font: 9px var(--sans); letter-spacing: 1.6px; }
.seal-monogram { font: 36px var(--serif); letter-spacing: -3px; }
.site-footer .brand-seal { color: var(--sand); width: 108px; height: 108px; margin-bottom: 0; }
.floating-tools {
  position: fixed; right: max(20px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 10px; z-index: 40;
}
.floating-tools .motion-toggle {
  min-height: 42px; width: 164px; padding: 10px 15px; border-radius: 9999px;
  background: rgba(255, 255, 255, .85); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 0, 0, .08); color: var(--forest); font-size: 10px; white-space: nowrap;
}
.floating-tools .motion-toggle:disabled { opacity: 1; cursor: default; }
.floating-tools .floating-whatsapp {
  position: static; width: 46px; height: 46px; background: #536b5b; color: #fff;
  border: 1px solid rgba(0, 0, 0, .08); box-shadow: none; flex-shrink: 0;
}
.site-footer { padding-bottom: 70px; }

/* Same reserved video aspect ratio at every playback state. */
.video-card video { display: block; cursor: pointer; }
.video-card .video-play { display: none; background: linear-gradient(0deg, rgba(13,26,18,.35), rgba(13,26,18,.03)); }
.video-card.video-enhanced .video-play { display: flex; }
.video-card.is-playing .video-play { opacity: 0; pointer-events: none; visibility: hidden; }
.video-play > svg { width: 58px; height: 58px; padding: 18px; border: 1px solid rgba(255,255,255,.7); background: rgba(24,58,46,.25); }
.video-play > span { font-size: 10px; letter-spacing: .06em; }
.video-fallback { position: absolute; inset: auto 18px 18px; padding: 12px; color: white; background: var(--forest); text-align: center; border-radius: 9999px; }
.video-enhanced .video-fallback { display: none; }
.video-controls {
  position: absolute; inset: auto 0 0; display: grid; grid-template-columns: 36px minmax(0,1fr) auto 36px 36px;
  align-items: center; gap: 5px; padding: 34px 12px 10px; color: #fff;
  background: linear-gradient(0deg, rgba(8,20,13,.9), rgba(8,20,13,0));
  opacity: 0; visibility: hidden; pointer-events: none;
}
.video-card.has-started .video-controls { opacity: 1; visibility: visible; pointer-events: auto; }
.video-controls button { display: grid; place-items: center; width: 36px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: inherit; }
.video-controls [hidden] { display: none; }
.video-controls svg { width: 18px; height: 18px; }
.video-controls input { width: 100%; min-width: 0; height: 44px; accent-color: #d9c9b1; cursor: pointer; }
.video-controls time { width: 37px; font: 9px var(--sans); font-variant-numeric: tabular-nums; text-align: center; }
.video-controls button:focus-visible, .video-play:focus-visible { outline: 2px solid white; outline-offset: -4px; }
.video-status { position: absolute; inset: 16px 16px auto; color: white; background: rgba(18,30,22,.85); font-size: 11px; border-radius: 6px; }
.video-status:not(:empty) { padding: 10px; }
.video-card:fullscreen { border-radius: 0; display: grid; place-items: center; background: #09150e; }
.video-card:fullscreen video { width: auto; max-width: 100%; height: 100dvh; max-height: none; object-fit: contain; }
.video-card:fullscreen .video-controls { max-width: 640px; margin-inline: auto; }
@media (prefers-reduced-motion: no-preference) {
  html.gsap-pending .method-step { opacity: 0; transform: translateY(24px); }
  html.motion-ready:not(.motion-paused) .seal-ring { animation: seal-turn 50s linear infinite; }
  .video-play { transition: opacity .25s ease-out, visibility .25s ease-out; }
  @media (hover: hover) and (pointer: fine) {
    .floating-tools .floating-whatsapp { transition: transform .25s cubic-bezier(.22,1,.36,1), background-color .25s ease-out; }
    .floating-tools .floating-whatsapp:hover { transform: translateY(-3px); background: var(--terra); }
  }
  @keyframes seal-turn { to { transform: rotate(360deg); } }
}
@media (max-width: 700px) {
  .hero { padding-top: clamp(6rem, 12vh, 9rem); }
  .hero::before { content: ''; display: block; min-height: clamp(160px, 22svh, 250px); }
  .hero .hero-content { margin-top: 0; }
  .floating-tools { right: 14px; bottom: max(14px, env(safe-area-inset-bottom)); gap: 8px; }
  .floating-tools .motion-toggle { width: 150px; padding-inline: 10px; font-size: 9px; }
}
@media (prefers-reduced-motion: reduce), print {
  .method-step { opacity: 1 !important; transform: none !important; }
  .seal-ring { animation: none !important; }
  .floating-tools .floating-whatsapp:hover { transform: none; }
}
@media print { .floating-tools, .video-controls { display: none; } }