/* SkyHi v2 (index2 only) — readability over bright footage.
   A soft charcoal scrim sits behind each copy block on its text side. It lives inside .copy,
   so it fades and moves with the copy automatically. */
.copy{isolation:isolate}
.copy::before{content:"";position:absolute;inset:-80px 0;z-index:-1;pointer-events:none}
.copy-left::before{background:linear-gradient(90deg, rgba(22,23,26,.62) 0%, rgba(22,23,26,.42) 38%, rgba(22,23,26,0) 72%)}
.copy-right::before{background:linear-gradient(270deg, rgba(22,23,26,.62) 0%, rgba(22,23,26,.42) 38%, rgba(22,23,26,0) 72%)}
.copy-center::before{background:radial-gradient(ellipse 60% 55% at 50% 50%, rgba(22,23,26,.55) 0%, rgba(22,23,26,.3) 55%, rgba(22,23,26,0) 100%)}
.copy-hero::before{background:linear-gradient(0deg, rgba(22,23,26,.6) 0%, rgba(22,23,26,.35) 45%, rgba(22,23,26,0) 80%)}
/* stronger lettering shadows */
h1,h2{text-shadow:0 2px 6px rgba(0,0,0,.35), 0 4px 28px rgba(0,0,0,.45)}
.lede,.copy p:not(.eyebrow){text-shadow:0 1px 3px rgba(0,0,0,.45), 0 1px 14px rgba(0,0,0,.4)}
.eyebrow{text-shadow:0 1px 8px rgba(0,0,0,.45)}
@media (max-width: 860px){
  /* on phones the copy stacks full width: use a stronger, bottom-weighted scrim */
  .copy-left::before,.copy-right::before{background:linear-gradient(90deg, rgba(22,23,26,.6) 0%, rgba(22,23,26,.45) 60%, rgba(22,23,26,.2) 100%)}
}

/* Let's talk: a subtle shaded panel behind the intro copy so white text reads over the golden-hour footage
   (matches the form panel alongside it, just a touch lighter) */
.contact-intro{padding:clamp(20px, 3vw, 36px);border-radius:10px;background:rgba(28,29,32,.5);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(245,245,245,.10)}
.contact-intro p{color:var(--white)}
.contact-intro h2{text-shadow:0 2px 6px rgba(0,0,0,.3)}

/* Selected projects: two showcase projects for now */
@media (min-width: 861px){ .projects-grid{grid-template-columns:repeat(2,1fr)} }