/* WordPress compatibility layer. Loaded after the exact CREOVIVE stylesheet. */

html {
  margin-top: 0 !important;
}

body.admin-bar .site-header,
body.admin-bar .scroll-progress {
  top: 32px;
}

.site-header.shell {
  width: min(100%, 1800px);
}

.full-image-hero > img.hero-background,
.home-photo-strip-item > img,
.statement-visual > img,
.work-side > img,
.portfolio-visual-card > img,
.services-visual > img,
.brand-moment-visual > img,
.studio-preview-image > img,
.founder-visual > img,
.final-cta-visual > img,
.proof-visual > img,
.article-image > img,
.faq-visual > img,
.work-reel-item > img,
.work-spotlight-image > img,
.project-media > img,
.service-context-image > img,
.services-final > img,
.studio-manifesto-image > img,
.studio-capabilities-image > img,
.studio-process-image > img,
.studio-contact > img,
.contact-form-visual > img,
.featured-article-image > img,
.blog-list-image > img,
.article-inline-image > img,
.case-frame > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-form input,
.project-form textarea,
.project-form select {
  width: 100%;
  height: 54px;
  margin: 0;
  padding: 0 2px;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 0;
  outline: 0;
  background: transparent;
  color: #fff;
  box-shadow: none;
  font: inherit;
  font-size: 1rem;
}

.project-form select {
  padding-right: 38px;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255,255,255,.75) 50%),
    linear-gradient(135deg, rgba(255,255,255,.75) 50%, transparent 50%);
  background-position: calc(100% - 17px) 24px, calc(100% - 11px) 24px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  color-scheme: dark;
  cursor: pointer;
  appearance: none;
}

.project-form select option {
  background: #111;
  color: #fff;
}

.project-form textarea {
  min-height: 150px;
  padding-top: 16px;
  resize: vertical;
}

.project-form input::placeholder,
.project-form textarea::placeholder {
  color: rgba(255, 255, 255, 0.42);
}

.project-form button,
.newsletter-form button {
  min-height: 50px;
  padding: 0 28px;
  border: 0;
  border-radius: 999px;
  background: var(--green);
  color: var(--ink);
  font: inherit;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.project-form button:hover,
.newsletter-form button:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(173,245,50,.2);
}

.newsletter-form input {
  width: 100%;
  min-width: 0;
  height: 58px;
  padding: 0 22px;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 999px;
  outline: 0;
  background: rgba(255,255,255,.04);
  color: #fff;
  font: inherit;
}

.form-status {
  margin-top: 16px;
}

.form-status.is-success { color: var(--green); }
.form-status.is-error { color: #ff9c9c; }

.has-creovive-motion .image-reveal,
.has-creovive-motion .project-card,
.has-creovive-motion .service-chapter-head,
.has-creovive-motion .article-card {
  opacity: .001;
  transform: translateY(26px);
  transition: opacity 700ms ease, transform 800ms cubic-bezier(.22,.61,.36,1);
}

.has-creovive-motion .image-reveal.is-in-view,
.has-creovive-motion .project-card.is-in-view,
.has-creovive-motion .service-chapter-head.is-in-view,
.has-creovive-motion .article-card.is-in-view {
  opacity: 1;
  transform: translateY(0);
}

.has-creovive-motion .project-card:nth-child(2n),
.has-creovive-motion .article-card:nth-child(2n) {
  transition-delay: 90ms;
}

.generic-page {
  min-height: 72vh;
  padding-top: clamp(150px, 15vw, 230px);
}

.generic-page h1 {
  max-width: 1100px;
  margin: 20px 0 50px;
  font-size: clamp(3.5rem, 9vw, 9rem);
  letter-spacing: -.065em;
  line-height: .88;
}

.entry-content {
  max-width: 880px;
  font-size: 1.1rem;
}

.not-found-page {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 150px 0 80px;
}

.not-found-page h1 {
  max-width: 1100px;
  margin: 28px 0;
  font-size: clamp(4rem, 11vw, 11rem);
  letter-spacing: -.075em;
  line-height: .82;
}

.not-found-page h1 span { color: var(--green); }
.not-found-page > .shell > p:not(.eyebrow) { max-width: 620px; }

.testimonial-head {
  display: grid;
  grid-template-columns: minmax(0, .65fr) minmax(0, 1.35fr);
  gap: 28px;
}

.testimonial-head .eyebrow { grid-column: 1 / -1; }

.testimonial-head h2 {
  max-width: 900px;
  margin: 0;
  font-size: clamp(3.2rem, 6vw, 7rem);
  letter-spacing: -.06em;
  line-height: .92;
}

.testimonial-head > p:last-child {
  max-width: 520px;
  margin: 8px 0 0 auto;
  font-size: clamp(1rem, 1.3vw, 1.25rem);
}

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: clamp(55px, 7vw, 110px);
}

.testimonial-grid blockquote {
  display: flex;
  min-height: 390px;
  margin: 0;
  padding: clamp(25px, 3vw, 44px);
  flex-direction: column;
  border: 1px solid rgba(17,17,17,.18);
  border-radius: 18px;
}

.testimonial-grid blockquote > span {
  color: #058f92;
  font-size: .7rem;
  letter-spacing: .1em;
}

.testimonial-grid blockquote > p {
  margin: auto 0;
  font-family: var(--serif);
  font-size: clamp(1.55rem, 2.1vw, 2.35rem);
  font-style: italic;
  line-height: 1.08;
}

.testimonial-grid footer { display: flex; flex-direction: column; gap: 3px; }
.testimonial-grid footer small { color: rgba(17,17,17,.55); }

.creovive-elementor-page .elementor-section-wrap,
.creovive-elementor-page .e-con {
  max-width: none;
}

@media (max-width: 782px) {
  body.admin-bar .site-header,
  body.admin-bar .scroll-progress { top: 46px; }
}

@media (max-width: 760px) {
  .project-form-grid { grid-template-columns: 1fr; }
  .project-form-message { grid-column: 1; }
  .project-form-submit { align-items: stretch; flex-direction: column; }
  .project-form button { width: 100%; }
  .testimonial-head { grid-template-columns: 1fr; }
  .testimonial-head > p:last-child { margin-left: 0; }
  .testimonial-grid { grid-template-columns: 1fr; }
  .testimonial-grid blockquote { min-height: 300px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}