:root { --light:#f8f5ee; --accent:#d8b882; --dark:#171713; --ease:600ms cubic-bezier(.22,1,.36,1); }
*,*::before,*::after { box-sizing:border-box; }
html,body { min-height:100%; margin:0; }
body { color:var(--light); background:var(--dark); font-family:"DM Sans",sans-serif; }
.experience { position:relative; display:flex; min-height:100svh; overflow:hidden; }
.video-panel { position:relative; display:flex; flex:1 1 50%; min-width:0; align-items:flex-end; isolation:isolate; overflow:hidden; transition:flex-grow var(--ease); }
.video-panel--left { background:linear-gradient(135deg,#575747,#22271f); }
.video-panel--right { background:linear-gradient(135deg,#765f4f,#27231f); }
.video-panel + .video-panel { border-left:1px solid rgb(255 255 255 / 25%); }
.video-panel__media,.video-panel__overlay { position:absolute; inset:0; width:100%; height:100%; }
.video-panel__media { z-index:-2; object-fit:cover; transform:scale(1.025); transition:transform 1.2s cubic-bezier(.22,1,.36,1); }
.video-panel__overlay { z-index:-1; background:linear-gradient(180deg,rgb(10 10 8 / 12%) 0%,rgb(10 10 8 / 25%) 45%,rgb(10 10 8 / 78%) 100%); }
.video-panel__content { width:100%; padding:clamp(2rem,5vw,5rem); }
.video-panel__eyebrow { display:block; margin-bottom:1.1rem; color:var(--accent); font-size:.68rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase; }
h1,h2 { max-width:10ch; margin:0 0 2rem; font:600 clamp(2.6rem,5.4vw,6rem)/.92 "Playfair Display",serif; letter-spacing:-.045em; }
h1 em,h2 em { font-weight:500; }
.video-panel__link { display:inline-flex; gap:.75rem; align-items:center; color:inherit; font-size:.76rem; font-weight:600; letter-spacing:.14em; text-decoration:none; text-transform:uppercase; }
.video-panel__link::after { position:absolute; inset:0; content:""; }
.video-panel__link span { transition:transform 250ms ease; }
.video-panel__link:hover span { transform:translate(.2rem,-.2rem); }
.brand { position:absolute; z-index:2; top:2rem; left:50%; display:grid; width:2.75rem; height:2.75rem; border:1px solid rgb(255 255 255 / 50%); border-radius:50%; place-items:center; font:600 1.4rem/1 "Playfair Display",serif; transform:translateX(-50%); backdrop-filter:blur(8px); }
.brand.brand--principal { position:absolute; top:clamp(1.5rem,5vh,3.5rem); left:50%; width:clamp(11rem,16vw,17rem); max-width:calc(100% - 3rem); height:auto; border:0; border-radius:0; transform:translateX(-50%); backdrop-filter:none; pointer-events:none; }
.brand.brand--principal::before { position:absolute; z-index:-1; inset:-34% -24%; content:""; background:rgb(248 245 238 / 42%); -webkit-backdrop-filter:blur(16px) saturate(120%); backdrop-filter:blur(16px) saturate(120%); -webkit-mask-image:radial-gradient(closest-side,#000 55%,rgb(0 0 0 / 60%) 75%,transparent 100%); mask-image:radial-gradient(closest-side,#000 55%,rgb(0 0 0 / 60%) 75%,transparent 100%); }
.brand--principal img { position:relative; display:block; width:100%; height:auto; }
.media-control { position:absolute; z-index:3; right:1.5rem; bottom:1.5rem; display:grid; width:2.75rem; height:2.75rem; padding:0; border:1px solid rgb(255 255 255 / 45%); border-radius:50%; color:var(--light); background:rgb(18 18 15 / 25%); cursor:pointer; place-items:center; backdrop-filter:blur(8px); }
.media-control:focus-visible,.video-panel__link:focus-visible { outline:2px solid var(--light); outline-offset:4px; }
@media (hover:hover) and (min-width:769px) {
  .experience:has(.video-panel:hover) .video-panel:not(:hover) { flex-grow:.84; }
  .experience:has(.video-panel:hover) .video-panel:hover { flex-grow:1.16; }
  .video-panel:hover .video-panel__media { transform:scale(1.07); }
}
@media (max-width:768px) {
  .experience { flex-direction:column; }
  .video-panel { min-height:50svh; }
  .video-panel + .video-panel { border-top:1px solid rgb(255 255 255 / 25%); border-left:0; }
  .video-panel__content { padding:4.5rem 1.5rem 1.5rem; }
  .video-panel__eyebrow { margin-bottom:.6rem; }
  h1,h2 { margin-bottom:.8rem; font-size:clamp(1.4rem,6.6vw,2.2rem); }
  .brand { position:fixed; top:50%; left:1.25rem; transform:translateY(-50%); }
  .brand.brand--principal { position:absolute; top:50%; left:50%; width:min(54vw,15rem); transform:translate(-50%,-50%); }
  .video-panel--left { align-items:flex-start; }
  .video-panel--left .video-panel__content { padding:1.5rem 1.5rem 4.5rem; }
  .media-control { position:fixed; right:1.25rem; bottom:calc(1.25rem + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { transition-duration:.01ms !important; } }