/* ===== Framek-like Hero (no Elementor) — FULL WIDTH VIDEO ===== */

:root{
  --hero-max: 1200px;
  --pad-x: 24px;
  --text: #fff;
  --text-dim:#e8e8e8;
  --rule:#ffffff26;
  --overlay-top: rgba(0,0,0,.55);
  --overlay-bot: rgba(0,0,0,.35);
  --chip-bg: rgba(255,255,255,.08);
  --chip-bg-hover: rgba(255,255,255,.16);
  --chip-btn: #ffffff;
  --chip-btn-fg:#111111;
  --star:#ff3b3b;
}

.hero-flex .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body {max-width: 100vw; overflow-x: hidden;}

*{box-sizing:border-box}

/* Hero shell */
.hero-video {
  position: relative;
  background: #000;
  min-height: 100vh;
  margin-top: -145px;
  overflow: hidden;
}

/* If you also use .hero elsewhere, keep its base rules */
.hero {
  position: relative;
  min-height: 95vh;
  display: flex;
  align-items: center;
  color: var(--text);
  overflow: hidden;
  font-family: var(--font);
  background: #000;
}

/* Foreground layout */
.hero-flex {
  display: flex;
  position: absolute;
  bottom: 13%;
  width: 100%;
  color: #fff;
  z-index: 2;                    /* above overlay/video */
}
.hero-flex > * {
  flex: 1;
  min-width: 0;
}

.hero--boxed > .hero__inner{
  width:100%;
  max-width:var(--hero-max);
  margin:0 auto;
  padding: clamp(96px, 16vh, 220px) var(--pad-x);
  position:relative;
  z-index:2;
}

/* Video background layer */
.hero__bg{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;           /* non-interactive like a background */
  opacity: 0.6;                  /* your dimming */
}

/* COVER the section with a 16:9 iframe, centered */
.hero__bg-embed{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  border:0;
  pointer-events:none;
  /* default to width-fit for wider viewports */
  width:100vw;
  height:56.25vw;                /* 9/16 of width */
}

/* Viewport WIDER than 16:9 → fit width (above already) */
@media (min-aspect-ratio: 16/9){
  .hero__bg-embed{
    width:100vw;
    height:56.25vw;
  }
}

/* Viewport TALLER than 16:9 → fit height */
@media (max-aspect-ratio: 16/9){
  .hero__bg-embed{
    width:177.78vh;              /* 16/9 of height */
    height:100vh;
  }
}

/* dark overlay top->bottom (on the hero-video section) */
.hero-video[data-bg="video"]::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;                     /* sits above video, below content */
  background: linear-gradient(0deg, var(--overlay-bot), var(--overlay-top));
}

/* headings: huge, stacked, very tight */
.heading{
  z-index: 2;                    /* above overlay/video */
  position: relative;
  height: 90vh;
  display: flex;
  align-items: center;
}
.heading__title {
text-transform: inherit !important;
  line-height: 1;
  color: #fff;
  text-align: center;
  margin: 0 auto !important;
}

/* divider */
.hero__rule{
  border:0; height:1px;
  background: var(--rule);
  margin: clamp(20px, 3vh, 36px) 0 clamp(10px, 2vh, 24px);
}

/* paragraph */
.hero__subtext{
  max-width: 780px;
  color: var(--text-dim);
  font-weight: 400;
  font-size: clamp(16px, 2.1vw, 20px);
  line-height: 1.7;
}

/* rating chip bottom-right, floating inside hero */
.rating-cta{
  position:absolute;
  right: max(var(--pad-x), calc((100vw - var(--hero-max))/2 + var(--pad-x)));
  bottom: 20px;
  display:flex; align-items:center; gap:16px;
  background: var(--chip-bg);
  backdrop-filter: blur(6px);
  color: inherit;
  text-decoration:none;
  padding: 14px 14px 14px 18px;
  border-radius: 999px;
  transition: background .2s ease, transform .2s ease;
  z-index:2;
}
.rating-cta:hover{ background: var(--chip-bg-hover); transform: translateY(-2px); }

.rating-cta__meta{ display:flex; flex-direction:column; gap:6px; }
.rating-cta__eyebrow{
  font-size: 16px; font-weight:700; letter-spacing:.12em;
  opacity:.9;
}
.rating{ display:flex; align-items:center; gap:10px; }
.rating__value{ font-size:14px; font-weight:700; }
.rating__stars{ display:inline-flex; gap:4px; }
.star{ width:18px; height:18px; position:relative; display:inline-block; }
.star::before{
  content:"★"; position:absolute; inset:0;
  display:grid; place-items:center;
  font-size:16px; line-height:18px;
  color: rgba(255,255,255,.3);
}
.star[data-filled="true"]::after{
  content:"★"; position:absolute; inset:0;
  display:grid; place-items:center;
  font-size:16px; line-height:18px;
  color: var(--star);
}

/* small round arrow button */
.rating-cta__btn{
  width:36px; height:36px; border-radius:999px;
  display:grid; place-items:center;
  background: var(--chip-btn);
  color: var(--chip-btn-fg);
  flex: 0 0 auto;
}

/* responsiveness */
@media (max-width:1024px){
  .hero{ min-height: 82vh; }
  .rating-cta{ gap:12px; padding:12px 12px 12px 16px; }
}
@media (max-width:767px){
  .hero--boxed > .hero__inner{ padding-top: 120px; padding-bottom: 120px; }
  .rating-cta{
    right: var(--pad-x);
    bottom: 24px;
  }
}

/* ---------------- Drawer shell (unchanged behavior, tidied) ---------------- */

.reviews-drawer { display: block; }

.project-post-thumbnail .video-container, .project-post-thumbnail img {
  opacity: 0.6;
}

/* Keep the drawer in the DOM for smooth transitions; disable interactions when hidden */
.reviews-drawer {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
}
.reviews-drawer[aria-hidden="false"] {
  pointer-events: auto; /* clickable only when visible */
}

/* Overlay fades */
.reviews-drawer__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(1px);
  opacity: 0;
  transition: opacity .25s ease;
}
.reviews-drawer[data-open="true"] .reviews-drawer__overlay { opacity: 1; }
.reviews-drawer[data-closing="true"] .reviews-drawer__overlay { opacity: 0; }

/* Panel slides from the RIGHT */
.reviews-drawer__panel {
  position: absolute;
  top: 1%;
  right: 1%;
  height: 97%;
  width: min(480px, 100%);
  background: #fff;
  box-shadow: -8px 0 24px rgba(0,0,0,.15);
  display: flex;
  flex-direction: column;
  border-radius: 15px;

  transform: translateX(100%);
  transition: transform .28s ease;
}
.reviews-drawer[data-open="true"] .reviews-drawer__panel   { transform: translateX(0); }
.reviews-drawer[data-closing="true"] .reviews-drawer__panel{ transform: translateX(100%); }

/* Structure / cosmetics */
.reviews-drawer__header,
.reviews-drawer__footer { padding:16px 20px; border-bottom:1px solid #eee; }
.reviews-drawer__footer { border-top:1px solid #eee; border-bottom:0; margin-top:auto; }
.reviews-drawer__title  { margin:0; font-size:20px; line-height:1.2; }
.reviews-drawer__close  { background:none; border:0; font-size:28px; line-height:1; cursor:pointer; }

.reviews-drawer__body   { padding:12px 20px; overflow-y:auto; max-height:calc(100% - 220px); }
.reviews-list           { list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.review-card            { border:1px solid #eee; border-radius:12px; padding:14px; }
.review-card__meta      { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.review-card__avatar    { width:32px; height:32px; border-radius:50%; background:#f2f2f2; overflow:hidden; }
.review-card__name      { font-weight:600; }
.review-card__rating    { font-size:14px; color:#555; }
.review-card__text      { margin:8px 0 0; }
.reviews-drawer__loading{ padding:8px 0; }
.reviews-drawer__error  { color:#b00020; padding:8px 0; }
.reviews-drawer__attribution { display:inline-flex; align-items:center; font-weight:600; }

/* Reduced motion: skip transitions */
@media (prefers-reduced-motion: reduce) {
  .reviews-drawer__overlay { transition: none !important; }
  .reviews-drawer__panel   { transition: none !important; }
}




@media (max-width: 767px) {
	
   .hero-flex.container {
    flex-direction: column !important;
    padding: 0px !important;
    max-width: 82vw !important;
    flex-wrap: wrap;
  }
	
	.hero-video {
  min-height: 95vh !important;
  margin-top: -85px !important;
}
	
	.hero__subtext {
  text-align: center;
}
	
.rating-cta {position: relative !important;right: 0;
  bottom: 0px; justify-content: center;}
	
}