/* ============================================================
   hero-fam.css — fam-style hero + overlay header
   DROP-IN: no edits to main.css needed.

   Install: save as  assets/css/hero-fam.css  and in
   includes/head.php add this line AFTER the main.css <link>:

   <link rel="stylesheet" href="<?= $BASE ?>assets/css/hero-fam.css">

   The !important flags below exist ONLY to beat the old hero
   rules still living in main.css (glass card, 92vh, etc.).
   ============================================================ */

/* ---------- Overlay header ---------- */
header.ow-header--overlay{ position:fixed !important; top:0; left:0; right:0; }
.ow-header--overlay:not(.is-scrolled){
  background:transparent !important;
  border-bottom-color:transparent !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  box-shadow:none !important;
}
.ow-header--overlay:not(.is-scrolled) .nav-link{ color:rgba(255,255,255,.88); }
.ow-header--overlay:not(.is-scrolled) .nav-link:hover,
.ow-header--overlay:not(.is-scrolled) .nav-link--active{ color:#fff; }
.ow-header--overlay:not(.is-scrolled) .nav-link::after{ background:#fff; }
.ow-header--overlay:not(.is-scrolled) .ow-logo-img{ filter:brightness(0) invert(1); }
.ow-header--overlay:not(.is-scrolled) a.ow-desktop-only.btn-outline{
  background:#fff !important; color:var(--navy) !important; border-color:#fff !important;
}
.ow-header--overlay:not(.is-scrolled) .ow-burger{ background:transparent; border-color:rgba(255,255,255,.35); }
.ow-header--overlay:not(.is-scrolled) .ow-burger span{ background:#fff; }

/* ---------- Hero shell: full screen ---------- */
section.ow-hero{
  height:100vh !important; min-height:700px !important; max-height:none !important;
}
.ow-hero .ow-container{ max-width:1240px !important; height:100%; }

/* slides (same behaviour, no brightness filter fights) */
.ow-hero .hero-slide{ position:absolute; inset:0; opacity:0; visibility:hidden;
  transition:opacity .9s var(--ease), visibility .9s var(--ease); }
.ow-hero .hero-slide.is-active{ opacity:1; visibility:visible; z-index:1; }
.ow-hero .hero-slide img{ width:100%; height:100%; object-fit:cover; filter:none !important; }
.ow-hero .hero-slide.is-active img{ animation:owKenFam 14s ease-out forwards; }
@keyframes owKenFam{ from{ transform:scale(1.06); } to{ transform:scale(1); } }

/* scrim — dark top strip for the nav, clear middle, deep bottom fade */
.ow-hero .ow-hero-stage::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:2;
  background:
    linear-gradient(to bottom, rgba(7,16,29,.50) 0%, rgba(7,16,29,0) 24%),
    linear-gradient(to top,    rgba(7,16,29,.82) 0%, rgba(7,16,29,.30) 36%, rgba(7,16,29,0) 58%) !important;
}

/* kill old glass/text-shadow treatments */
.ow-hero .hero-center,
.ow-hero .hero-card,
.ow-hero .hero-controls{ text-shadow:0 1px 3px rgba(7,16,29,.45) !important; }

/* ---------- Centered: title / pills / search ---------- */
.ow-hero .hero-center{ top:15% !important; }
.ow-hero .hero-h1{
  font-weight:400 !important; line-height:1.14; letter-spacing:.005em;
  font-size:clamp(2.3rem, 4.6vw, 4.05rem);
  text-shadow:0 2px 20px rgba(0,0,0,.35) !important;
}

/* ---------- fam-style search (same functionality, styled like fam) ---------- */
.ow-hero-searchwrap{ position:relative; margin:30px auto 0; max-width:630px; }
.ow-hero .ow-herosearch{
  display:flex !important; align-items:center; gap:10px;
  background:#fff !important; border-radius:999px;
  padding:7px 7px 7px 30px !important; height:60px;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.55);
}
.ow-hero .ow-herosearch input{
  flex:1; min-width:0; border:0; outline:0; background:transparent;
  font-size:15.5px; color:var(--navy); text-shadow:none;
}
.ow-hero .ow-herosearch input::placeholder{ color:#9aa4b1; }
.hero-search-btn{
  flex:none; height:46px; padding:0 30px;
  border:0; border-radius:999px; cursor:pointer;
  background:var(--navy-600); color:#fff;
  font-family:inherit; font-size:15px; font-weight:600;
  transition:filter .2s var(--ease), transform .18s var(--ease);
  text-shadow:none !important;
}
.hero-search-btn:hover{ filter:brightness(1.08); transform:translateY(-1px); }




/* ---------- fam-style search bar (no icon, button inside) ---------- */
.ow-hero-searchwrap{ position:relative; margin:32px auto 0; max-width:630px; }
.ow-hero .ow-herosearch{
  display:flex !important; align-items:center; gap:10px;
  background:#fff !important; border-radius:999px;
  padding:7px 7px 7px 30px !important; height:60px;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.55);
}
.ow-hero .ow-herosearch input{
  flex:1; min-width:0; border:0; outline:0; background:transparent;
  font-size:15.5px; color:var(--navy); text-shadow:none;
}
.ow-hero .ow-herosearch input::placeholder{ color:#9aa4b1; }
.hero-search-btn{
  flex:none; height:46px; padding:0 30px;
  border:0; border-radius:999px; cursor:pointer;
  background:var(--navy-600); color:#fff;
  font-family:inherit; font-size:15px; font-weight:600;
  transition:filter .2s var(--ease), transform .18s var(--ease);
  text-shadow:none !important;
}
.hero-search-btn:hover{ filter:brightness(1.08); transform:translateY(-1px); }

/* ---------- Bottom-left project block: NO card ---------- */
.ow-hero .hero-card{
  bottom:8% !important;
  background:transparent !important; border:0 !important;
  padding:0 !important; border-radius:0 !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  text-align:left;
}
.ow-hero .hero-proj-name{
  font-weight:400 !important; line-height:1.08;
  font-size:clamp(2rem, 3.6vw, 3.15rem);
  text-shadow:0 2px 16px rgba(0,0,0,.4) !important;
}
.ow-hero .hero-proj-desc{
  margin-top:12px; max-width:660px;
  font-size:15.5px; line-height:1.55; color:rgba(255,255,255,.88);
}
.ow-hero .hero-proj-row{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:22px 44px; margin-top:26px;
}
.hero-stat{ display:flex; align-items:center; gap:16px; }
.hero-stat-ico{
  width:52px; height:52px; border-radius:50%; flex:none;
  display:grid; place-items:center; font-size:18px;
  border:1.5px solid rgba(255,255,255,.9) !important;
  background:transparent !important; color:#fff !important;
}
.hero-stat-num{ display:block; font-size:24px; font-weight:500; line-height:1.15; color:#fff; }
.hero-stat-label{ display:block; margin-top:3px; font-size:14.5px; color:rgba(255,255,255,.8); }

.btn-discover{
  display:inline-flex; align-items:center; gap:16px;
  background:#fff !important; color:var(--navy) !important;
  border-radius:999px; padding:9px 9px 9px 28px;
  font-size:13px; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
  box-shadow:0 14px 34px -16px rgba(0,0,0,.6);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease);
  text-shadow:none !important;
}
.btn-discover:hover{ transform:translateY(-2px); box-shadow:0 20px 44px -18px rgba(0,0,0,.65); }
.btn-discover .dm-arrow{
  width:38px; height:38px; border-radius:50%; flex:none;
  display:grid; place-items:center; font-size:13px;
  background:var(--navy); color:#fff;
}
.btn-discover .dm-arrow i{ transform:rotate(-45deg); transition:transform .25s var(--ease); }
.btn-discover:hover .dm-arrow i{ transform:rotate(0); }

/* fam shows no slider chrome */
.ow-hero .hero-controls{ display:none !important; }

/* copy swap keeps working */
.ow-hero .hero-card.is-swapping{ animation:heroSwap .5s var(--ease); }

/* ---------- Mobile (matches/overrides the old !important 860px block) ---------- */
@media (max-width:860px){
  section.ow-hero{ height:auto !important; min-height:100svh !important; }
  .ow-hero .ow-hero-stage::after{
    background:linear-gradient(to bottom, rgba(7,16,29,.72) 0%, rgba(7,16,29,.55) 40%, rgba(7,16,29,.88) 100%) !important;
  }
  .ow-hero .hero-center{
    position:relative !important; top:auto !important; left:auto !important;
    transform:none !important; padding:112px 20px 0 !important;
  }
  .ow-hero .ow-container{ height:auto; max-width:100% !important; padding-inline:20px; }
  .ow-hero .ow-herosearch{ height:56px; padding-left:20px !important; }
  .ow-hero .hero-card{
    position:relative !important; left:auto !important; right:auto !important;
    bottom:auto !important; margin:36px 0 44px !important; max-width:100% !important;
  }
        .ow-hero .ow-herosearch{ height:56px; padding-left:20px !important; }
  .ow-hero .hero-proj-row{ gap:18px 26px; }
}
@media (max-width:400px){
  }
@media (max-width:400px){
  .hero-search-btn{ padding:0 20px; }
}
@media (prefers-reduced-motion:reduce){
  .ow-hero .hero-slide{ transition:none; }
  .ow-hero .hero-slide.is-active img{ animation:none !important; transform:scale(1); }
}

/* ============================================================
   PATCH v2 — fam-width hero card, centered search, mobile fixes
   (append to hero-fam.css)
   ============================================================ */

/* 1. hero-card spans like fam: anchored near the viewport edge,
      not the centered 1240px container */
.ow-hero .ow-container{ max-width:100% !important; padding-inline:0 !important; }
.ow-hero .hero-card{
  left:clamp(24px, 3.2vw, 60px) !important;
  right:clamp(24px, 3.2vw, 60px) !important;
}

/* 2. search: guaranteed centered even if the Tailwind
      max-w-[760px] utility is missing from the build */
.ow-hero [data-ow-search]{ max-width:760px; margin-inline:auto; }

/* results dropdown: kill the inherited hero text-shadow */
.ow-hero .ow-search-results,
.ow-hero .ow-search-results *{ text-shadow:none !important; }

/* 3. phone screens */
@media (max-width:860px){
  .ow-hero .ow-container{ padding-inline:20px !important; }
  .ow-hero .hero-card{ left:auto !important; right:auto !important; }
  .ow-hero .hero-proj-name{ font-size:1.9rem; }
  .ow-hero .hero-proj-desc{ font-size:14.5px; }
  .hero-stat-ico{ width:44px; height:44px; font-size:15px; }
  .hero-stat-num{ font-size:19px; }
  .hero-stat-label{ font-size:13px; }
  .btn-discover{ padding:8px 8px 8px 22px; font-size:12px; gap:12px; }
  .btn-discover .dm-arrow{ width:32px; height:32px; }
}
/* compact search on small phones: icon-only button, nothing overflows */
@media (max-width:430px){
  .ow-hero .ow-herosearch{ padding-left:14px !important; gap:8px; }
  .ow-hero .ow-herosearch .btn-gold{ padding:12px 16px !important; }
  .ow-hero .ow-herosearch .btn-gold span{ display:none; }
  .ow-hero .hero-h1{ font-size:2rem; }
}


.ow-hero{ touch-action:pan-y; -webkit-user-select:none; user-select:none; }
.ow-hero input{ -webkit-user-select:text; user-select:text; }