/* ===========================================================================
   CINEMA — the redesign polish layer. Larger, calmer, more filmic:
   generous scale and air, film sections with scrolling video, refined chrome.
   Loads after site/pages/brand and overrides them where the eye needed it.
   =========================================================================== */

/* ---------- global rhythm: more air, bigger voice ---------- */
.obs .wrap{padding-block:clamp(96px,12vw,180px)}
.obs h2{font-size:clamp(34px,5vw,72px);line-height:1.08}
.obs .lede{font-size:clamp(17px,1.9vw,22px);max-width:58ch}
.kick{font-size:11.5px;letter-spacing:.34em}
.rule{width:76px;height:1px;margin-block:26px 30px;
  background:linear-gradient(to left,var(--gold),transparent)}

/* nav: quieter glass */
.nav{backdrop-filter:blur(14px) saturate(1.1)}

/* ---------- sv: the section film ---------- */
.sv{position:relative;margin:clamp(48px,6vw,88px) 0 0;padding:0;overflow:hidden;
  aspect-ratio:16/9;max-height:82vh;width:100%;
  background-size:cover;background-position:center;
  border:1px solid var(--gold-hair)}
.sv video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .8s var(--ease-lux)}
.sv[data-on="1"] video{opacity:1}
.sv .sv-cap{position:absolute;inset-inline:0;inset-block-end:0;z-index:2;
  display:flex;align-items:baseline;gap:14px;padding:20px 24px;
  background:linear-gradient(to top,rgba(11,11,9,.72),transparent);
  font-family:var(--label);font-size:11px;letter-spacing:.22em;color:var(--off)}
.sv .sv-cap b{color:var(--gold);font-weight:700}

/* full-bleed film band that escapes the wrap */
.sv.bleed{width:100vw;max-height:none;aspect-ratio:auto;height:min(86vh,720px);
  margin-inline-start:calc(50% - 50vw)}
.sv.bleed .sv-title{position:absolute;inset:0;z-index:2;display:grid;place-content:center;
  text-align:center;padding:24px;pointer-events:none;
  background:radial-gradient(62% 58% at 50% 55%,rgba(11,11,9,.66),rgba(11,11,9,.18) 78%)}
.sv.bleed .sv-title .kick{color:var(--gold-bright);text-shadow:0 1px 14px rgba(0,0,0,.8)}
.sv.bleed .sv-title h3{margin:14px 0 0;font-family:var(--display);font-weight:300;
  color:#fff;font-size:clamp(30px,4.6vw,60px);letter-spacing:-.01em;
  text-shadow:0 2px 10px rgba(0,0,0,.9),0 2px 34px rgba(0,0,0,.85)}

/* ---------- project film cards on the homepage ---------- */
.films{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));
  gap:clamp(16px,2vw,28px);margin-top:clamp(40px,5vw,64px)}
.films .sv{margin:0;aspect-ratio:4/3;max-height:none}
.films .film-meta{position:absolute;inset-inline:0;inset-block-end:0;z-index:2;
  padding:22px 24px;background:linear-gradient(to top,rgba(11,11,9,.86),transparent)}
.films .film-meta .kick{display:block;color:var(--gold-bright)}
.films .film-meta h3{margin:8px 0 0;font-family:var(--display);font-weight:300;
  font-size:clamp(22px,2.4vw,30px);color:#fff}
.films .film-meta p{margin:6px 0 0;font-weight:300;font-size:14px;color:rgba(242,238,230,.78)}
.films a.filmlink{position:absolute;inset:0;z-index:3}
.films .sv:hover{border-color:var(--gold)}

/* ---------- environment teaser band ---------- */
.envteaser{position:relative;display:grid;place-content:center;text-align:center;
  min-height:min(72vh,620px);overflow:hidden;border:1px solid var(--gold-hair);
  margin-top:clamp(48px,6vw,88px);background-size:cover;background-position:center}
.envteaser::before{content:"";position:absolute;inset:0;
  background:radial-gradient(60% 60% at 50% 60%,rgba(11,11,9,.5),rgba(11,11,9,.14) 75%)}
.envteaser>*{position:relative;z-index:1}
.envteaser h3{margin:16px 0 0;font-family:var(--display);font-weight:300;color:#fff;
  font-size:clamp(28px,4vw,52px);text-shadow:0 2px 24px rgba(0,0,0,.8)}
.envteaser .btn{margin-top:30px;justify-self:center}

@media (max-width:760px){
  .sv.bleed{height:min(64vh,520px)}
}

@media (prefers-reduced-motion:reduce){
  .sv video{display:none}
}

/* ---------- lifestyle feature cards (floating over a render) ---------- */
.feat-stage{position:relative;margin-top:clamp(46px,6vw,80px)}
.feat-cards{position:relative;z-index:3;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.6vw,22px);
  padding-inline:clamp(4px,4vw,72px)}
.feat{position:relative;margin:0;background:rgba(20,19,15,.66);backdrop-filter:blur(14px);
  border:1px solid var(--gold-hair);border-radius:14px;overflow:visible;
  padding:10px 10px 14px;transition:transform .5s var(--ease-lux),border-color .5s var(--ease-lux)}
.feat:hover{transform:translateY(-6px);border-color:var(--gold)}
.feat img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px;display:block}
.feat figcaption{padding:12px 6px 0;text-align:center}
.feat figcaption b{display:block;font-family:var(--display);font-weight:400;
  font-size:clamp(14px,1.4vw,18px);color:var(--off);letter-spacing:.01em}
.feat figcaption span{display:block;margin-top:4px;font-family:var(--label);
  font-size:10px;letter-spacing:.14em;color:var(--gold)}
.feat .stem{position:absolute;inset-inline-start:50%;top:100%;width:1px;
  height:clamp(38px,7vw,110px);background:linear-gradient(to bottom,rgba(209,169,66,.85),rgba(209,169,66,0));
  pointer-events:none}
.feat .stem::before{content:"";position:absolute;top:-3px;inset-inline-start:-3px;width:7px;height:7px;
  border-radius:50%;background:var(--gold)}
.feat:nth-child(1){transform:translateY(clamp(10px,2vw,28px))}
.feat:nth-child(1):hover{transform:translateY(clamp(4px,1.6vw,22px))}
.feat:nth-child(4){transform:translateY(clamp(10px,2vw,28px))}
.feat:nth-child(4):hover{transform:translateY(clamp(4px,1.6vw,22px))}
.feat-bg{position:relative;z-index:1;display:block;width:100%;height:min(58vh,520px);
  object-fit:cover;object-position:center 65%;border:1px solid var(--gold-hair);
  margin-top:calc(-1*clamp(20px,3.6vw,52px));border-radius:4px}
.sec-light .feat{background:rgba(255,253,247,.8);border-color:rgba(11,11,9,.14)}
.sec-light .feat figcaption b{color:var(--black)}
.sec-light .feat figcaption span{color:var(--gold-ink)}

/* stat variant: numbers instead of thumbs */
.feat.stat{padding:clamp(16px,2vw,26px) 12px}
.feat.stat .num{display:block;text-align:center;font-family:var(--display);font-weight:300;
  font-size:clamp(30px,3.6vw,52px);color:var(--gold);letter-spacing:-.02em}

@media (max-width:820px){
  .feat-cards{grid-template-columns:repeat(2,minmax(0,1fr));padding-inline:2px}
  .feat .stem{display:none}
  .feat:nth-child(1),.feat:nth-child(4){transform:none}
  .feat-bg{margin-top:14px;height:44vh}
}

/* ---------- Yasmin: presenter video cards (click to play, with sound) ---------- */
.present-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));
  gap:clamp(16px,2.4vw,30px);margin-top:clamp(40px,5vw,64px);align-items:start}
.present{position:relative;margin:0;aspect-ratio:9/16;overflow:hidden;border-radius:18px;
  border:1px solid var(--gold-hair);background:#0E0D0B center/cover no-repeat;
  transition:border-color .4s var(--ease-lux),transform .5s var(--ease-lux)}
.present:hover{border-color:var(--gold);transform:translateY(-4px)}
.present video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.present .pp{position:absolute;inset:0;z-index:3;display:grid;place-content:center;gap:14px;
  background:linear-gradient(to top,rgba(11,11,9,.66),rgba(11,11,9,.08) 55%);
  border:0;cursor:pointer;color:var(--off);text-align:center;padding:18px}
.present .pp .ring2{width:64px;height:64px;margin-inline:auto;border-radius:50%;
  border:1px solid var(--gold);display:grid;place-items:center;
  background:rgba(11,11,9,.5);backdrop-filter:blur(6px);
  transition:background .35s var(--ease-lux)}
.present .pp:hover .ring2{background:var(--gold)}
.present .pp:hover .ring2 svg{fill:var(--black)}
.present .pp .ring2 svg{width:22px;height:22px;fill:var(--gold);margin-inline-start:3px;
  transition:fill .35s var(--ease-lux)}
.present .pp b{font-family:var(--display);font-weight:300;font-size:clamp(17px,1.6vw,21px)}
.present .pp span{font-family:var(--label);font-size:10px;letter-spacing:.2em;color:var(--gold)}
.present[data-playing="1"] .pp{display:none}
.present .sound-note{position:absolute;inset-inline:0;inset-block-end:0;z-index:2;padding:12px 14px;
  font-family:var(--label);font-size:9.5px;letter-spacing:.1em;color:rgba(242,238,230,.65);
  background:linear-gradient(to top,rgba(11,11,9,.7),transparent);text-align:center}

/* audit fixes: light sections keep readable secondary text */
.sec-light .drawer .foot,.sec-light p.foot{color:#5A554C}
.sec-light .person .since,.sec-light p.since{color:#5A554C}

/* management portrait */
.person .mug{width:150px;height:190px;object-fit:cover;object-position:top;
  border:1px solid var(--gold-hair);border-radius:4px;flex:none}
.sec-light .person .mug{border-color:rgba(11,11,9,.18)}

/* ebook library */
.ebooks{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));
  gap:clamp(16px,2vw,28px);margin-top:clamp(40px,5vw,64px)}
.ebook{display:block;border:1px solid var(--gold-hair);text-decoration:none;
  background:#111009;transition:all .4s var(--ease-lux)}
.ebook:hover{border-color:var(--gold);transform:translateY(-4px)}
.ebook img{display:block;width:100%;aspect-ratio:sqrt(2)/1;object-fit:cover;background:#fff}
.ebook .eb-meta{display:block;padding:16px 18px}
.ebook .eb-meta b{display:block;font-family:var(--display);font-weight:400;
  font-size:15.5px;color:var(--off);line-height:1.4}
.ebook .eb-meta i{display:block;margin-top:6px;font-style:normal;font-family:var(--label);
  font-size:10px;letter-spacing:.16em;color:var(--gold)}