/* ============================================================
   THE CREATIVITY LAB — homepage polish layer (loaded last)
   Editorial refinement pass: one cohesive type scale, premium
   tracking, refined cards/buttons, unified luxury motion.
   Apple / Aesop / Linear restraint. No layout rebuilds.
   ============================================================ */
:root { --tcl-ease: cubic-bezier(0.16, 1, 0.3, 1); }

/* ---- 1. Cohesive, restrained section-headline scale ----
   Was a scattered 64 / 77 / 83 / 90px. Now a single tight band
   (~60–74px desktop) with consistent optical tracking. */
.sec-title    { font-size: clamp(2.9rem, 6vw, 4.6rem) !important; letter-spacing: -0.035em !important; line-height: 0.97 !important; text-wrap: balance; }
.ex-headline  { font-size: clamp(2.6rem, 5.4vw, 4.2rem) !important; letter-spacing: -0.032em !important; line-height: 0.99 !important; text-wrap: balance; }
.mf-head,
.fp-statement { font-size: clamp(2.5rem, 5vw, 3.95rem) !important; letter-spacing: -0.03em !important; line-height: 1.0 !important; text-wrap: balance; }
.cap-headline,
.pr-headline  { font-size: clamp(2.4rem, 4.8vw, 3.85rem) !important; letter-spacing: -0.03em !important; line-height: 1.03 !important; text-wrap: balance; }

/* ---- 2. Card titles: kill the default positive tracking, unify sizing ---- */
.cap-card__title { letter-spacing: -0.008em !important; }
.ex-card__title  { font-size: clamp(1.32rem, 1.7vw, 1.55rem) !important; letter-spacing: -0.015em !important; line-height: 1.12 !important; }

/* ---- 3. Custom cards: hairline borders, no default shadow, premium hover ---- */
.cap-card, .ex-card {
  transition: transform 0.55s var(--tcl-ease), border-color 0.55s var(--tcl-ease), background 0.55s var(--tcl-ease), box-shadow 0.55s var(--tcl-ease);
  will-change: transform;
}
.cap-card:hover, .ex-card:hover {
  transform: translateY(-4px);
  border-color: rgba(237, 70, 9, 0.32);
  box-shadow: 0 30px 60px -38px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.02) inset;
}

/* ---- 4. Buttons / CTAs: rounded, tactile, premium easing + micro-scale ---- */
.fc-cta { transition: gap 0.5s var(--tcl-ease), color 0.45s var(--tcl-ease), transform 0.5s var(--tcl-ease) !important; }
.fc-cta:hover { transform: translateY(-1px); }
.sv-tab { transition: color 0.45s var(--tcl-ease), border-color 0.45s var(--tcl-ease), background 0.45s var(--tcl-ease), transform 0.4s var(--tcl-ease) !important; }
.sv-tab:hover { transform: translateY(-1px); }
/* generic premium buttons present elsewhere on the page */
.pw-btn, .sd-btn, .wkx-final__btn {
  transition: transform 0.45s var(--tcl-ease), box-shadow 0.45s var(--tcl-ease), background 0.45s var(--tcl-ease), border-color 0.45s var(--tcl-ease), opacity 0.45s var(--tcl-ease) !important;
}
.pw-btn:hover, .sd-btn:hover, .wkx-final__btn:hover { transform: translateY(-2px) scale(1.012); }
.pw-btn:active, .sd-btn:active, .wkx-final__btn:active { transform: translateY(0) scale(0.99); transition-duration: 0.12s; }

/* ---- 5. Body text: lift the dimmest reading greys a touch for premium
   readability (all already pass WCAG AA; this nudges the faintest ~5.2:1 → ~7:1). ---- */
.pr-sys__text, .cap-card__text, .im-lead { color: #9a9a9a !important; }

/* ---- 6. Motion: unify reveal easing to a luxury ease-out ---- */
.cl-rv, .cl-rv-sc { transition-timing-function: var(--tcl-ease) !important; }

/* ---- 6b. Capabilities card 4: remove the redundant brand watermark that
   collided with the status label on narrow widths; status moves top-left. ---- */
.cap-card--4 .cap-card__brand { display: none !important; }
.cap-card--4 .cap-rare { left: clamp(22px, 2.3vw, 30px) !important; right: auto !important; }

/* ---- 7. Section vertical rhythm: align the two outliers to the system ----
   Most sections run ~90px top / ~141px bottom; manifesto (115/128) and
   collab (102 bottom) broke the cadence. */
.manifesto { padding-top: clamp(60px, 8vw, 92px) !important; padding-bottom: clamp(84px, 12vw, 142px) !important; }
.collab { padding-bottom: clamp(84px, 12vw, 142px) !important; }
.projects { padding-bottom: clamp(72px, 8vw, 112px) !important; }

/* ---- 7b. No floating elements (per brief). The hero card bobbed ±6px on an
   8s loop; a static card reads more editorial / Apple-like. Keeps the premium
   hover-scale on its wrapper, drops the float. ---- */
.float-card { animation: none !important; transform: none !important; }

/* ---- 7c. Centered section headers (Projects, Services): the absolute eyebrow
   overlapped the centered title on phones. Put it in flow, centered, above. ---- */
@media (max-width: 640px) {
  .sec-head .sec-eyebrow { position: static !important; display: block; text-align: center; margin: 0 auto clamp(12px, 3vw, 18px); }
  .projects .sec-head .sec-eyebrow { text-align: left; margin-left: 0; }
}

/* ---- 7d. Mobile tap targets >= 44px (Apple HIG / WCAG). Grows the hit area
   via min-height / flex centering without changing visual type size. ---- */
@media (max-width: 640px) {
  .burger { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .fc-cta, .ex-cta, .faq-cta { min-height: 44px; display: inline-flex; align-items: center; }
  .sv-tab { min-height: 44px; }
  .nav__work { min-height: 44px; display: inline-flex; align-items: center; }
}

/* ---- 8. Scrollable service-tab row: hide scrollbar; fade the trailing edge on
   tablet/mobile so cut-off tabs read as intentional, not broken. ---- */
.sv-nav { scrollbar-width: none; }
.sv-nav::-webkit-scrollbar { display: none; height: 0; }
@media (max-width: 1024px) {
  .sv-nav { -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent 100%); mask-image: linear-gradient(90deg, #000 90%, transparent 100%); }
}

@media (prefers-reduced-motion: reduce) {
  .cap-card:hover, .ex-card:hover, .fc-cta:hover, .sv-tab:hover,
  .pw-btn:hover, .sd-btn:hover, .wkx-final__btn:hover { transform: none; }
}