/* Panoramic opening and editorial media, September 2026. */
.hero.hero--showcase { display: flex; position: relative; min-height: min(900px, 100svh); padding: 155px 0 110px; }
.hero--showcase .hero-scene { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 0; z-index: -1; }
.hero--showcase .hero-scene img { object-position: center; animation: none; }
.hero--showcase .hero-scene::after { background: linear-gradient(90deg,rgba(21,19,15,.88),rgba(21,19,15,.58) 40%,rgba(21,19,15,.06) 76%),linear-gradient(0deg,rgba(21,19,15,.48),transparent 35%); }
.hero--showcase .hero-inner { width: min(1240px,90%); margin-inline: auto; }
.hero--showcase .hero-content { max-width: 620px; }
.hero--showcase h1, html[data-theme="light"] .hero--showcase h1 { color: #fffaf0; font-size: clamp(48px,5.5vw,80px); }
.hero--showcase .accent, .hero--showcase .badge { color: #e8cb97; }
.hero--showcase .hero-sub { color: #eee7da; }
.hero--showcase .hero-proof { color: #eee7da; border-color: #ffffff38; }
.hero--showcase .btn-ghost, html[data-theme="light"] .hero--showcase .btn-ghost { color: #fffaf0; border-color: #ffffff70; background: #19160f55; }
.hero--showcase .btn-primary, html[data-theme="light"] .hero--showcase .btn-primary { background: #dbc18e; color: #231d13; border-color: #dbc18e; }
.hero--showcase .hero-scene figcaption { left: max(5%,calc((100% - 1240px)/2)); right: auto; bottom: 28px; }
.media-story { margin: 38px 0; }
.media-story__frame { position: relative; overflow: hidden; border-radius: 12px; background: #eee7dc; aspect-ratio: 16/9; }
.media-story__frame video { width: 100%; height: 100%; display: block; object-fit: cover; }
.media-story figcaption { padding-top: 14px; font-size: 12px; line-height: 1.7; color: var(--muted); }
.media-story figcaption strong { display: block; color: var(--text); font-size: 20px; margin-bottom: 5px; }
.media-story figcaption small { display: block; margin-top: 6px; }
.media-story__status { font-size: 12px; color: var(--muted); margin-top: 8px; }
/* Detail hero images keep their native portrait composition in a dedicated panel. */
.service-detail-hero .service-detail-hero-grid { position: relative; min-height: 680px; display: grid; grid-template-columns: minmax(0,.9fr) minmax(420px,1.1fr); gap: clamp(32px,5vw,88px); align-items: center; }
.service-detail-hero .service-detail-copy { width: auto; padding: 92px 0 62px; }
.service-detail-hero .service-detail-media { position: relative; inset: auto; z-index: 1; width: 100%; min-height: 610px; height: min(700px,78vh); border: 1px solid rgba(212,175,122,.22); border-radius: 14px; box-shadow: 0 35px 90px rgba(0,0,0,.32); }
.service-detail-hero .service-detail-media > img { object-position: center; filter: saturate(.95) contrast(1.03) brightness(.98); }
.service-detail-hero .service-detail-media::before { background: linear-gradient(0deg,rgba(9,8,6,.78),transparent 42%); }
.service-detail-hero .service-detail-media::after { top: auto; bottom: 0; left: 0; right: auto; width: 125px; background: linear-gradient(90deg,var(--accent),transparent); }
@media(max-width:900px) {
  .service-detail-hero .service-detail-hero-grid { min-height: 0; display: grid; grid-template-columns: 1fr; gap: 24px; }
  .service-detail-hero .service-detail-copy { padding: 32px 0 0; }
  .service-detail-hero .service-detail-media { min-height: 420px; height: min(610px,112vw); }
}
@media(max-width: 720px) {
  .hero.hero--showcase { min-height: 780px; min-height: max(740px,100svh); padding: 140px 0 95px; align-items: flex-end; }
  .hero--showcase .hero-scene { height: 100%; border-radius: 0; }
  .hero--showcase .hero-scene img { object-position: 63% center; }
  .hero--showcase .hero-scene::after { background: linear-gradient(0deg,rgba(21,19,15,.95),rgba(21,19,15,.75) 50%,rgba(21,19,15,.05) 100%); }
  .hero--showcase h1, html[data-theme="light"] .hero--showcase h1 { font-size: clamp(42px,10vw,62px); }
  .hero--showcase .hero-scene figcaption { right: auto; left: 5%; bottom: 22px; font-size: 11px; }
  .hero--showcase .hero-sub { font-size: 14px; }
}