/* Wallcraft contact page — phone image + text wash */

.contact-layout{
  align-items:stretch;
}

/* 80% image / 20% hours */
.contact-panel{
  min-height:620px;
  padding:0;
  overflow:hidden;
  display:grid;
  grid-template-rows:minmax(0,4fr) minmax(118px,1fr);
  background:var(--ink);
  color:#fff;
}

.contact-phone-image{
  min-height:0;
  overflow:hidden;
  position:relative;
}

.contact-phone-image::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(
    180deg,
    transparent 62%,
    rgba(21,21,19,.12) 100%
  );
}

.contact-phone-image img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
  transition:transform 1.1s var(--ease);
}

.contact-panel:hover .contact-phone-image img{
  transform:scale(1.035);
}

.contact-hours{
  padding:20px 27px 22px;
  display:grid;
  grid-template-columns:1fr auto;
  grid-template-rows:auto 1fr 1fr;
  gap:5px 24px;
  align-items:center;
  background:var(--ink);
}

.contact-hours .eyebrow{
  grid-column:1/-1;
  color:rgba(255,255,255,.52);
  margin-bottom:2px;
}

.contact-hours p{
  display:contents;
}

.contact-hours strong,
.contact-hours span{
  font-size:.82rem;
}

.contact-hours strong{
  font-weight:650;
}

.contact-hours p>span{
  text-align:right;
  color:rgba(255,255,255,.68);
  font-variant-numeric:tabular-nums;
}


/* ---------------------------------------------------------
   Hero title — one continuous liquid flow
   --------------------------------------------------------- */

.contact-transform-title{
  display:grid;
  width:min(100%,1050px);
  max-width:100%;
  margin-top:.12em;
  line-height:.96;
}

/*
  The upper phrase may wrap onto more than one visual row.
  The JS treats the whole upper block as one continuous container,
  so the liquid front does not restart at a line break.
*/
.contact-transform-line{
  position:relative;
  display:grid;
  width:100%;

  /*
    Extra room around the glyphs prevents serif terminals and italic
    descenders from being clipped.
  */
  padding:.05em .045em .16em;
  margin:-.05em -.045em -.16em;
}

.contact-transform-line > span{
  grid-area:1 / 1;
  display:block;
}

/* Permanent black outline. */
.contact-outline-text{
  color:transparent;
  -webkit-text-stroke:1.45px var(--ink);
  text-stroke:1.45px var(--ink);
}

.contact-outline-text em{
  color:transparent;
  -webkit-text-stroke:1.45px var(--ink);
  text-stroke:1.45px var(--ink);
}


/* ---------------------------------------------------------
   Water layers controlled by ONE requestAnimationFrame timeline
   --------------------------------------------------------- */

/*
  The CodePen reference gets its liquid feel from overlapping shapes:
  one stronger layer and one softer semi-transparent layer moving with
  slightly different radii/phase. We mimic that idea inside the letters.
*/
.contact-flow-text,
.contact-solid-text{
  position:relative;
  color:var(--ink);
  will-change:clip-path;
  transform:translateZ(0);
  backface-visibility:hidden;
}

.contact-flow-soft,
.contact-solid-soft{
  z-index:2;
  color:rgba(21,21,19,.28);
  -webkit-text-stroke:.12px rgba(21,21,19,.28);
  text-stroke:.12px rgba(21,21,19,.28);
}

.contact-flow-main,
.contact-solid-main{
  z-index:3;
  color:var(--ink);
  -webkit-text-stroke:.32px var(--ink);
  text-stroke:.32px var(--ink);
}

/*
  Both upper layers are temporary moving bodies.
  JS updates the polygons every frame.
*/
.contact-flow-text{
  clip-path:polygon(0 0,0 0,0 0);
  -webkit-clip-path:polygon(0 0,0 0,0 0);
}

/*
  Both lower layers start empty.
  The softer wave runs slightly ahead; the main black wave catches it.
*/
.contact-solid-text{
  clip-path:polygon(0 0,0 0,0 0);
  -webkit-clip-path:polygon(0 0,0 0,0 0);
}

/*
  As soon as the lower phrase is full, remove its clip permanently.
  The upper liquid is allowed to keep moving/draining after this point.
*/
.contact-transform-title.lower-is-full
.contact-transform-line-bottom
.contact-outline-text{
  opacity:0;
}

.contact-transform-title.lower-is-full
.contact-solid-main{
  clip-path:none!important;
  -webkit-clip-path:none!important;
  will-change:auto;
}

/* Final cleanup after the trailing water edge has left the upper phrase. */
.contact-transform-title.is-complete
.contact-flow-text,
.contact-transform-title.is-complete
.contact-solid-soft{
  display:none;
}

/*
  Final state:
    upper phrase = outline only
    lower phrase = solid black
*/

@media(max-width:1080px){
  .contact-panel{
    min-height:560px;
  }
}

@media(max-width:780px){
  .contact-panel{
    min-height:500px;
    grid-template-rows:minmax(0,4fr) minmax(110px,1fr);
  }

  .contact-hours{
    padding:18px 22px 20px;
  }

  .contact-wash-title{
    width:auto;
  }
}

@media(prefers-reduced-motion:reduce){
  .contact-flow-text,
  .contact-solid-soft{
    display:none!important;
  }

  .contact-transform-line-bottom .contact-outline-text{
    opacity:0;
  }

  .contact-solid-main{
    clip-path:none!important;
    -webkit-clip-path:none!important;
    will-change:auto!important;
  }

  .contact-phone-image img{
    transition:none;
  }
}


/* Contact form human verification */
.turnstile-field{display:grid;gap:8px;padding-top:4px}
.turnstile-field small{color:var(--muted);font-size:.68rem}