/* ============================================================
   Zibuke OnCall — Premium Luxury Redesign
   ------------------------------------------------------------
   Brand palette:
     Lime: #CFFF04 (brand neon)
     Black: #000000
     White: #FFFFFF

   Strict color rules (hardcoded, no inheritance):
     Rule A — Lime bg  → black text (and ALL descendants)
     Rule B — Black bg → lime text (and ALL descendants)
     Rule C — White bg → black text (and ALL descendants)

   Typography:
     Headlines: Cormorant Garamond (editorial serif)
     Body/UI:   Plus Jakarta Sans (geometric sans-serif)

   Cards:
     1px borders, border-radius 4-8px, no heavy drop shadows
     Asymmetric grid + horizontal snap-scroll
     Hover: scale(1.02) + border color swap
   ============================================================ */

/* ── 1. Premium typography imports ─────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&family=Plus+Jakarta+Sans:wght@200;300;400;500;600;700;800&display=swap');

/* ── 2. Brand tokens (overrides for premium layout) ───────── */
:root {
  --premium-lime: #CFFF04;
  --premium-lime-soft: #d6ff3d;
  --premium-lime-deep: #a8cc00;
  --premium-black: #000000;
  --premium-ink: #0B0B0C;
  --premium-white: #FFFFFF;
  --premium-paper: #FAFAF7;
  --premium-border: #1a1a1a;
  --premium-border-soft: rgba(207, 255, 4, 0.18);
  --premium-rule: rgba(0, 0, 0, 0.08);

  --premium-serif: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --premium-sans:  'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  --premium-radius:    6px;
  --premium-radius-sm: 4px;
  --premium-radius-lg: 8px;
  --premium-shadow:    0 1px 0 rgba(0,0,0,0.04);

  --premium-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ── 3. Premium base typography ────────────────────────────── */
body {
  font-family: var(--premium-sans);
  font-weight: 400;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .premium-headline {
  font-family: var(--premium-serif);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.08;
  font-feature-settings: "ss01", "ss02";
}

h1 { font-size: clamp(2.6rem, 5.8vw, 4.8rem); font-weight: 400; }
h2 { font-size: clamp(2.0rem, 4.2vw, 3.4rem); font-weight: 400; }
h3 { font-size: clamp(1.4rem, 2.6vw, 2.0rem); font-weight: 500; }
h4 { font-size: clamp(1.1rem, 1.8vw, 1.35rem); font-weight: 500; }

p, li, label, small, span, a, button {
  font-family: var(--premium-sans);
}

p { line-height: 1.65; }

/* Editorial kicker — small, all-caps, tracked label */
.premium-kicker {
  font-family: var(--premium-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  display: inline-block;
  position: relative;
  padding-left: 28px;
}
.premium-kicker::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 1px;
  background: currentColor;
}

/* ── 4. STRICT color enforcement (the three rules) ─────────── */
/* Rule A — Lime background → black text (and ALL descendants) */
.card-bg-lime,
.section-bg-lime,
.band-lime {
  background-color: var(--premium-lime) !important;
  color: var(--premium-black) !important;
}
.card-bg-lime *,
.section-bg-lime *,
.band-lime * {
  color: var(--premium-black) !important;
}
.card-bg-lime a,
.section-bg-lime a,
.band-lime a {
  color: var(--premium-black) !important;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* Rule B — Black background → lime text (and ALL descendants) */
.card-bg-black,
.section-bg-black,
.band-black {
  background-color: var(--premium-black) !important;
  color: var(--premium-lime) !important;
}
.card-bg-black *,
.section-bg-black *,
.band-black * {
  color: var(--premium-lime) !important;
}
.card-bg-black a,
.section-bg-black a,
.band-black a {
  color: var(--premium-lime) !important;
}

/* Rule C — White background → black text (and ALL descendants) */
.card-bg-white,
.section-bg-white,
.band-white {
  background-color: var(--premium-white) !important;
  color: var(--premium-black) !important;
}
.card-bg-white *,
.section-bg-white *,
.band-white * {
  color: var(--premium-black) !important;
}
.card-bg-white a,
.section-bg-white a,
.band-white a {
  color: var(--premium-black) !important;
}

/* ── 5. Premium card primitive ─────────────────────────────── */
.premium-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 32px 28px;
  border-radius: var(--premium-radius);
  border: 1px solid currentColor;
  background-clip: padding-box;
  transition: transform 380ms var(--premium-ease),
              border-color 380ms var(--premium-ease),
              box-shadow 380ms var(--premium-ease);
  overflow: hidden;
  isolation: isolate;
  min-height: 240px;
}

.premium-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 60%, rgba(0,0,0,0.04) 100%);
  pointer-events: none;
  z-index: -1;
}

.premium-card:hover {transform: scale(1.02)}

.premium-card .premium-card-kicker {
  font-family: var(--premium-sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.75;
  margin-bottom: 18px;
}

.premium-card .premium-card-title {
  font-family: var(--premium-serif);
  font-size: 1.85rem;
  line-height: 1.1;
  font-weight: 500;
  margin: 0 0 14px;
}

.premium-card .premium-card-body {
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 22px;
  opacity: 0.85;
}

.premium-card .premium-card-cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--premium-sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 12px 0;
  border-bottom: 1px solid currentColor;
  align-self: flex-start;
  transition: gap 320ms var(--premium-ease);
}
.premium-card .premium-card-cta:hover {gap: 16px}
.premium-card .premium-card-cta::after {
  content: "→";
  font-size: 1.05em;
  transition: transform 320ms var(--premium-ease);
}
.premium-card .premium-card-cta:hover::after {transform: translateX(4px)}

/* ── 6. Service-card variants (3 strict color rules) ──────── */
.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 320px;
  padding: 36px 30px;
  border: 1px solid currentColor;
  border-radius: var(--premium-radius);
  transition: transform 420ms var(--premium-ease),
              border-color 420ms var(--premium-ease),
              background-color 420ms var(--premium-ease);
  text-decoration: none;
  overflow: hidden;
}
.service-card::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 1px;
  background: currentColor;
  opacity: 0.25;
  transition: opacity 320ms var(--premium-ease);
}
.service-card:hover {transform: scale(1.02)}
.service-card:hover::after {opacity: 0}

.service-card .service-icon {
  font-size: 1.8rem;
  margin-bottom: 24px;
  display: inline-block;
}
.service-card .service-title {
  font-family: var(--premium-serif);
  font-size: 1.9rem;
  line-height: 1.1;
  font-weight: 500;
  margin: 0 0 12px;
}
.service-card .service-desc {
  font-size: 0.92rem;
  line-height: 1.55;
  margin: 0 0 22px;
  opacity: 0.8;
}
.service-card .service-meta {
  margin-top: auto;
  font-family: var(--premium-sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.7;
}/* hover-color rule removed *//* hover-color rule removed *//* hover-color rule removed */

/* ── 7. Asymmetric grid layout ─────────────────────────────── */
.premium-asym-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
}
.premium-asym-grid > .premium-span-4 { grid-column: span 4; }
.premium-asym-grid > .premium-span-5 { grid-column: span 5; }
.premium-asym-grid > .premium-span-6 { grid-column: span 6; }
.premium-asym-grid > .premium-span-7 { grid-column: span 7; }
.premium-asym-grid > .premium-span-8 { grid-column: span 8; }
.premium-asym-grid > .premium-span-12 { grid-column: span 12; }

@media (max-width: 1024px) {
  .premium-asym-grid > [class*="premium-span-"] { grid-column: span 6; }
}
@media (max-width: 640px) {
  .premium-asym-grid { grid-template-columns: 1fr; }
  .premium-asym-grid > [class*="premium-span-"] { grid-column: span 1; }
}

/* ── 8. Horizontal snap-scroll layout ──────────────────────── */
.premium-snap {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 24px;
  padding: 8px 24px 28px;
  margin: 0 -24px;
  scrollbar-width: thin;
  scrollbar-color: var(--premium-lime) var(--premium-black);
}
.premium-snap > * {
  flex: 0 0 320px;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.premium-snap::-webkit-scrollbar { height: 4px; }
.premium-snap::-webkit-scrollbar-track { background: rgba(255,255,255,0.04); }
.premium-snap::-webkit-scrollbar-thumb { background: var(--premium-lime); border-radius: 4px; }

@media (min-width: 1024px) {
  .premium-snap > * { flex-basis: 360px; }
}

/* ── 9. Premium section dividers ───────────────────────────── */
.premium-rule {
  height: 1px;
  background: currentColor;
  opacity: 0.15;
  border: 0;
  margin: 48px 0;
}
.premium-rule--bold { opacity: 0.4; }

.premium-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--premium-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.premium-eyebrow::before {
  content: "";
  display: inline-block;
  width: 32px;
  height: 1px;
  background: currentColor;
}

/* ── 10. Premium CTAs (high-contrast, no shadows) ──────────── */
.btn-premium-lime {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 32px;
  background: var(--premium-lime);
  color: var(--premium-black) !important;
  border: 1px solid var(--premium-lime);
  border-radius: var(--premium-radius);
  font-family: var(--premium-sans);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform 320ms var(--premium-ease), background 320ms var(--premium-ease);
}
.btn-premium-lime:hover {transform: translateY(-2px)}

.btn-premium-black {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 32px;
  background: var(--premium-black);
  color: var(--premium-lime) !important;
  border: 1px solid var(--premium-lime);
  border-radius: var(--premium-radius);
  font-family: var(--premium-sans);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform 320ms var(--premium-ease), background 320ms var(--premium-ease);
}
.btn-premium-black:hover {transform: translateY(-2px)}

.btn-premium-white {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 32px;
  background: var(--premium-white);
  color: var(--premium-black) !important;
  border: 1px solid var(--premium-black);
  border-radius: var(--premium-radius);
  font-family: var(--premium-sans);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform 320ms var(--premium-ease);
}
.btn-premium-white:hover {transform: translateY(-2px)}

/* ── 11. Premium hero ──────────────────────────────────────── */
.premium-hero {
  position: relative;
  padding: clamp(80px, 14vh, 180px) 0 clamp(60px, 10vh, 120px);
  overflow: hidden;
}
.premium-hero h1 {
  max-width: 14ch;
  margin-bottom: 24px;
}
.premium-hero p {
  max-width: 52ch;
  font-size: 1.1rem;
  line-height: 1.55;
  opacity: 0.85;
  margin-bottom: 36px;
}
.premium-hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* ── 12. Premium section spacing ───────────────────────────── */
.premium-section { padding: clamp(60px, 9vw, 120px) 0; }
.premium-section--tight { padding: clamp(40px, 6vw, 80px) 0; }
.premium-container { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
@media (max-width: 640px) { .premium-container { padding: 0 20px; } }

/* ── 13. Decorative editorial rule + numbering ─────────────── */
.premium-number {
  font-family: var(--premium-serif);
  font-style: italic;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0;
  opacity: 0.6;
  margin-right: 6px;
}

/* ── 14. Form fields (premium, strict colors) ──────────────── */
.premium-input {
  width: 100%;
  padding: 14px 18px;
  background: transparent;
  border: 1px solid currentColor;
  border-radius: var(--premium-radius-sm);
  font-family: var(--premium-sans);
  font-size: 0.95rem;
  transition: border-color 280ms var(--premium-ease);
}
.premium-input::placeholder { opacity: 0.5; }
.premium-input:focus { outline: none; border-color: var(--premium-lime); }

/* ── 15. Accessibility — keyboard focus ────────────────────── */
.btn-premium-lime:focus-visible,
.btn-premium-black:focus-visible,
.btn-premium-white:focus-visible,
.premium-card:focus-visible,
.service-card:focus-visible {
  outline: 2px solid var(--premium-lime);
  outline-offset: 3px;
}

/* ── 16. Reduced motion ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .premium-card,
  .service-card,
  .btn-premium-lime,
  .btn-premium-black,
  .btn-premium-white { transition: none !important; }
  .premium-card:hover,
  .service-card:hover { transform: none; }
}