/* Global resets + shared utilities for all three directions */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { font-family: -apple-system, BlinkMacSystemFont, sans-serif; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
a { color: inherit; text-decoration: none; }

/* Hide scrollbars inside artboards */
.lp-artboard { overflow: hidden; position: relative; }

/* Shared scroll-reveal animation hook */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.reveal { animation: fade-up 0.8s cubic-bezier(.2,.7,.2,1) both; }
.reveal-delay-1 { animation-delay: 0.08s; }
.reveal-delay-2 { animation-delay: 0.16s; }
.reveal-delay-3 { animation-delay: 0.24s; }
.reveal-delay-4 { animation-delay: 0.32s; }

/* Image-placeholder pattern (used when we want a real photo eventually) */
.placeholder-stripes {
  background-image: repeating-linear-gradient(
    135deg,
    rgba(0,0,0,0.04) 0 8px,
    transparent 8px 16px
  );
}

/* Floating global lang toggle — small flag icons, bottom-right to avoid nav CTA */
.lang-switch {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  display: flex;
  gap: 6px;
  background: rgba(23,22,20,0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 999px;
  padding: 5px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.22);
}
.lang-switch button {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  opacity: 0.45;
  transition: opacity .2s, transform .2s;
  padding: 0;
  cursor: pointer;
}
.lang-switch button svg { display: block; width: 20px; height: 14px; border-radius: 2px; }
.lang-switch button.active { opacity: 1; transform: scale(1.06); box-shadow: 0 0 0 2px rgba(255,255,255,0.95); }
.lang-switch button:hover:not(.active) { opacity: 0.85; }

/* ---------- Direction 1 responsive overrides ---------- */
/* Inline styles in JSX win over CSS, so all responsive overrides use !important. */

/* Tablet */
@media (max-width: 980px) {
  .d1-nav { padding: 20px 28px !important; }
  .d1-nav-links { gap: 28px !important; font-size: 16px !important; }
  .d1-section { padding-left: 28px !important; padding-right: 28px !important; }
  .d1-hero { padding: 72px 28px 64px !important; }
  .d1-hero-title { font-size: 60px !important; }
  .d1-hero-grid { grid-template-columns: 1fr !important; gap: 32px !important; margin-top: 48px !important; }
  .d1-hero-ctas { justify-content: flex-start !important; }
  .d1-metrics { grid-template-columns: repeat(3, 1fr) !important; gap: 24px !important; margin-top: 72px !important; }
  .d1-metric-k { font-size: 56px !important; }
  .d1-services-head { grid-template-columns: 1fr !important; gap: 24px !important; }
  .d1-services-h2 { font-size: 36px !important; }
  .d1-service-row { grid-template-columns: auto 1fr !important; gap: 20px !important; padding: 36px 0 !important; }
  .d1-service-num { font-size: 44px !important; min-width: 64px !important; }
  .d1-service-title { font-size: 24px !important; grid-column: 2 !important; }
  .d1-service-desc { grid-column: 1 / -1 !important; max-width: none !important; }
  .d1-service-bullets { grid-column: 1 / -1 !important; }
  .d1-method-h2 { font-size: 40px !important; }
  .d1-method-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 40px 24px !important; }
  .d1-method-grid > div { padding-right: 0 !important; }
  .d1-method-line { display: none !important; }
  .d1-manifesto { padding: 96px 28px !important; }
  .d1-manifesto-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .d1-manifesto-p { font-size: 22px !important; }
  .d1-contact { padding: 96px 28px !important; }
  .d1-contact-grid { grid-template-columns: 1fr !important; gap: 56px !important; }
  .d1-contact-h2 { font-size: 44px !important; }
  .d1-footer { padding: 28px !important; }
}

/* Mobile */
@media (max-width: 640px) {
  .d1-nav { padding: 16px 20px !important; }
  .d1-nav-links { display: none !important; }
  .d1-nav-cta { padding: 10px 18px !important; font-size: 14px !important; }
  .d1-section { padding-left: 20px !important; padding-right: 20px !important; }
  .d1-hero { padding: 56px 20px 48px !important; }
  .d1-hero-title { font-size: 40px !important; letter-spacing: -0.02em !important; }
  .d1-hero-lede { font-size: 17px !important; }
  .d1-hero-ctas { flex-direction: column !important; align-items: stretch !important; gap: 12px !important; }
  .d1-hero-ctas a { text-align: center !important; padding: 16px 24px !important; }
  .d1-metrics { grid-template-columns: 1fr !important; gap: 32px !important; margin-top: 56px !important; padding-top: 32px !important; }
  .d1-metric-k { font-size: 56px !important; }
  .d1-services-h2 { font-size: 28px !important; }
  .d1-service-row { padding: 28px 0 !important; gap: 16px !important; }
  .d1-service-num { font-size: 36px !important; min-width: 52px !important; }
  .d1-service-title { font-size: 20px !important; }
  .d1-method-h2 { font-size: 32px !important; }
  .d1-method-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .d1-manifesto { padding: 64px 20px !important; }
  .d1-manifesto-p { font-size: 19px !important; }
  .d1-contact { padding: 64px 20px !important; }
  .d1-contact-h2 { font-size: 32px !important; }
  .d1-footer { padding: 20px !important; flex-direction: column !important; gap: 16px !important; align-items: flex-start !important; }
}

@media (max-width: 980px) {
  .canvas-frame, .canvas-controls { display: none !important; }
}