/* Humming: one real-world operating image, with the copy kept deliberately quiet. */
.humming-feature.humming-experience{
  display:grid;
  grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
  min-height:610px;
  overflow:hidden;
  background:#fff;
  color:var(--ink);
  border:1px solid #d9e1ec;
  border-radius:6px;
  box-shadow:0 26px 72px #17325812;
}

.humming-experience .humming-content{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
  padding:3.5rem 3.15rem;
  background:linear-gradient(145deg,#fff 0%,#f7faff 100%);
}

.humming-experience .project-eyebrow{margin-bottom:2rem;color:#5b6e89}
.humming-title-row{display:flex;align-items:center;gap:1rem}
.humming-title-row>img{width:64px;height:auto;filter:drop-shadow(0 9px 16px #0a9bea2b)}
.humming-experience .humming-content h3{font-size:clamp(2.8rem,4.25vw,4.25rem);font-weight:600;letter-spacing:-.07em;color:#10203a}
.humming-experience .project-role{color:#657085}
.humming-experience .humming-description{max-width:34rem;margin-top:1.65rem;font-size:1.1rem;line-height:1.7;color:#263348}
.humming-experience .humming-description-secondary{margin-top:.9rem;font-size:1rem;color:#5a6678}
.humming-experience .humming-focus{margin-top:1rem;color:#546177}
.humming-experience .project-link{align-self:flex-start;margin-top:1.8rem;background:linear-gradient(105deg,#7559ed 0%,#158ce8 52%,#10bfae 100%);color:#fff;box-shadow:0 12px 28px #188ed32b;transition:transform .2s ease,box-shadow .2s ease,filter .2s ease}
.humming-experience .project-link:hover{background:linear-gradient(105deg,#6b4ce8 0%,#087fd9 52%,#08ae9e 100%);color:#fff;box-shadow:0 15px 34px #168dd63d;filter:saturate(1.08);transform:translateY(-2px)}

.humming-photo{
  position:relative;
  isolation:isolate;
  min-width:0;
  min-height:610px;
  overflow:hidden;
  background:#b8c7d5;
}
.humming-photo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:51% center;filter:saturate(.94) contrast(1.04)}
.humming-photo::before{content:'';position:absolute;z-index:1;inset:0;pointer-events:none;background:linear-gradient(90deg,#08182a30 0%,transparent 24%,transparent 76%,#08182a1a 100%),linear-gradient(180deg,#ffffff12,transparent 35%,#0615252e)}
.humming-photo::after{
  content:'';
  position:absolute;
  z-index:2;
  inset:8% 0 0 51%;
  pointer-events:none;
  opacity:.16;
  background:repeating-linear-gradient(92deg,transparent 0 18px,#e9fbff60 20px 21px,transparent 23px 47px),linear-gradient(180deg,transparent,#e5fbff42 42%,transparent 76%);
  background-size:100% 150%,100% 180%;
  mix-blend-mode:screen;
  filter:blur(.35px);
  animation:humming-water-runnels 5.5s linear infinite;
}

@keyframes humming-water-runnels{from{background-position:0 -22%,0 -40%}to{background-position:0 118%,0 100%}}

@media(max-width:1000px){
  .humming-feature.humming-experience{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
  .humming-experience .humming-content{padding:2.75rem 2.4rem}
  .humming-photo>img{object-position:49% center}
}

@media(max-width:800px){
  .humming-feature.humming-experience{grid-template-columns:1fr;min-height:0}
  .humming-experience .humming-content{padding:2.5rem;border-bottom:1px solid #d9e1ec}
  .humming-photo{min-height:0;aspect-ratio:16/11}
  .humming-photo>img{object-position:center 49%}
}

@media(max-width:680px){
  .humming-experience .humming-content{padding:1.85rem 1.5rem 2rem}
  .humming-title-row{gap:.8rem}
  .humming-title-row>img{width:56px}
  .humming-experience .humming-content h3{font-size:2.8rem}
  .humming-experience .humming-description{font-size:1.05rem}
  .humming-photo{aspect-ratio:4/3}
  .humming-photo>img{object-position:48% center}
}

@media(max-width:420px){.humming-photo{aspect-ratio:1/1}.humming-photo>img{object-position:46% center}}
@media(prefers-reduced-motion:reduce){.humming-photo::after{animation:none}}