:root{
  --bg:#0f0f10;
  --surface:#15161a;
  --text:#f2f2f2;
  --muted:#b8b8b8;
  --accent:#caa25a;
  --wrap:1120px;
  --rad:14px;
  --gap:22px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.55 Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
a{color:var(--accent);text-decoration:none}
a:hover{opacity:.9}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 16px}

/* Header */
.site-header{position:sticky;top:0;z-index:1000;background:rgba(10,10,10,.92);border-bottom:1px solid #202226;backdrop-filter:saturate(140%) blur(8px)}
.header-inner{min-height:110px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:12px;flex-shrink:0}
.brand img{height:92px;width:auto;display:block}
.brand .word{display:none}
.nav{display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:flex-end}
.nav a{color:var(--text);text-transform:uppercase;font-size:.9rem;opacity:.95}
.nav a:hover{color:var(--accent)}
.nav .cta{padding:10px 16px;border-radius:999px;background:var(--accent);color:#111 !important;text-transform:none;font-weight:700;letter-spacing:.2px}
.nav .cta:hover{filter:brightness(0.95)}

/* Main */
main{display:block;padding:24px 0 56px}
h1{font-size:clamp(1.9rem,2.6vw,2.3rem);margin:.2rem 0 .6rem}
.lede{color:var(--muted);margin:0 0 1rem}

/* Grid utility */
.grid{display:grid;gap:var(--gap)}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.grid.cols-3{grid-template-columns:repeat(2,1fr)} .brand img{height:84px} .header-inner{min-height:100px}}
@media (max-width:560px){.grid.cols-3{grid-template-columns:1fr} .brand img{height:72px} .header-inner{min-height:88px} .nav{gap:12px}}

/* Cards & placeholders */
.card{background:var(--surface);border-radius:var(--rad);overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.06) inset, 0 8px 24px rgba(0,0,0,.28);min-height:140px}
.card .pad{padding:18px}
.placeholder{opacity:.6;border:1px dashed rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;min-height:200px}

/* Footer */
.site-footer{margin-top:24px;background:#121316;border-top:1px solid rgba(255,255,255,.08);color:var(--muted)}
.site-footer .inner{display:flex;align-items:center;justify-content:space-between;padding:16px 0}
/* CTA in sticky header (left of menu) */
.nav .cta-nav { display:inline-flex; align-items:center; margin-right:12px; }
.nav .cta-nav img { height:28px; width:auto; display:block; }

/* Work With Me page tweaks */
.module { margin: 1.25rem 0; }
.module ul { margin: .5rem 0 1rem 1.25rem; }
.btn { display:inline-block; padding:.6rem 1rem; border-radius:8px; background:#caa25a; color:#111; text-decoration:none; font-weight:700; }
.btn:hover { filter: brightness(1.05); }

/* --- CTA size bump and nav spacing tweak --- */
.nav .cta-nav img{height:56px;width:auto;}
.nav a{margin-left:0.75rem;}
@media (max-width:760px){
  .nav .cta-nav img{height:40px;}
  .nav a{margin-left:0.6rem;}
}

/* CTA visibility + sizing */
.cta-link{display:inline-flex; align-items:center; margin-left:12px}

@media (max-width:900px){
  .cta-link{display:inline-flex !important; margin-left:8px}
  header nav, .header nav, .header .nav{display:none !important}
}
/* Mobile drawer CTA optional styling */
@media (max-width:900px){
  .mobile-drawer .drawer-cta{display:flex; justify-content:center; padding:10px 0; background:transparent; border:0}
}

/* Force CTA render size */

@media (max-width:900px){
  
}

/* CTA sizing authoritative rules */
.cta-link img{height:68px !important; width:auto !important}
@media (max-width:768px){.cta-link img{height:34px !important}}

/* === Desktop-only header/nav/CTA fixes (v11) === */
@media (min-width: 901px){
  .header-inner{display:flex; align-items:center; gap:24px}
  .brand{flex:0 0 auto}
  .cta-link{flex:0 0 auto; margin-left:32px}
  .nav{flex:1 1 auto; display:flex; flex-wrap:nowrap; justify-content:flex-end; gap:16px}
  .nav a{white-space:nowrap; padding:0 .6rem}
}

@media (min-width: 901px) and (max-width: 1120px){
  .nav a{font-size:0.95rem}
}


/* Footer layout with socials (right) */
.footer .wrap, footer .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.footer-socials{
  display:flex;
  align-items:center;
  gap:12px;
}

.footer-socials img{
  width:22px;
  height:22px;
  display:block;
  filter:none;
  opacity:0.9;
  transition:transform .15s ease, opacity .15s ease;
}

.footer-socials a:hover img{ 
  transform:scale(1.06);
  opacity:1;
}

/* Ensure icons sit within footer bounds on small screens */
@media(max-width:768px){
  .footer .wrap, footer .wrap{ flex-wrap:wrap; gap:10px }
  .footer-socials{ margin-left:auto }
}


/* Footer alignment fix */
.site-footer .wrap.inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.site-footer .footer-socials{
  display:flex; align-items:center; gap:12px; margin-left:auto;
}
.site-footer .footer-socials img{
  width:22px; height:22px; display:block; opacity:.9; transition:transform .15s ease, opacity .15s ease;
}
.site-footer .footer-socials a:hover img{ transform:scale(1.06); opacity:1; }

@media(max-width:768px){
  .site-footer .wrap.inner{ flex-wrap:wrap; }
}

/* Worked With grid */
.worked-wrap{margin-top:12px}
.worked-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.worked-card{position:relative;border-radius:10px;overflow:hidden;background:#111;box-shadow:0 0 0 1px rgba(255,255,255,.06) inset}
.worked-card img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
.worked-overlay{position:absolute;left:0;right:0;bottom:0;padding:8px 10px;font-size:.95rem;line-height:1.2;color:#fff;text-align:center;background:linear-gradient(to top, rgba(0,0,0,.75), rgba(0,0,0,0))}
@media (max-width:900px){.worked-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.worked-grid{grid-template-columns:1fr}}

/* ===== Contact page ===== */
.contact-wrap{padding-top:1.25rem}
.contact-grid{display:grid;grid-template-columns:1fr 0.9fr;gap:24px;align-items:start}
@media (max-width: 900px){.contact-grid{grid-template-columns:1fr}}

.form-card{background:#141416;border:1px solid #1e1f22;border-radius:12px;padding:16px;box-shadow:0 0 0 1px rgba(255,255,255,.04) inset}
.form-card h1,.form-card h2{margin:.25rem 0 .75rem}
.form-row{display:flex;gap:12px}
.form-row .field{flex:1}
label{display:block;font-size:.9rem;margin:.25rem 0;color:#b8b8b8}
input[type="text"],input[type="email"],input[type="tel"],textarea,select{
  width:100%;background:#0f0f10;color:#f2f2f2;border:1px solid #2a2c31;border-radius:8px;
  padding:.6rem .7rem;font:inherit;outline:none
}
textarea{min-height:140px;resize:vertical}
input[type="checkbox"]{transform:scale(1.08);margin-right:.5rem}
.form-actions{display:flex;gap:12px;align-items:center;margin-top:12px}
.btn{display:inline-block;background:#caa25a;color:#0f0f10;text-decoration:none;
  font-weight:700;border-radius:999px;padding:.7rem 1.1rem;border:1px solid rgba(0,0,0,.2)}
.btn:hover{filter:brightness(1.08)}
.hint{font-size:.85rem;color:#b8b8b8;margin-top:8px}
.success,.error{margin-top:12px;font-size:.95rem}
.success{color:#89d185}.error{color:#ff6b6b}

/* Social tiles (30% bigger than footer) */
.social-tiles{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width: 640px){.social-tiles{grid-template-columns:1fr}}
.tile{display:flex;align-items:center;gap:14px;padding:16px;border-radius:12px;background:#141416;border:1px solid #1e1f22;text-decoration:none;color:#f2f2f2}
.tile:hover{box-shadow:0 0 0 1px rgba(202,162,90,.5) inset}
.tile img{width:32px;height:32px;object-fit:contain}
.tile .meta{line-height:1.2}
.tile .meta .label{font-size:.85rem;color:#b8b8b8}
.tile .meta .value{font-weight:700}

/* Ensure header stays visible above content on contact page */
.header{ z-index: 1000; }
.contact-wrap{ position: relative; z-index: 1; }

/* === Hard-pin header to stop ghosting and overlap === */
:root{ --header-h: 88px; }
@media (max-width: 768px){ :root{ --header-h: 64px; } }

body.theme{ }

.header{
  position: sticky;
  top: 0; left: 0; right: 0;
  z-index: 10000;
  background: rgba(10,10,10,.88);
  border-bottom: 1px solid #1e1f22;
  backdrop-filter: saturate(150%) blur(8px);
}

.header + .wrap{ /* extra safety if any page forgot body padding */
  padding-top: 0.01px;
}

main.wrap, .wrap.main, .content{ /* make sure main content never overlaps */
  position: relative;
  z-index: 1;
}

/* === Sticky header (final) === */
.header{
  position: sticky !important;
  top: 0;
  z-index: 10000;
  background: rgba(10,10,10,.92);
  border-bottom: 1px solid #1e1f22;
  backdrop-filter: saturate(150%) blur(8px);
  display: block;
}

/* Final header visibility lock */
.header{position:sticky;top:0;z-index:10000;background:rgba(10,10,10,.9);border-bottom:1px solid #1e1f22;backdrop-filter:saturate(150%) blur(8px)}
.mobile-nav{background:#0f0f10;border-top:1px solid #1e1f22;padding:.5rem .75rem}
.mobile-nav a{display:block;padding:.6rem 0;color:#f2f2f2;text-decoration:none}
.mobile-menu-btn{margin-left:auto;background:transparent;border:0;color:#f2f2f2;font-size:1.25rem;display:none}
@media (max-width: 860px){
  .nav{display:none}
  .mobile-menu-btn{display:inline-block}
}






@media (max-width: 800px){
  .grid.cols-3{grid-template-columns:1fr}
}


/* Integrated video styling */
.yt-thumb{display:block;width:100%;aspect-ratio:16/9;overflow:hidden;background:#000}
.yt-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.yt-thumb .play-icon{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:56px;opacity:0.85;color:#fff}
.yt-thumb:hover .play-icon{opacity:1}
/* Mobile nav button + drawer support for mobile-nav.js */
.menu-toggle{display:none; background:transparent; border:0; color:var(--text); font-size:1.25rem; margin-left:auto; cursor:pointer}
.menu-toggle span{display:inline-block; width:28px; height:20px; position:relative}
.menu-toggle span::before,.menu-toggle span::after{content:""; position:absolute; left:0; right:0; height:2px; background:currentColor}
.menu-toggle span::before{top:0}
.menu-toggle span::after{bottom:0}

nav.mobile-drawer{display:none; position:fixed; top:var(--header-h,64px); left:0; right:0; background:#0f0f10; border-bottom:1px solid #202226; z-index:999}
nav.mobile-drawer .inner{padding:12px 16px; display:flex; flex-direction:column; gap:10px}
nav.mobile-drawer a{padding:10px 4px; display:block}

@media (max-width: 860px){
  .menu-toggle{display:inline-flex; align-items:center; justify-content:center}
  nav.nav, .nav{display:none}
  nav.mobile-drawer.show{display:block}
}

/* Ensure header checkboxes remain hidden if present */
.site-header input[type="checkbox"]{display:none !important}





/* Video thumbnail fallback */
.yt-thumb{position:relative;display:block;width:100%;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#000;text-decoration:none}
.yt-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.yt-thumb .play-icon{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:56px;opacity:0.9;color:#fff}
.yt-thumb:hover .play-icon{opacity:1}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}



.hero-teaser{position:relative;max-width:var(--wrap);margin:0 auto;padding:16px}
.teaser-wrap{position:relative;overflow:hidden;border-radius:16px}
.teaser-video{display:block;width:100%;height:auto}
.teaser-cta{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  background:rgba(0,0,0,0.6);color:#fff;border:2px solid #fff;
  padding:12px 24px;font-size:1.25rem;cursor:pointer;
  text-transform:uppercase;letter-spacing:1px;border-radius:8px;
}
.teaser-cta:hover{background:rgba(255,255,255,0.1)}
.fade-out{opacity:0;transition:opacity 0.25s ease}
.fade-in{opacity:0;animation:fadeIn 0.4s forwards}
@keyframes fadeIn{to{opacity:1}}
.hero-teaser{position:relative;margin:16px 0}
.teaser-wrap{position:relative;overflow:hidden;border-radius:16px;background:#0b0c0f}
.teaser-aspect{position:relative;width:100%;}
.teaser-aspect::before{content:"";display:block;padding-top:56.25%;} /* 16:9 */
.teaser-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.teaser-cta{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  padding:14px 18px;border-radius:999px;border:1px solid rgba(255,255,255,.4);
  background:rgba(0,0,0,.35);backdrop-filter:saturate(120%) blur(2px);
  color:#fff;font-weight:700;letter-spacing:.4px;cursor:pointer
}
#teaser-container.fade-out{opacity:.2;transition:opacity .25s ease}
#teaser-container.fade-in{opacity:1;transition:opacity .35s ease}
/* iframe container reuse */
@supports (aspect-ratio: 16/9){
  .teaser-aspect::before{display:none}
  .teaser-aspect{aspect-ratio:16/9}
  }
@media (max-width:860px){
  .teaser-cta{padding:12px 14px;font-size:.95rem}
}




.hero-teaser{position:relative;margin:20px 0}

.teaser-wrap{position:relative;overflow:hidden;border-radius:16px;background:#0b0c0f}
.teaser-aspect{position:relative;width:100%}
.teaser-aspect::before{content:"";display:block;padding-top:42%} /* snappy ~2.4:1 */
.teaser-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.teaser-cta{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  padding:12px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.4);
  background:rgba(0,0,0,.35);backdrop-filter:saturate(120%) blur(2px);
  color:#fff;font-weight:700;letter-spacing:.4px;cursor:pointer
}
#teaser-container.fade-out{opacity:.2;transition:opacity .25s ease}
#teaser-container.fade-in{opacity:1;transition:opacity .35s ease}
/* iframe container reuse */
@supports (aspect-ratio: 16/9){
  .teaser-aspect::before{display:none}
  .teaser-aspect{aspect-ratio:2.4/1} /* keep it shallow/snappy */
  }
@media (max-width:860px){
  
  .teaser-cta{padding:10px 14px;font-size:.95rem}
}


/* Hero centering 2025 */
.hero-teaser .hero-wrap{
  width:80%;
  max-width:1200px;
  margin:0 auto;
  padding:0 16px;
}
@media (max-width: 768px){
  .hero-teaser .hero-wrap{ width:100%; max-width:none; padding:0 12px; }
}


.hero-viewport{
  min-height: calc(100vh - var(--header-h, 64px) - var(--footer-h, 80px));
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 12px 0;
}


.hero-viewport{
  min-height: 70dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 12px 0;
}


.hero-viewport{
  min-height: calc(100vh - var(--header-h, 72px) - var(--footer-h, 96px));
  display:flex; align-items:center; justify-content:center;
  padding: 16px 0;
}
.hero-teaser .hero-wrap{ width:80%; max-width:1200px; margin:0 auto; padding:0 16px; }
@media (max-width: 768px){
  .hero-teaser .hero-wrap{ width:100%; max-width:none; padding:0 12px; }
}

/* Teaser sizing with fallback and min-height */
.teaser-wrap{ position:relative; overflow:hidden; border-radius:16px; background:#0b0c0f; min-height:240px; }
.teaser-aspect{ position:relative; width:100%; }
.teaser-aspect::before{ content:""; display:block; padding-top:42%; } /* shallow aspect for snappy hero */
.teaser-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }

/* CTA and fades */
.teaser-cta{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  padding:12px 16px; border-radius:999px; border:1px solid rgba(255,255,255,.4);
  background:rgba(0,0,0,.35); backdrop-filter:saturate(120%) blur(2px);
  color:#fff; font-weight:700; letter-spacing:.4px; cursor:pointer;
}
#teaser-container.fade-out{ opacity:.2; transition:opacity .25s ease; }
#teaser-container.fade-in{ opacity:1; transition:opacity .35s ease; }

/* Aspect-ratio upgrade when supported */
@supports (aspect-ratio: 16/9){
  .teaser-aspect::before{ display:none; }
  .teaser-aspect{ aspect-ratio: 2.4 / 1; }
}



.hero-viewport{display:flex;align-items:center;justify-content:center}
.hero-teaser .hero-wrap{width:80%;max-width:1200px;margin:20px auto;padding:0 16px}
@media (max-width:768px){.hero-teaser .hero-wrap{width:100%;max-width:none;padding:0 12px}}

/* Teaser aspect and video sizing */
.teaser-wrap{position:relative;overflow:hidden;border-radius:16px;background:#0b0c0f}
.teaser-aspect{position:relative;width:100%}
.teaser-aspect::before{content:"";display:block;padding-top:42%} /* shallow aspect */
.teaser-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* CTA overlay */
.teaser-cta{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:12px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.4);background:rgba(0,0,0,.35);backdrop-filter:saturate(120%) blur(2px);color:#fff;font-weight:700;letter-spacing:.4px;cursor:pointer}
#teaser-container.fade-out{opacity:.2;transition:opacity .25s ease}
#teaser-container.fade-in{opacity:1;transition:opacity .35s ease}

/* Full video embed sizing */
@supports (aspect-ratio: 16/9){
  .teaser-aspect::before{display:none}
  .teaser-aspect{aspect-ratio:2.4/1}
  }



.hero-teaser{position:relative;margin:20px 0}
.hero-teaser .hero-wrap{width:80%;max-width:1200px;margin:0 auto;padding:0 16px}
.teaser-wrap{position:relative;overflow:hidden;border-radius:16px;background:#0b0c0f}
.teaser-aspect{position:relative;width:100%}
.teaser-aspect::before{content:"";display:block;padding-top:56.25%} /* 16:9 */
.teaser-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.teaser-cta{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  padding:12px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.4);
  background:rgba(0,0,0,.35);backdrop-filter:saturate(120%) blur(2px);
  color:#fff;font-weight:700;letter-spacing:.4px;cursor:pointer
}
#teaser-container.fade-out{opacity:.2;transition:opacity .25s ease}
#teaser-container.fade-in{opacity:1;transition:opacity .35s ease}

@supports (aspect-ratio: 16/9){
  .teaser-aspect::before{display:none}
  .teaser-aspect{aspect-ratio:16/9}
  }

@media (max-width:768px){
  .hero-teaser .hero-wrap{width:100%;max-width:none;padding:0 12px}
  .teaser-cta{padding:10px 14px;font-size:.95rem}
}

/* =======================
   HKG Site CSS — Consolidated (2025)
   - Desktop + mobile nav
   - Hero teaser video (centered, fixed width)
   - Video embed utilities
   ======================= */

/* NAV: mobile toggle + drawer */
.menu-toggle{
  appearance:none; -webkit-appearance:none;
  background:transparent; border:0; color:var(--text,#eaeaea);
  cursor:pointer; display:none; align-items:center; justify-content:center;
  padding:8px; margin-left:auto; font-size:1.25rem;
}
.menu-toggle span{position:relative; display:block; width:28px; height:18px}
.menu-toggle span::before,.menu-toggle span::after{
  content:""; position:absolute; left:0; right:0; height:2px; background:currentColor
}
.menu-toggle span::before{top:0}
.menu-toggle span::after{bottom:0}

nav.mobile-drawer{
  display:none; position:fixed; top:0; left:0; right:0;
  background:#0f0f10; border-bottom:1px solid #202226; z-index:9999
}
nav.mobile-drawer .inner{padding:12px 16px; display:flex; flex-direction:column; gap:10px}
nav.mobile-drawer a{display:block; padding:10px 4px; color:#f2f2f2}
nav.mobile-drawer a:hover{color:var(--accent,#d0a74e)}

/* Mobile: show toggle, hide desktop nav */
@media (max-width: 900px){
  header .nav, .site-header .nav{display:none !important}
  .menu-toggle{display:inline-flex}
  nav.mobile-drawer.show{display:block}
}

/* Desktop: ensure desktop nav visible */
@media (min-width: 901px){
  .menu-toggle{display:none !important}
  nav.mobile-drawer{display:none !important}
}

/* Hide legacy header checkboxes if any */
.site-header input[type="checkbox"]{display:none !important}

/* HERO — centered teaser */
.hero-viewport{min-height:70svh; display:flex; align-items:center; justify-content:center; padding:16px 0}
.hero-teaser{position:relative; width:100%}
.hero-teaser .hero-wrap{width:80%; max-width:1200px; margin:0 auto; padding:0 16px}
@media (max-width:768px){
  .hero-teaser .hero-wrap{width:100%; max-width:none; padding:0 12px}
}

/* Teaser block */
.teaser-wrap{position:relative; overflow:hidden; border-radius:16px; background:#0b0c0f}
.teaser-aspect{position:relative; width:100%}
.teaser-aspect::before{content:""; display:block; padding-top:56.25%} /* 16:9 */
.teaser-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}

/* CTA overlay */
.teaser-cta{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  padding:12px 16px; border-radius:999px; border:1px solid rgba(255,255,255,.4);
  background:rgba(0,0,0,.35); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
  color:#fff; font-weight:700; letter-spacing:.4px; cursor:pointer;
}
#teaser-container.fade-out{opacity:.2; transition:opacity .25s ease}
#teaser-container.fade-in{opacity:1; transition:opacity .35s ease}

/* Reusable video embed container */
/* Aspect-ratio upgrade on modern browsers */
@supports (aspect-ratio: 16/9){
  .teaser-aspect::before{display:none}
  .teaser-aspect{aspect-ratio:16/9}
  }

/* === FIX: Desktop click-through on YouTube embeds === */
.card .pad{position:relative}

/* === Videos page additions === */
.videos-page h1{ margin-bottom:6px; }
.video-grid .card{ padding:0; }
.video-frame{ position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; border-radius:var(--rad); background:#000; }
.video-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }
/* === Fix teaser MP4 cropping: ensure full frame inside card === */
.video-frame video{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; display:block; background:#000; }

.card-title{ font-size:1rem; margin:0; }
.video-grid .card .pad{ padding:14px 16px; border-top:1px solid rgba(255,255,255,.06); background:rgba(0,0,0,.15); border-bottom-left-radius:var(--rad); border-bottom-right-radius:var(--rad); }
/* Defensive overrides against theme collisions */
.video-frame iframe{ max-width:none !important; width:100% !important; height:100% !important; visibility:visible !important; opacity:1 !important; }

.homepage-title { color: #d4af37; text-align: center; font-size: 2.5em; margin: 20px 0; }

.homepage-title { position: relative; z-index: 10; display: block; background: #000; padding: 10px; }

.homepage-title { 
  color: #d4af37; 
  text-align: center; 
  font-size: 2.5em; 
  margin: 40px 0 10px 0; 
  position: relative; 
  z-index: 10; 
  background: none; 
  padding: 0; 
}

.homepage-title { 
  color: #d4af37; 
  text-align: center; 
  font-size: 2.5em; 
  margin: 40px 0 40px 0; 
  background: none; 
  padding: 0; 
}

.homepage-title {
  color: #d4af37;
  text-align: center;
  font-size: 2.5em;
  margin: 40px 0;
}

/* Homepage title placement fix */
.homepage-title {
  color: #d4af37 !important;
  text-align: center !important;
  font-size: 2.5em !important;
  margin: 40px 0 !important;
  background: none !important;
  padding: 0 !important;
  position: static !important;
  display: block !important;
}

/* Centered homepage title, spaced above video */
.homepage-title {
  color: #d4af37 !important;
  text-align: center !important;
  font-size: 2.5em !important;
  margin: 40px auto !important;
  max-width: 80% !important;
  display: block !important;
  position: static !important;
}

.homepage-title {
  color: #d4af37 !important;
  text-align: center !important;
  font-size: 2.5em !important;
  margin: 40px auto 32px auto !important;
  max-width: 80% !important;
  display: block !important;
}

/* Use sitewide accent color for homepage title */
:root{}
.homepage-title{ color: var(--accent, #caa25a) !important; }

@media (max-width: 768px) {
  .homepage-title {
    font-size: 1.8em !important;
    margin: 20px auto !important;
  }
}

.homepage-title {
  margin: 20px auto 10px auto !important;
}

@media (max-width: 768px) {
  .homepage-title {
    margin: 15px auto 5px auto !important;
  }
}

.homepage-title {
  margin: 20px auto 0 auto !important;
}

@media (max-width: 768px) {
  .homepage-title {
    margin: 15px auto 0 auto !important;
  }
}


/* Homepage teaser YouTube swap */
.teaser-aspect{ position:relative; width:100%; }
.teaser-aspect iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }