/* ═══════════════════════════════════════════════════════════════
   Maison South — the entry surface's media frame.
   Lifted unchanged from the original hero so the product's opening
   image, its letterbox and its AI disclosure read exactly as before.
   The disclosure is permanent and lives ON the media.
   ═══════════════════════════════════════════════════════════════ */
.frame{
  position:relative;width:100%;
  aspect-ratio:2.39/1;min-height:470px;max-height:76vh;
  overflow:hidden;background:#02060A;
  border-top:1px solid rgba(201,227,236,.07);border-bottom:1px solid rgba(201,227,236,.07);
}
.slot{position:absolute;inset:0;overflow:hidden;transition:filter .55s ease}
.hero-render{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 54%;display:block;
  transform-origin:62% 54%;will-change:transform;backface-visibility:hidden;
  animation:heroDrift 28s linear infinite alternate;
  animation-fill-mode:both;
}
/* cinematic drift — a slow push toward the house (centre-right of frame) */
@keyframes heroDrift{
  0%{transform:translate3d(0,0,0) scale(1.02)}
  100%{transform:translate3d(-1.8%,-0.9%,0) scale(1.11)}
}
/* dusk-light shimmer — a faint warm wash that breathes so the windows read as lit */
.slot::after{
  content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;
  background:
    radial-gradient(38% 46% at 63% 58%, rgba(255,176,96,.55) 0%, rgba(255,150,70,.18) 42%, rgba(0,0,0,0) 72%),
    linear-gradient(180deg, rgba(255,140,80,.12) 0%, rgba(0,0,0,0) 46%);
  opacity:.05;animation:duskShimmer 14s ease-in-out infinite alternate;
}
@keyframes duskShimmer{0%{opacity:.04}50%{opacity:.11}100%{opacity:.07}}
@media (prefers-reduced-motion: reduce){
  .hero-render{animation:none;transform:none;will-change:auto}
  .slot::after{animation:none;opacity:.06}
}

/* soundscape control — opt-in, silent until pressed */
.sndbtn{
  position:absolute;z-index:18;right:clamp(20px,3.6vw,46px);bottom:clamp(44px,5.4vw,64px);
  display:inline-flex;align-items:center;gap:8px;padding:7px 12px 6px;
  border:1px solid rgba(201,227,236,.34);border-radius:2px;cursor:pointer;
  background:linear-gradient(180deg,rgba(6,16,20,.86),rgba(3,8,11,.8));
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  font-family:var(--title);font-size:9px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(214,232,237,.94);white-space:nowrap;transition:color .2s,border-color .2s;
}
.sndbtn::before{content:"";width:5px;height:5px;border-radius:50%;background:rgba(147,196,176,.55);flex:0 0 auto;transition:background .3s,box-shadow .3s}
.sndbtn:hover{color:#EAF4F7;border-color:rgba(201,227,236,.6)}
.sndbtn:focus-visible{outline:1px solid rgba(201,227,236,.7);outline-offset:2px}
.sndbtn[aria-pressed="true"]{color:#EAF4F7;border-color:rgba(147,196,176,.6)}
.sndbtn[aria-pressed="true"]::before{background:var(--pale);box-shadow:0 0 0 3px rgba(147,196,176,.18);animation:sndPulse 2.4s ease-in-out infinite}
.sndbtn[data-busy="1"]{opacity:.7;pointer-events:none}
@keyframes sndPulse{0%,100%{box-shadow:0 0 0 3px rgba(147,196,176,.14)}50%{box-shadow:0 0 0 6px rgba(147,196,176,.04)}}
@media (prefers-reduced-motion: reduce){.sndbtn[aria-pressed="true"]::before{animation:none}}
@media (min-width:701px){.titleblock{right:clamp(240px,24vw,320px)}}
.grain{position:absolute;inset:0;width:100%;height:100%;opacity:.05;mix-blend-mode:overlay;pointer-events:none}
.vig{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(130% 104% at 46% 42%, rgba(0,0,0,0) 34%, rgba(0,0,0,.42) 74%, rgba(0,0,0,.8) 100%),
    linear-gradient(180deg, rgba(1,4,7,.7) 0%, rgba(1,4,7,.12) 18%, rgba(1,4,7,0) 38%, rgba(1,4,7,.38) 62%, rgba(1,4,7,.9) 86%, rgba(1,4,7,.97) 100%);
}
.bar{position:absolute;left:0;right:0;height:13px;background:#000;opacity:.94;pointer-events:none;z-index:8}
.bar.t{top:0} .bar.b{bottom:0}
.fc{position:absolute;z-index:16;width:15px;height:15px;border:1px solid rgba(201,227,236,.34);pointer-events:none}
.fc.tl{top:22px;left:16px;border-right:0;border-bottom:0}
.fc.tr{top:22px;right:16px;border-left:0;border-bottom:0}
.fc.bl{bottom:30px;left:16px;border-right:0;border-top:0}
.fc.br{bottom:30px;right:16px;border-left:0;border-top:0}

/* provenance / AI disclosure — permanent, on the media itself */
.prov{position:absolute;z-index:20;top:32px;right:clamp(20px,3.6vw,46px);width:auto;max-width:min(400px,44vw);text-align:right}
.provbar{
  display:inline-flex;align-items:center;gap:8px;padding:6px 11px 5px;max-width:100%;
  border:1px solid rgba(201,227,236,.34);border-radius:2px;
  background:linear-gradient(180deg,rgba(6,16,20,.86),rgba(3,8,11,.8));
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
}
.provbar .dt{width:5px;height:5px;border-radius:50%;background:var(--pale);flex:0 0 auto;box-shadow:0 0 0 3px rgba(147,196,176,.16)}
.provbar .lb{font-family:var(--title);font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:rgba(214,232,237,.94);white-space:nowrap}
.provbar .sp{width:1px;height:13px;background:rgba(201,227,236,.24);flex:0 0 auto}
.provbar button{font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--moon-dim);padding:2px 1px;white-space:nowrap;transition:color .2s}
.provbar button:hover{color:#EAF4F7}
.provbar button[aria-pressed="true"],.provbar button[aria-expanded="true"]{color:#EAF4F7;text-decoration:underline;text-underline-offset:3px}
.provsheet{
  margin-top:8px;text-align:left;border:1px solid rgba(201,227,236,.2);border-radius:2px;
  background:linear-gradient(180deg,rgba(7,18,22,.96),rgba(3,8,11,.95));
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);padding:12px 13px 11px;
}
.provsheet[hidden]{display:none}
.provsheet h4{margin:0 0 9px;font-family:var(--title);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--moon);font-weight:400}
.provsheet dl{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 12px}
.provsheet dt{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);white-space:nowrap;padding-top:2px}
.provsheet dd{margin:0;font-size:11.5px;line-height:1.45;color:rgba(208,223,228,.9);text-wrap:pretty}
.provsheet .fine{margin:10px 0 0;padding-top:9px;border-top:1px solid var(--line-2);font-size:10.5px;line-height:1.5;color:rgba(150,178,186,.84);text-wrap:pretty}

.titleblock{
  position:absolute;z-index:12;left:clamp(20px,3.6vw,46px);right:clamp(20px,3.6vw,46px);
  bottom:clamp(44px,5.4vw,64px);display:flex;align-items:flex-end;gap:clamp(13px,2vw,22px);
}
.titleblock::before{
  content:"";position:absolute;z-index:-1;left:-6%;right:-6%;top:-26px;bottom:-40px;
  background:radial-gradient(64% 132% at 26% 62%, rgba(1,5,8,.84) 0%, rgba(1,5,8,.62) 46%, rgba(1,5,8,0) 80%);
  pointer-events:none;
}
.titleblock .txt{min-width:0}
.titleblock .kicker{font-family:var(--title);font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--moon-dim);margin-bottom:9px;text-shadow:0 1px 14px rgba(0,0,0,.9)}
.titleblock h1{
  margin:0;font-family:var(--title);font-weight:400;font-size:clamp(31px,4.6vw,58px);
  line-height:1;letter-spacing:.03em;color:var(--ivory);text-shadow:0 2px 34px rgba(0,0,0,.85);
}
.titleblock .subline{
  margin:11px 0 0;font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(14.5px,1.55vw,19px);line-height:1.38;letter-spacing:.01em;
  color:rgba(228,236,235,.9);max-width:48ch;text-wrap:pretty;text-shadow:0 1px 16px rgba(0,0,0,.85);
}
.titleblock .subline em{font-style:italic;color:var(--moon);font-weight:400}
.titleblock .facts{
  margin:11px 0 0;display:flex;flex-wrap:wrap;gap:3px 14px;
  font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.07em;text-transform:uppercase;
  font-variant-numeric:tabular-nums;color:rgba(188,206,210,.84);text-shadow:0 1px 12px rgba(0,0,0,.8);
}
.titleblock .facts i{color:rgba(147,196,176,.95);font-style:normal}

@media (max-width:900px){
  .frame{aspect-ratio:16/10;min-height:0;max-height:none}
  .prov{width:min(300px,44vw)}
}
@media (max-width:700px){
  .frame{aspect-ratio:auto;height:520px}
  .fc{width:11px;height:11px}
  .fc.tl,.fc.tr{top:20px}
  .fc.bl,.fc.br{bottom:26px}
  .prov{top:26px;right:16px;left:16px;width:auto;max-width:none;text-align:left}
  .provbar{display:flex;flex-wrap:nowrap;padding:5px 10px 4px;gap:8px;width:100%;justify-content:flex-start;align-items:center}
  .provbar .lb{font-size:8px;letter-spacing:.14em}
  .provbar button{font-size:8.5px}
  .provsheet{padding:11px 12px}
  .provsheet dl{grid-template-columns:minmax(0,1fr);gap:2px}
  .provsheet dt{padding-top:6px}
  .vig{background:
    radial-gradient(150% 92% at 46% 34%, rgba(0,0,0,0) 30%, rgba(0,0,0,.4) 72%, rgba(0,0,0,.8) 100%),
    linear-gradient(180deg, rgba(1,4,7,.82) 0%, rgba(1,4,7,.3) 22%, rgba(1,4,7,.04) 38%,
      rgba(1,4,7,.52) 58%, rgba(1,4,7,.9) 76%, rgba(1,4,7,.97) 100%)}
  .sndbtn{top:26px;bottom:auto;right:16px;padding:6px 10px 5px;font-size:8px;letter-spacing:.16em}
  .titleblock{bottom:38px;gap:13px;align-items:flex-end}
  .titleblock::before{left:-10%;right:-10%;top:-22px;bottom:-30px;
    background:linear-gradient(180deg, rgba(1,5,8,0) 0%, rgba(1,5,8,.82) 28%, rgba(1,5,8,.93) 100%)}
  .titleblock h1{font-size:33px}
  .titleblock .subline{font-size:13px;margin-top:9px;max-width:none}
  .titleblock .facts{font-size:10px;gap:2px 10px;margin-top:9px}
}