/* Light is composited behind content; the portrait remains unobstructed. */
.hero-section, .contact-copy { position: relative; isolation: isolate; }
.atmosphere { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1; }
.hero-section { background: radial-gradient(ellipse at 85% 32%, #16314b, transparent 62%), #0b192d; }
.hero { perspective: 1600px; }
.hero-visual { transform: perspective(1600px) translateY(var(--float-y, 0px)) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); background: #12263bea; box-shadow: 0 24px 70px #030d1c38; }
.hero-visual::after { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: linear-gradient(var(--edge-angle, 135deg), #caf5ff88, #7bcaed12 26%, #7bcaed08 62%, #75a6df55); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; pointer-events: none; }
.hero-image img { transform: none; }
.experience-badge { transform: translateY(var(--badge-y, 0px)) rotate(3deg); }
.guarantee-badge { transform: translateY(var(--guarantee-y, 0px)); }
.hero h1 span { background: linear-gradient(110deg, #83d7ef 12%, #d4f7ff 44%, #7ac7e9 68%, #9cbbec 90%); background-size: 210% 100%; background-position: var(--text-light, 0%) center; background-clip: text; -webkit-background-clip: text; color: transparent; }
.hero .button:not(.button-ghost) { box-shadow: 0 8px 26px #2878ef25; }
.hero .button .icon { transition: transform .35s cubic-bezier(.2,.8,.2,1); }
@media(hover: hover) { .hero .button:hover .icon { transform: translate(2px, -2px); } }
.motion-enter { animation: cinematic-enter 1.3s cubic-bezier(.16, 1, .3, 1) both; animation-delay: var(--enter-delay, 0s); }
@keyframes cinematic-enter { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
.hero-note { flex-wrap: wrap; }
.portrait-slot { width: calc(100% - 14px); max-width: 440px; justify-self: end; }
.portrait-photo { position: relative; }
.portrait-slot .hero-image { height: auto; aspect-ratio: 1 / 1; }
.portrait-slot .hero-image > picture > img { display: block; position: absolute; inset: 0; object-position: 50% 25%; }
.portrait-slot .hero-image::after { background: linear-gradient(0deg, #07162833, transparent 28%); }
.portrait-caption { padding: 20px 10px 34px; }
.portrait-caption>span { color: #9fb8cf; font-size: 10px; letter-spacing: .5px; }
.portrait-caption b { display: block; margin: 3px 0 5px; color: #fff; font-size: 28px; line-height: 1.2; letter-spacing: -.7px; }
.portrait-caption p { margin: 0; color: #c0d0df; font-size: 12px; }
.portrait-slot .experience-badge { top: auto; bottom: 173px; right: -18px; background: linear-gradient(135deg, #65b7ff40, #2878ef52); border-color: #c5e7ff66; box-shadow: 0 12px 30px #06102138, inset 0 1px 0 #ffffff1f; animation: experience-badge-float 9.5s ease-in-out -2.5s infinite; }
@keyframes experience-badge-float {
  0%, 100% { transform: translate3d(0, 2px, 0) rotate(3deg); }
  50% { transform: translate3d(1px, -2px, 0) rotate(2deg); }
}
.portrait-slot .guarantee-badge { bottom: -30px; background: linear-gradient(135deg, #ffffffe0, #e3f3ffd1); border-color: #ffffff80; }
.portrait-slot .experience-badge, .portrait-slot .guarantee-badge { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.contact-copy { padding: 24px 0; }
.contact-copy .atmosphere { opacity: .7; }
@media(max-width: 900px) and (min-width: 701px) {
  .portrait-caption { padding: 17px 5px 34px; }
  .portrait-caption p { font-size: 10px; }
}
@media(max-width: 700px) {
  .portrait-slot { justify-self: center; width: calc(100% - 36px); margin-inline: 0; }
  .portrait-slot .hero-image { aspect-ratio: 4 / 4.5; }
  .portrait-slot .experience-badge { bottom: 173px; right: -15px; padding: 14px; }
  .portrait-caption { padding: 18px 8px 34px; }
  .portrait-caption b { font-size: 26px; }
  .portrait-caption p { font-size: 11px; }
  .contact-copy { padding: 0; }
}
@media(prefers-reduced-motion: reduce) {
  .motion-enter { animation: none; }
  .hero-visual, .experience-badge, .guarantee-badge { transform: none; }
}

/* A separate snow layer is masked around the face in the renderer. */
.portrait-snow { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; }
.experience-badge, .guarantee-badge { z-index: 4; }
.hero-visual { background: #12263bf5; }
.contact-copy .atmosphere { opacity: .78; }

/* The plaque sits outside the photo's clipping layer, with room at the mobile edge. */
.portrait-slot .portrait-plaque { display: block; position: absolute; z-index: 5; inset: auto auto 12px clamp(-56px, -4vw, -38px); width: 64%; height: auto; opacity: .86; filter: drop-shadow(0 12px 16px #06142659); pointer-events: none; transform: rotate(-2deg); animation: portrait-plaque-float 8s ease-in-out infinite; }
@keyframes portrait-plaque-float {
  0%, 100% { transform: translate3d(0, 1px, 0) rotate(-2deg); }
  50% { transform: translate3d(3px, -6px, 0) rotate(-.5deg); }
}
.portrait-note { position: absolute; z-index: 5; left: 16px; bottom: 25px; padding: 14px 17px 13px; border: 1px solid #ffffff80; border-radius: 5px 17px 17px 17px; background: linear-gradient(135deg, #ffffffb8, #dff3ff99); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #173b54; box-shadow: 0 8px 24px #07182f26, inset 0 1px 0 #ffffff66; transform: rotate(-4deg); animation: portrait-note-float 8s ease-in-out infinite; pointer-events: none; }
@keyframes portrait-note-float {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-4deg); }
  50% { transform: translate3d(2px, -6px, 0) rotate(-2.5deg); }
}
.portrait-note-label { display: block; font-size: 6px; font-weight: 600; letter-spacing: 1px; color: #54758b; }
.portrait-note strong { display: block; margin-top: 5px; font-size: 18px; line-height: 1.2; letter-spacing: -.5px; font-weight: 700; }
.portrait-note-sign { display: block; margin-top: 5px; font-size: 10px; color: #537386; }
.portrait-note-arrow { position: absolute; left: 80px; bottom: calc(100% - 11px); width: 110px; height: 140px; overflow: visible; transform: rotate(4deg); stroke: #d9f7ff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.portrait-note-arrow .arrow-shadow { stroke: #0a263960; stroke-width: 5.5; }
.portrait-note-arrow .arrow-tip { fill: none; }
@media (max-width: 900px) {
  .portrait-slot .portrait-plaque { width: 66%; left: -30px; bottom: 10px; }
  .portrait-note { left: 12px; bottom: 21px; padding: 11px 12px; }
  .portrait-note-label { font-size: 5px; letter-spacing: .6px; }
  .portrait-note strong { font-size: 15px; }
  .portrait-note-sign { font-size: 8px; }
  .portrait-note-arrow { left: 62px; width: 93px; height: 120px; }
}
@media (max-width: 700px) {
  .portrait-slot .portrait-plaque { width: 70%; left: -38px; bottom: 8px; }
}
@media(prefers-reduced-motion: reduce) {
  .portrait-slot .portrait-plaque { animation: none; transform: rotate(-2deg); }
  .portrait-slot .experience-badge { animation: none; transform: rotate(3deg); }
}