/* Translucent surfaces and red highlights, inspired by the supplied reference. */
:root { --glass-border: rgba(250,210,226,.23); --accent-glow: rgba(216,28,79,.28); }
.preview-cover, .work-card .work-visual .preview-video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
}
.preview-cover { z-index: 0; }
.work-card .work-visual .preview-video { z-index: 1; opacity: 0; transition: opacity .3s ease; }
.work-card .work-visual .preview-video.is-previewing { opacity: 1; }
.touch-hint { display: inline; }
.hover-hint { display: none; }
@media (hover: hover) and (pointer: fine) {
  .touch-hint { display: none; }
  .hover-hint { display: inline; }
  .work-card .work-visual {
    transform-origin: center;
    transition: transform .68s cubic-bezier(.33,0,.2,1), box-shadow .68s ease, border-color .55s ease;
  }
  .work-card:hover { z-index: 3; }
  .work-open:hover .work-visual {
    transform: translateY(-2px) scale(1.015);
    box-shadow: 0 14px 30px -14px rgba(0,0,0,.6), 0 0 18px rgba(143,20,48,.1);
    border-color: rgba(237,52,87,.3);
  }
}
@media (prefers-reduced-motion: reduce) {
  .work-card .work-visual, .work-open:hover .work-visual { transform: none; transition: none; }
}
.hero-grid {
  background-image: radial-gradient(circle, rgba(255,152,181,.62) 1px, transparent 1.2px);
  background-size: 147px 157px;
  opacity: .08;
}
.site-header nav {
  background: linear-gradient(135deg,rgba(255,255,255,.075),rgba(78,20,42,.07));
  border-color: var(--glass-border);
  -webkit-backdrop-filter: blur(16px) saturate(145%);
  backdrop-filter: blur(16px) saturate(145%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07),0 12px 35px rgba(0,0,0,.1);
}
.header-contact {
  background: linear-gradient(145deg,#fff,#f1dce5);
  box-shadow: inset 0 1px 0 #fff,0 5px 25px rgba(0,0,0,.15);
  transition: transform .25s,box-shadow .25s;
}
.header-contact:hover { transform: translateY(-2px); box-shadow: 0 10px 28px var(--accent-glow); }
.hero-accent { color: #f03058; }
.button { border-radius: 999px; padding-inline: 25px; }
.hero-actions .button-light, .contact-actions .button-light {
  color: #fff;
  background: linear-gradient(130deg,#ef2053,#c61643);
  border-color: rgba(255,152,181,.38);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.24),0 10px 35px rgba(197,22,67,.24);
}
.hero-actions .button-light:hover, .contact-actions .button-light:hover { background: linear-gradient(130deg,#f53765,#d81c4c); box-shadow: inset 0 1px 1px rgba(255,255,255,.26),0 15px 45px rgba(221,25,76,.35); }
.button-outline {
  border-color: var(--glass-border);
  background: linear-gradient(140deg,rgba(255,255,255,.08),rgba(255,255,255,.025));
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.serif-accent { font-family: inherit; font-style: normal; font-weight: 600; color: #ed3457; letter-spacing: -.055em; }
.filter {
  border-color: rgba(255,255,255,.18);
  background: linear-gradient(135deg,rgba(255,255,255,.045),rgba(66,21,42,.09));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}
.filter.active { color: #1b1118; background: linear-gradient(130deg,#fff,#ead7e0); border-color: rgba(255,255,255,.7); }
.work-card {
  padding: 10px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  background: linear-gradient(155deg,rgba(255,255,255,.055),rgba(116,31,65,.04));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035),0 16px 36px rgba(0,0,0,.12);
  transition: border-color .55s ease,background .55s ease;
}
.work-card:hover { border-color: rgba(236,83,124,.4); background: linear-gradient(155deg,rgba(255,255,255,.065),rgba(116,31,65,.09)); }
.work-card .work-visual { border-radius: 11px; border-color: rgba(255,255,255,.08); }
.work-info { padding: 15px 5px 3px; }
.play-mark { border-radius: 50%; border-color: rgba(255,255,255,.4); background: rgba(27,15,24,.4); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: transform .6s cubic-bezier(.33,0,.2,1),background .5s ease,border-color .5s ease; }
.work-open:hover .play-mark { transform: scale(1.03); }
.duration { border-radius: 999px; background: rgba(19,12,17,.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.service-row:hover { background: linear-gradient(90deg,transparent,rgba(116,31,65,.06),transparent); }
.faq-list details[open] summary { color: #f08ea6; }
.video-dialog { background: rgba(19,11,18,.94); border-color: var(--glass-border); border-radius: 19px; box-shadow: inset 0 1px 0 rgba(255,255,255,.1),0 40px 100px #000; }
.close-dialog { background: rgba(255,255,255,.055); border-color: var(--glass-border); }
.floating-contact {
  background: linear-gradient(145deg,rgba(255,255,255,.97),rgba(243,217,229,.9));
  border-color: rgba(255,255,255,.5);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 #fff,0 8px 30px rgba(162,22,63,.28);
}
.floating-contact:hover,.floating-contact:focus-visible { background: #fff; }
@media(max-width:760px) {
  .work-card { padding: 7px; border-radius: 14px; }
  .work-card .work-visual { border-radius: 8px; }
  .work-info { padding: 13px 3px 3px; }
  .hero-actions .button { padding-inline: 21px; }
}
@media(prefers-reduced-motion:reduce) {
  .header-contact,.work-card { transition: none; }
}