/* ============================================================
   Artsy overlay — organic & editorial restyle.
   Loaded LAST so it overrides the base look without editing
   styles.css. Goal: less boxy, more flowing. Deliberately does
   NOT touch .hero, .reel-*, or the header.
   ============================================================ */

:root {
  --radius: 22px;
  --line: rgba(17, 24, 39, 0.05);
  --shadow: 0 34px 70px -34px rgba(15, 63, 61, 0.34);
  --grad-warm: linear-gradient(115deg, #0f766e 0%, #2f9e92 38%, #ef6a5a 100%);
  --grad-soft: linear-gradient(160deg, #ffffff 0%, #fbfaf6 100%);
}

/* ---- Atmospheric background (cheap: baked radial gradients, no blur) ---- */
body {
  position: relative;
  overflow-x: hidden;
  background-color: #fdfcf9;
  background-image:
    radial-gradient(60vw 60vw at -8% 22%, rgba(15, 118, 110, 0.12), transparent 60%),
    radial-gradient(55vw 55vw at 108% 78%, rgba(239, 106, 90, 0.1), transparent 60%),
    radial-gradient(40vw 40vw at 80% 8%, rgba(242, 184, 75, 0.08), transparent 60%);
  background-attachment: fixed;
}

/* ---- De-box every card: borders become soft floating shadows ---- */
.intro-grid article,
.usecase-grid article,
.story-grid article,
.proof-grid article,
.results-grid article,
.package-card,
.work-card,
.faq-list details,
.credibility-grid article,
.scope-grid article,
.inputs-grid article,
.channel-grid article,
.testimonial-card,
.vs-card,
.deliverables-section article,
.timeline-track li,
.proof-strip-card,
.sample-highlight-grid article,
.sample-lane,
.usecase-spotlight,
.sample-spotlight,
.package-note,
.pricing-compare-scroll {
  border: 0 !important;
  border-radius: 24px !important;
  background: var(--grad-soft) !important;
  box-shadow: 0 26px 56px -30px rgba(15, 63, 61, 0.3), 0 4px 14px -8px rgba(17, 24, 39, 0.06) !important;
  transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.28s ease !important;
}

.hero-offer-grid article {
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  background: rgba(8, 18, 24, 0.48) !important;
  box-shadow: 0 24px 54px -34px rgba(0, 0, 0, 0.7) !important;
}

.logo-wall-heading-spaced {
  margin-top: 3rem;
}

/* Give cards a little organic asymmetry + lift on hover */
.intro-grid article:nth-child(odd),
.usecase-grid article:nth-child(odd),
.proof-grid article:nth-child(even),
.testimonial-card:nth-child(odd),
.results-grid article:nth-child(even) {
  border-radius: 28px 24px 32px 22px !important;
}

.intro-grid article:hover,
.usecase-grid article:hover,
.story-grid article:hover,
.proof-grid article:hover,
.results-grid article:hover,
.package-card:hover,
.work-card:hover,
.testimonial-card:hover,
.vs-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 40px 80px -34px rgba(15, 63, 61, 0.42), 0 6px 18px -8px rgba(17, 24, 39, 0.08) !important;
}

/* The emphasized package card: warm tinted glass instead of a hard box */
.package-card.emphasized {
  background: linear-gradient(165deg, #ffffff 0%, #fff4f1 100%) !important;
  transform: translateY(-8px) scale(1.015);
}

/* ---- Section headings: flowing, ANIMATED gradient type ---- */
@keyframes artsy-flow {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

.section-heading h2,
.video-showcase .section-heading h2,
.testimonials .section-heading h2,
.intro-section .section-heading h2,
.usecases-section .section-heading h2,
.story-section .section-heading h2,
.proof-section .section-heading h2,
.results-section .section-heading h2,
.faq-section .section-heading h2 {
  background: linear-gradient(115deg, #0f766e 0%, #2f9e92 28%, #ef6a5a 58%, #f2b84b 80%, #0f766e 100%);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: -0.02em;
  line-height: 1.08;
  animation: artsy-flow 9s linear infinite alternate;
}

/* Hand-drawn wavy underline drifting beneath each section heading */
.section-heading h2 {
  position: relative;
  display: inline-block;
  padding-bottom: 0.42em;
}

.section-heading h2::after {
  content: "";
  position: absolute;
  left: 2%;
  bottom: 0.05em;
  width: min(64%, 260px);
  height: 0.34em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 24' preserveAspectRatio='none'%3E%3Cpath d='M4,14 C60,4 110,22 160,12 C210,2 260,18 296,8' fill='none' stroke='%23ef6a5a' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left center / 100% 100%;
  opacity: 0.85;
  pointer-events: none;
}

.eyebrow {
  background: var(--grad-warm);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 700;
  animation: artsy-flow 7s linear infinite alternate;
}

/* Card titles pick up the gradient too (they sit on white cards) */
.package-card h3,
.intro-grid article h3,
.usecase-grid article h3,
.results-grid article h3,
.story-grid article h3 {
  background: var(--grad-warm);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---- Reusable word treatments ---- */
/* Gradient word (for light backgrounds) */
.hl-grad {
  background: var(--grad-warm);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: artsy-flow 7s linear infinite alternate;
}

/* Highlighter-marker swipe behind a word (works on any background) */
.hl-mark {
  position: relative;
  white-space: nowrap;
  z-index: 0;
}

.hl-mark::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -0.12em;
  right: -0.12em;
  bottom: 0.02em;
  height: 0.62em;
  background: linear-gradient(120deg, rgba(242, 184, 75, 0.85), rgba(239, 106, 90, 0.8));
  border-radius: 0.5em 0.4em 0.55em 0.45em;
  transform: rotate(-1.4deg);
}

@media (prefers-reduced-motion: reduce) {
  .section-heading h2,
  .eyebrow,
  .hl-grad {
    animation: none !important;
  }
}

/* ---- Flowing section rhythm: soft alternating tints, no hard edges ---- */
.section {
  position: relative;
  border: 0;
}

.usecases-section,
.testimonials,
.story-section {
  background: linear-gradient(180deg, rgba(15, 118, 110, 0.04), rgba(239, 106, 90, 0.035)) !important;
}

.video-showcase,
.packages-section {
  background: linear-gradient(180deg, #ffffff, #fbfaf6) !important;
}

/* Curved wave divider drifting between major sections */
.video-showcase::before,
.testimonials::before,
.packages-section::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 60px;
  background: inherit;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0,60 C300,0 900,80 1200,10 L1200,60 Z'/%3E%3C/svg%3E") no-repeat center top / 100% 100%;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0,60 C300,0 900,80 1200,10 L1200,60 Z'/%3E%3C/svg%3E") no-repeat center top / 100% 100%;
  transform: translateY(-100%);
  pointer-events: none;
}

/* ---- Buttons: rounder, with a soft glow ---- */
.button {
  border-radius: 999px !important;
}

.button.primary {
  background: var(--grad-warm) !important;
  border: 0 !important;
  box-shadow: 0 16px 34px -14px rgba(239, 106, 90, 0.6) !important;
}

.button.primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 44px -14px rgba(239, 106, 90, 0.7) !important;
}

.button.secondary,
.button.outline {
  border-radius: 999px !important;
  border: 1.5px solid rgba(15, 118, 110, 0.35) !important;
  background: rgba(255, 255, 255, 0.6) !important;
  backdrop-filter: blur(6px);
}

/* ---- Logo wall: drop the slab feel, let logos float on the gradient ---- */
.logo-wall {
  background: transparent !important;
  border: 0 !important;
}

/* ---- Proof strip: pill chips instead of a boxy bar ---- */
.proof-strip {
  border: 0 !important;
  background: transparent !important;
  gap: 12px;
}

.proof-strip span {
  border-radius: 999px !important;
  border: 1px solid rgba(15, 118, 110, 0.2) !important;
  background: rgba(255, 255, 255, 0.7) !important;
  backdrop-filter: blur(6px);
}

/* ---- FAQ: soften the accordions ---- */
.faq-list details {
  overflow: hidden;
}

/* ---- Brief form: a floating panel, not a bordered box ---- */
.brief-form,
.brief-section .brief-card,
.booking-band {
  border: 0 !important;
  border-radius: 28px !important;
}

/* Samples finder: collapse to a single column. The original 2-column
   "command panel" was balanced by side cards (category model, lane brief,
   proof map) that have since been removed in the thin-down, leaving an
   empty left column. Stack heading -> controls -> notes instead. */
.sample-finder {
  grid-template-columns: 1fr !important;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .intro-grid article,
  .package-card,
  .testimonial-card,
  .vs-card,
  .button.primary {
    transition: none !important;
  }
}