@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400&family=Noto+Sans+Display:wght@200;300&display=swap");

/* Exact preview lock:
   - thin geometric lettering
   - clean white at the top of each letter
   - smooth blue fade rising from the bottom
   - almost no gray outline / heavy shadow
*/

.image-headline .headline-img,
.image-heading img,
.gallery-title img {
  display: none !important;
}

.image-headline .sr-only,
.image-heading .sr-only,
.gallery-title .sr-only {
  position: static !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: normal !important;
  border: 0 !important;
}

h1,
h2,
.page-title,
.hero h1,
.hero h1.image-headline,
.section-title,
.section-title.image-headline,
.contact h2,
.contact h2.image-headline,
.image-heading,
.gallery-title,
.process-title.text-heading {
  display: block !important;
  width: 100% !important;
  transform: none !important;
  font-family: "Montserrat", "Noto Sans Display", "Avenir Next", "Century Gothic", "Helvetica Neue", Arial, sans-serif !important;
  font-style: normal !important;
  font-weight: 300 !important;
  text-transform: uppercase !important;
  letter-spacing: .045em !important;
  line-height: 1.02 !important;
  text-rendering: geometricPrecision !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  background: linear-gradient(to bottom,
    #ffffff 0%,
    #ffffff 12%,
    #eef9ff 28%,
    #c9efff 48%,
    #84dbff 68%,
    #26beff 84%,
    #009fe8 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  -webkit-text-stroke: 0 !important;
  text-shadow:
    0 0 1px rgba(255,255,255,.12),
    0 0 9px rgba(0,169,244,.16) !important;
  filter: none !important;
}

.hero h1.image-headline,
.hero h1 {
  font-size: clamp(2.6rem, 7.8vw, 6rem) !important;
  text-align: center !important;
}

.section-title,
.section-title.image-headline,
.contact h2,
.contact h2.image-headline,
.gallery-title,
.page-title,
.image-heading {
  font-size: clamp(2.45rem, 6.2vw, 4.9rem) !important;
}

.contact h2,
.contact h2.image-headline {
  text-align: center !important;
}

/* Subtitle under JOSE VALDES: slimmer and softer, like preview. */
.hero-subtitle,
.logo-descriptor,
.logo-descriptor-v2,
.matched-logo-subtitle {
  font-family: "Montserrat", "Noto Sans Display", "Avenir Next", Arial, sans-serif !important;
  font-weight: 300 !important;
  letter-spacing: .18em !important;
  background: linear-gradient(to bottom,
    #f5f7f9 0%,
    #e8edf1 46%,
    #b8eaff 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  text-shadow: 0 0 1px rgba(255,255,255,.08) !important;
}

@media (max-width: 780px) {
  h1,
  .hero h1,
  .hero h1.image-headline {
    font-size: clamp(2.65rem, 11vw, 4.15rem) !important;
    letter-spacing: .04em !important;
  }

  h2,
  .section-title,
  .section-title.image-headline,
  .contact h2,
  .contact h2.image-headline,
  .gallery-title,
  .page-title,
  .image-heading,
  .process-title.text-heading {
    font-size: clamp(2.35rem, 10.5vw, 3.75rem) !important;
    letter-spacing: .04em !important;
  }

  .hero-subtitle,
  .logo-descriptor,
  .logo-descriptor-v2,
  .matched-logo-subtitle {
    letter-spacing: .15em !important;
  }
}

/* If a major headline stacks on multiple lines, each line needs its own fade.
   Use split-fade-headline + headline-line spans for exact per-line blue fade. */
.split-fade-headline {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  align-items: flex-end !important;
  gap: 0 .18em !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  color: inherit !important;
  text-shadow: none !important;
}

.split-fade-headline .sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.split-fade-headline .headline-line {
  display: inline-block !important;
  font: inherit !important;
  letter-spacing: inherit !important;
  line-height: inherit !important;
  text-transform: inherit !important;
  background: linear-gradient(to bottom,
    #ffffff 0%,
    #ffffff 12%,
    #eef9ff 28%,
    #c9efff 48%,
    #84dbff 68%,
    #26beff 84%,
    #009fe8 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  text-shadow:
    0 0 1px rgba(255,255,255,.12),
    0 0 9px rgba(0,169,244,.16) !important;
}

@media (max-width: 780px) {
  .split-fade-headline {
    display: block !important;
  }

  .split-fade-headline .headline-line {
    display: block !important;
  }
}

/* Hero lock: render JOSE VALDES and its subtitle as their own gradient text layers.
   This prevents the parent h1 background from disappearing on nested text. */
.hero-preview-match {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  color: inherit !important;
  text-shadow: none !important;
}

.hero-preview-match > .sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.hero-preview-match .hero-main-line {
  display: block !important;
  font: inherit !important;
  font-weight: 300 !important;
  letter-spacing: .045em !important;
  line-height: 1.02 !important;
  background: linear-gradient(to bottom,
    #ffffff 0%,
    #ffffff 10%,
    #edf9ff 25%,
    #bfeaff 44%,
    #6fd2ff 64%,
    #20b9ff 82%,
    #009fe8 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  text-shadow: 0 0 9px rgba(0,169,244,.16) !important;
}

.hero-preview-match .hero-subtitle {
  display: block !important;
  margin-top: .20em !important;
  font-family: "Montserrat", "Noto Sans Display", "Avenir Next", Arial, sans-serif !important;
  font-size: .46em !important;
  font-weight: 300 !important;
  letter-spacing: .18em !important;
  line-height: 1.08 !important;
  background: linear-gradient(to bottom,
    #f7fbff 0%,
    #edf8ff 24%,
    #c4ecff 48%,
    #79d6ff 70%,
    #24baff 87%,
    #009fe8 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  text-shadow: 0 0 7px rgba(0,169,244,.14) !important;
}

@media (max-width:780px) {
  .hero-preview-match .hero-main-line { letter-spacing: .04em !important; }
  .hero-preview-match .hero-subtitle { letter-spacing: .15em !important; }
}


/* Apply the same approved blue fade treatment to smaller display text
   and the home-page category pills. */
.hero-subtitle,
.hero-preview-match .hero-subtitle,
.logo-descriptor,
.logo-descriptor-v2,
.matched-logo-subtitle {
  background: linear-gradient(to bottom,
    #ffffff 0%,
    #f8fcff 16%,
    #e7f7ff 34%,
    #bdeaff 56%,
    #75d5ff 76%,
    #22b9ff 90%,
    #009fe8 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  text-shadow:
    0 0 1px rgba(255,255,255,.10),
    0 0 7px rgba(0,169,244,.14) !important;
}

.art-card figcaption {
  border-color: rgba(85,199,255,.62) !important;
  background: rgba(7,10,14,.84) !important;
  box-shadow:
    inset 0 0 14px rgba(85,199,255,.08),
    0 0 14px rgba(0,169,244,.10) !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: none !important;
}

.art-card figcaption span {
  display: inline-block !important;
  font-family: "Montserrat", "Noto Sans Display", "Avenir Next", "Century Gothic", "Helvetica Neue", Arial, sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: .14em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  background: linear-gradient(to bottom,
    #ffffff 0%,
    #ffffff 10%,
    #edf9ff 25%,
    #bfeaff 44%,
    #6fd2ff 64%,
    #20b9ff 82%,
    #009fe8 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  text-shadow:
    0 0 1px rgba(255,255,255,.12),
    0 0 8px rgba(0,169,244,.15) !important;
}


/* Match the three main action buttons to the approved gallery pills. */
.hero-actions .cta,
.contact .cta {
  border:1.5px solid rgba(85,199,255,.62) !important;
  background:rgba(7,10,14,.84) !important;
  background-clip:border-box !important;
  -webkit-background-clip:border-box !important;
  -webkit-text-fill-color:initial !important;
  color:inherit !important;
  box-shadow:
    inset 0 0 14px rgba(85,199,255,.08),
    0 0 14px rgba(0,169,244,.10) !important;
}

/* Use the SAME visible gradient/font treatment as .art-card figcaption span. */
.hero-actions .cta span,
.contact .cta span {
  display:inline-block !important;
  font-family:"Montserrat","Noto Sans Display","Avenir Next","Century Gothic","Helvetica Neue",Arial,sans-serif !important;
  font-weight:400 !important;
  letter-spacing:.14em !important;
  line-height:1 !important;
  background:linear-gradient(to bottom,
    #ffffff 0%,
    #ffffff 10%,
    #edf9ff 25%,
    #bfeaff 44%,
    #6fd2ff 64%,
    #20b9ff 82%,
    #009fe8 100%) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  color:transparent !important;
  text-shadow:
    0 0 1px rgba(255,255,255,.12),
    0 0 8px rgba(0,169,244,.15) !important;
}

.hero-actions .cta:hover,
.hero-actions .cta:focus-visible,
.contact .cta:hover,
.contact .cta:focus-visible {
  border-color:rgba(85,199,255,.78) !important;
  box-shadow:
    inset 0 0 14px rgba(85,199,255,.10),
    0 0 16px rgba(0,169,244,.13) !important;
}

/* V11: lock every major page headline to the exact approved logo fade.
   One vertical ramp per visible line/word prevents any sideways color shift. */
:root {
  --approved-logo-fade: linear-gradient(to bottom, #eef9ff 0%, #00a9f4 100%);
}

h1,
h2,
.page-title,
.hero h1,
.hero h1.image-headline,
.section-title,
.section-title.image-headline,
.contact h2,
.contact h2.image-headline,
.image-heading,
.gallery-title,
.process-title.text-heading,
.hero-preview-match .hero-main-line,
.split-fade-headline .headline-line,
.per-word-fade .fade-word {
  background: var(--approved-logo-fade) !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

/* Container headings use their child text layers for the fade. */
.hero-preview-match,
.split-fade-headline,
.per-word-fade {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  color: inherit !important;
}

/* Gallery category-pill labels: same exact fade as the approved logo. */
.filter span {
  display: inline-block;
  background: var(--approved-logo-fade) !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

/* Gallery archive description: match the approved logo/headline fade. */
.gallery-intro {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  color: inherit !important;
}

.gallery-intro span {
  display: inline-block;
  line-height: 1.05;
  background: linear-gradient(to bottom,
    #ffffff 0%,
    #ffffff 28%,
    #eef9ff 52%,
    #9ee3ff 70%,
    #42c6fb 84%,
    #00a9f4 100%) !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}