.tfw-hero, .tfw-hero *{ box-sizing:border-box; }
.tfw-hero a{ color:inherit; text-decoration:none; }
.tfw-hero .hero{
  padding: 18px 40px 0;
  max-width: 1280px;
  margin: 0 auto 20px;
  position: relative;
}
.tfw-hero .hero-media{
  position:relative;
  border-radius: 20px;
  overflow:hidden;
  height: 0;
  padding-top: 48.4375%;
}
.tfw-hero .hero-media img{ position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; object-position: 30% 45%; display:block; }
.tfw-hero .bg-video{ position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; }
.tfw-hero .bg-video-embed{ position:absolute; top:0; left:0; width:100%; height:100%; overflow:hidden; pointer-events:none; }
.tfw-hero .bg-video-embed iframe{
  position:absolute; top:50%; left:50%; width:177.78vh; min-width:100%; height:100%; min-height:56.25vw;
  transform:translate(-50%,-50%); border:0;
}
.tfw-hero .hero-scrim{
  position:absolute; top:0; left:0; right:0; bottom:0;
  background: rgba(0,0,0,.4);
}
.tfw-hero .hero-content{
  position:absolute; top:18px; left:0; right:0; bottom:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:40px;
  text-align:center; padding: 0 20px;
}
.tfw-hero .hero-content h1{
  font-family: 'Playfair Display', Georgia, serif;
  color:#FFFEFB; font-size: clamp(24px, 3.6vw, 48px); line-height:1.2;
  font-weight:600; text-transform:uppercase; letter-spacing:.01em; max-width:720px;
  margin:0;
}
.tfw-hero .hero-subtitle{
  display:none; color: rgba(255,254,251,.9); font-size:16px; font-weight:300; line-height:1.4; max-width:340px;
  font-family: 'Bricolage Grotesque','Inter',sans-serif;
}
.tfw-hero .arrow{ display:block; flex-shrink:0; width:14px; height:14px; transition: transform .25s ease; }
/* Figma button: gold fill, 15px × 32px padding, 16px / 500 text, 1px
   tracking, square corners. Every value is overridable in Style → Button. */
.tfw-hero a.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding: 15px 32px;
  font-family: 'Bricolage Grotesque','Inter',sans-serif;
  font-size: 16px; font-weight: 500; line-height:24px; letter-spacing: 1px;
  text-transform: none; text-decoration:none;
  border-radius: 0; border:0;
  background:#C99E43; color:#FFFEFB;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease, transform .25s ease;
  white-space: nowrap; cursor:pointer;
}
.tfw-hero a.btn:hover{ background:#B08A38; color:#FFFEFB; }
.tfw-hero a.btn:hover .arrow{ transform: translateX(3px); }

@media (max-width: 720px){
  .tfw-hero .hero{ padding:0; margin: 0 0 20px; max-width:none; }
  /* !important is needed on these two: Elementor writes this widget's
     own "Corner Radius" / "Aspect Ratio" style controls out to a
     per-instance rule (e.g. ".elementor-381 .elementor-element-xxx
     .hero-media") that has no media query and higher specificity than
     a plain ".tfw-hero .hero-media" selector, so without !important
     that single always-on rule silently wins at every width and this
     whole mobile block never actually applies — which is exactly what
     was clipping the heading/button off the top and bottom of the
     hero image on real phones (confirmed live: computed padding-top
     stayed 48.4375%, the desktop value, at 375px width). */
  .tfw-hero .hero-media{ padding-top: 89.74% !important; border-radius:0 !important; }
  .tfw-hero .hero-scrim{ background: rgba(0,0,0,.5); }
  .tfw-hero .hero-content{ padding: 0 20px; top:0; gap:16px; }
  .tfw-hero .hero-content h1{ font-size:26px; text-transform:none; }
  .tfw-hero .hero-subtitle{ display:block; }
  .tfw-hero .hero-content a.btn{ width:100%; justify-content:center; }
}