/* Bounded scene: photo, lights and objects share one layout box. */
main,.hero-main,.hero-copy,.hero-visual,.work-groups,.work-group,.about-layout,
.about-content,.contact-content,.contact-details,.contact-meta > * { min-width: 0; }
main { width: 100%; }
.hero { isolation: isolate; overflow: visible; min-height: 0; }
.hero .hero-main {
  grid-template-columns: minmax(0,.98fr) minmax(0,1.02fr);
  gap: clamp(24px,3vw,44px); min-height: 0; padding-block: 40px 32px;
  align-items: center; z-index: auto;
}
.hero .hero-copy { position: relative; width: 100%; max-width: 550px; padding: 0; z-index: 3; transform: none; }
.hero .hero-main h1 { font-size: clamp(36px,4.6vw,62px); line-height: 1.06; text-shadow: 0 2px 26px rgba(11,9,11,.2); }
.hero .hero-summary {
  background: linear-gradient(140deg,rgba(39,27,34,.52),rgba(22,17,22,.28));
  border-color: rgba(245,231,237,.15);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05),0 16px 40px rgba(0,0,0,.09);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.hero-visual {
  position: relative; inset: auto; width: 100%; max-width: 650px; height: auto;
  aspect-ratio: auto; margin: 0; display: block; justify-self: center; align-self: center;
  z-index: 1; pointer-events: none;
}
.hero-visual::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at 65% 42%,rgba(var(--scene-glow),.25),rgba(var(--scene-glow),.09) 43%,transparent 73%);
}
.hero-portrait {
  position: relative; width: 100%; height: auto; max-width: none; max-height: none;
  aspect-ratio: 1 / 1.04; margin: 0; isolation: isolate; z-index: 1;
}
.hero-portrait::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 34% 42% at 76% 42%,rgba(241,49,86,.29),rgba(var(--scene-glow),.12) 46%,transparent 76%),
    radial-gradient(ellipse 35% 46% at 26% 56%,rgba(var(--scene-glow),.24),rgba(var(--scene-glow),.07) 48%,transparent 78%),
    radial-gradient(ellipse 58% 28% at 50% 82%,rgba(var(--scene-glow),.1),transparent 76%);
}
.hero-portrait::after { content: none; }
.portrait-window {
  position: absolute; inset: 0; overflow: clip; isolation: isolate;
  /* Crop only the empty area above the hair; fade only the lower shirt. */
  -webkit-mask-image: linear-gradient(#000 0%,#000 69%,rgba(0,0,0,.97) 76%,rgba(0,0,0,.78) 84%,rgba(0,0,0,.35) 93%,transparent 100%);
  mask-image: linear-gradient(#000 0%,#000 69%,rgba(0,0,0,.97) 76%,rgba(0,0,0,.78) 84%,rgba(0,0,0,.35) 93%,transparent 100%);
}
.hero-portrait .portrait-source {
  position: absolute; inset: auto 0 0; display: block; width: 100%; height: auto; max-width: 100%;
  aspect-ratio: 1535 / 2048; object-fit: contain; object-position: center bottom;
  border: 0; border-radius: 0; box-shadow: none; filter: none;
  /* Only generated ALPHA is used. Every colour pixel comes from the original JPEG. */
  -webkit-mask: url("assets/jose-alpha-20261015.png") center / 100% 100% no-repeat;
  mask: url("assets/jose-alpha-20261015.png") center / 100% 100% no-repeat;
  mask-mode: alpha;
}
.scene-object { position: absolute; z-index: 2; isolation: isolate; pointer-events: none; }
.scene-object::before {
  content: ""; position: absolute; inset: -14% -9%; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse,rgba(255,101,117,.4),rgba(var(--scene-glow),.3) 27%,rgba(var(--scene-glow),.09) 48%,transparent 72%);
}
.scene-drone { width: 39%; right: 0; top: 3%; }
.hero-portrait .scene-drone img {
  position: relative; display: block; width: 100%; height: auto; max-width: 100%; aspect-ratio: 3 / 2;
  object-fit: contain; border: 0; border-radius: 0; box-shadow: none;
  -webkit-mask: none; mask: none;
  filter: drop-shadow(0 10px 9px rgba(0,0,0,.38)) drop-shadow(0 0 2px rgba(244,74,99,.14));
}
.scene-ae { width: 18%; max-width: 112px; left: 4%; top: 55%; aspect-ratio: 1; }
.scene-ae::before {
  inset: -40%;
  background: radial-gradient(ellipse at 60% 44%,rgba(255,107,132,.47),rgba(var(--scene-glow),.28) 27%,rgba(var(--scene-glow),.09) 45%,transparent 67%);
}
.ae-tile {
  position: relative; display: grid; place-items: center; width: 100%; height: 100%;
  transform: perspective(600px) rotateY(22deg) rotateZ(-10deg);
  border: 1px solid rgba(240,184,232,.65); border-radius: 20%;
  background: linear-gradient(140deg,rgba(225,180,247,.23),transparent 38%),linear-gradient(145deg,#2c245a,#0e0c31 70%);
  box-shadow: 1px 1px 0 #746080,3px 3px 0 #473048,5px 5px 0 #2b1e31,7px 7px 0 #1a1525,
    inset 1px 1px 2px rgba(255,255,255,.32),inset -2px -2px 8px rgba(0,0,0,.5),12px 19px 24px rgba(0,0,0,.28);
}
.ae-tile::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(125deg,rgba(255,240,255,.12),transparent 43%,rgba(231,44,78,.12)); }
.ae-tile > span { color: #bcb2ff; font-size: clamp(28px,4vw,58px); font-weight: 600; letter-spacing: -.07em; padding-right: .05em; text-shadow: 0 1px 0 #ddd2ff,0 3px 8px rgba(0,0,0,.4); }
.portrait-caption {
  position: absolute; z-index: 4; left: 50%; bottom: 1.5%; transform: translateX(-50%);
  width: min(440px,94%); padding: clamp(15px,2vw,22px) clamp(16px,2.4vw,28px);
  border: 1px solid rgba(255,224,232,.3); border-radius: 20px; text-align: center;
  background: linear-gradient(130deg,rgba(255,255,255,.10),rgba(51,22,34,.3) 50%,rgba(20,16,23,.56));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14),0 14px 36px rgba(0,0,0,.2),0 0 28px rgba(var(--scene-glow),.06);
  -webkit-backdrop-filter: blur(12px) saturate(115%); backdrop-filter: blur(12px) saturate(115%);
}
.portrait-caption > span { display: block; margin-bottom: 4px; color: #fff2ef; font-size: clamp(24px,2.45vw,34px); line-height: 1.15; letter-spacing: -.035em; font-weight: 600; }
.portrait-caption > strong { display: block; color: #eddce2; font-size: clamp(21px,2vw,28px); line-height: 1.25; font-weight: 500; letter-spacing: -.035em; text-wrap: balance; }
.caption-accent { white-space: nowrap; }
.hero-light { inset: 0; width: 100%; height: 100%; transform: none; background: radial-gradient(ellipse at 77% 49%,rgba(var(--scene-glow),.1),transparent 69%); }
.hero-bottom { margin-top: 12px; }
.work { padding-top: clamp(34px,4vw,56px); }
.work,.about,.services,.faq,.contact { position: relative; }
.serif-accent { color: var(--ink); }
.hero-accent,.caption-accent,#work-title .serif-accent,#about-title .serif-accent,#contact-title .serif-accent { color: #f38c9d; }
@supports (-webkit-background-clip:text) or (background-clip:text) {
  .hero-accent,.caption-accent,#work-title .serif-accent,#about-title .serif-accent,#contact-title .serif-accent {
    background: linear-gradient(108deg,#df4465 0%,#f28c9e 49%,#ffdbd2 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  }
}
.about .about-copy {
  background: linear-gradient(140deg,rgba(255,255,255,.04),rgba(34,24,30,.09)); border-color: rgba(245,231,237,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04),0 18px 45px rgba(0,0,0,.08);
}
.about-portrait img { filter: none; border-color: rgba(245,231,237,.14); box-shadow: 0 20px 55px rgba(0,0,0,.18); }
.about-portrait .portrait-badge {
  left: 18px; right: auto; bottom: 18px; transform: none; max-width: calc(100% - 36px);
  border-radius: 8px; padding: 10px 12px; font-size: 9px; line-height: 1.4; white-space: normal;
  letter-spacing: 1px; color: #e3dcdf; background: rgba(15,14,17,.76); border-color: rgba(240,229,234,.17);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.about-portrait .portrait-badge > span { flex-shrink: 0; width: 4px; height: 4px; background: #a99aa1; }
.contact .contact-card {
  background: linear-gradient(135deg,rgba(255,255,255,.035),rgba(44,22,32,.11));
  border-color: rgba(245,231,237,.13); box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.contact-meta { border-color: rgba(245,231,237,.09); }
.reel::before { opacity: .65; }
.reel-track { touch-action: pan-x pan-y pinch-zoom; overflow-anchor: none; }
.reel .work-open:hover .work-visual { transform: none; }
.reel .play-mark { opacity: 0; pointer-events: none; }
.reel .is-center .work-open:focus-visible .play-mark { opacity: 1; }
.preview-video { pointer-events: none; }
.preview-video::-webkit-media-controls,
.preview-video::-webkit-media-controls-start-playback-button,
.preview-video::-webkit-media-controls-overlay-play-button { display: none !important; -webkit-appearance: none; }
@media (hover:hover) and (pointer:fine) { .reel .is-center .work-open:hover .play-mark { opacity: 1; } }
@media (max-width:900px) {
  .hero .hero-main { grid-template-columns: minmax(0,1fr); gap: 18px; padding-block: 26px 20px; }
  .hero .hero-copy { display: contents; padding: 0; }
  .hero .hero-main h1 { font-size: clamp(32px,7.8vw,52px); margin: 0; }
  .hero-visual { position: relative; inset: auto; grid-row: 3; width: min(100%,540px); max-width: 100%; height: auto; margin: 0; aspect-ratio: auto; }
  .hero-portrait { width: 100%; height: auto; max-height: none; max-width: none; }
  .hero-copy .hero-summary,.hero-copy .hero-actions { position: relative; z-index: 3; }
  .hero .hero-summary { background: linear-gradient(140deg,rgba(35,25,32,.65),rgba(23,19,24,.48)); }
  .hero-bottom { margin-top: 14px; }
  .portrait-caption > span { font-size: clamp(25px,4.2vw,32px); }
  .portrait-caption > strong { font-size: clamp(22px,3.6vw,27px); }
  .ae-tile > span { font-size: clamp(30px,7vw,52px); }
}
@media (max-width:600px) {
  .hero .hero-main h1 { font-size: clamp(30px,8.2vw,46px); }
  .hero-visual { width: 100%; max-width: 440px; margin: 0; }
  .hero-portrait { aspect-ratio: 1 / 1.14; }
  .portrait-window { bottom: 8%; }
  .portrait-caption { width: 96%; padding: 14px 16px; border-radius: 17px; bottom: 0; }
  .portrait-caption > span { font-size: clamp(23px,6.3vw,28px); }
  .portrait-caption > strong { font-size: clamp(20px,5.5vw,25px); }
  .scene-ae { top: 49%; left: 3%; width: 17%; }
  .scene-drone { width: 40%; top: 1%; }
  .ae-tile > span { font-size: clamp(25px,7.5vw,36px); }
  .about-portrait .portrait-badge { left: 16px; bottom: 16px; max-width: calc(100% - 32px); font-size: 8px; letter-spacing: .85px; }
  .hero-actions { max-width: 100%; }
  .hero-actions .button { max-width: 100%; }
}