/* ============================================================
   SBP 3D hero + takeover menu  (loaded site-wide via functions.php)
   ============================================================ */

/* ---------- 3D hero (home-test-1 Elementor section) ---------- */
.sbp-hero{position:relative;min-height:100vh;width:100%;display:grid;place-items:center;
  background:radial-gradient(130% 110% at 50% 38%,#f4f3f1 0%,#e9e7e3 55%,#e0ddd8 100%);
  overflow:hidden;}
.sbp-hero__mv{width:min(88vw,1120px);height:min(92vh,880px);opacity:0;transition:opacity 1.1s ease;}
.sbp-hero__mv.in{opacity:1;}
.sbp-hero model-viewer{width:100%;height:100%;background:transparent;--poster-color:transparent;}
.sbp-hero model-viewer::part(default-progress-bar){opacity:0;display:none;}
@media(max-width:900px){.sbp-hero__mv{width:92vw;height:70vh;}}

/* ---------- MENU toggle injected into the header ---------- */
#header .elementor-widget-wdt-header-menu{display:none!important;}      /* hide native nav */
.sbp-mtoggle{display:flex!important;align-items:center;gap:14px;background:transparent!important;
  border:0!important;box-shadow:none!important;outline:0!important;border-radius:0!important;
  cursor:pointer;font-family:'DM Sans',sans-serif;padding:0!important;margin-left:18px;
  width:auto!important;min-width:0!important;height:auto!important;}
.sbp-mtoggle:hover,.sbp-mtoggle:focus,.sbp-mtoggle:active{background:transparent!important;}
.sbp-mtoggle .lbl{font-weight:600;font-size:12px;letter-spacing:3px;text-transform:uppercase;
  color:#fff;white-space:nowrap;transition:color .35s ease;}
.sbp-mtoggle .ic{width:46px;height:46px;border:1px solid rgba(255,255,255,.3);border-radius:50%;
  display:grid;place-items:center;position:relative;
  transition:background .4s ease,border-color .4s ease;}
.sbp-mtoggle .ic i{position:absolute;width:18px;height:1.6px;background:#fff;
  transition:transform .45s cubic-bezier(.76,0,.24,1),background .35s ease;}
.sbp-mtoggle .ic i:nth-child(1){transform:translateY(-4px);}
.sbp-mtoggle .ic i:nth-child(2){transform:translateY(4px);}
.sbp-mtoggle:hover .lbl{color:#fdb813;}
.sbp-mtoggle:hover .ic{border-color:#fdb813;}

/* keep header above the overlay so the toggle (X) stays visible to close */
#header{z-index:10001!important;}
.sticky-header{z-index:10001!important;}
/* Kill the theme's duplicate sticky-header CLONE (it copies the header,
   incl. our injected toggle, producing a 2nd header). We use our own sticky,
   so the clone is dead weight. The real header keeps the .sticky-header class;
   the clone loses it, so this hides only the clone, site-wide. */
#header .elementor-element-3e1c27a:not(.sticky-header){display:none!important;}
/* home-test-1: overlay the header on the hero (no flow space, always fixed) + clean bar */
body.page-id-6332 #header{position:fixed!important;top:0;left:0;width:100%;}
body.page-id-6332 .sticky-header,
body.page-id-6332 #header .wdt-blur-style{background:transparent!important;border-color:transparent!important;box-shadow:none!important;}
body.page-id-6332 #header .wdt-blur-style::before,
body.page-id-6332 #header .wdt-blur-style::after{opacity:0!important;background:transparent!important;}
body.page-id-6332 .sticky-header.sbp-scrolled{background:#fdb813!important;box-shadow:0 10px 30px rgba(0,0,0,.10)!important;}
body.page-id-6332 .sticky-header.sbp-scrolled .wdt-blur-style::before{opacity:0!important;}
/* pull the hero up behind the transparent fixed nav (theme adds 80px below the absolute header) */
body.page-id-6332 .header-top-absolute{margin-bottom:0!important;}
/* when the menu is open, the bar is transparent even if scrolled (so gold logo + CLOSE show on the dark overlay) */
body.page-id-6332.sbp-open .sticky-header.sbp-scrolled{background:transparent!important;box-shadow:none!important;}
body.sbp-open .sticky-header.sbp-scrolled{background:transparent!important;box-shadow:none!important;}
/* when the menu is open, strip the header bar styling so it floats over the overlay */
body.sbp-open .sticky-header,
body.sbp-open #header .wdt-blur-style{background:transparent!important;border-color:transparent!important;box-shadow:none!important;}
body.sbp-open #header .wdt-logo-container img{filter:none!important;}
body.sbp-open #header .wdt-logo-container img{visibility:hidden!important;}  /* overlay has its own ::before logo; hide the header's own so only ONE logo shows when open */

/* scroll-to-yellow header */
.sticky-header.sbp-scrolled{background:#fdb813!important;box-shadow:0 10px 30px rgba(0,0,0,.10);}
.sticky-header.sbp-scrolled .wdt-blur-style{background:transparent!important;}
.sticky-header.sbp-scrolled .sbp-mtoggle .lbl{color:#15140f;}
.sticky-header.sbp-scrolled .sbp-mtoggle .ic{border-color:rgba(0,0,0,.28);}
.sticky-header.sbp-scrolled .sbp-mtoggle .ic i{background:#15140f;}

/* home-test-1: light hero sits under the header -> dark logo + dark toggle at top */
body.page-id-6332 .sbp-mtoggle .lbl{color:#15140f;}
body.page-id-6332 .sbp-mtoggle .ic{border-color:rgba(0,0,0,.28);}
body.page-id-6332 .sbp-mtoggle .ic i{background:#15140f;}
body.page-id-6332 #header .wdt-logo-container img{filter:brightness(0);transition:filter .4s ease;}

/* ============================================================
   INTERNAL PAGES — make the header transparent + stick + go yellow on scroll
   (the takeover overlay already works site-wide). Applied to EVERY page
   except the home hero (page-id-6332), so all inner pages share the
   About-us header look. Does NOT touch the theme's banner spacing.
   ============================================================ */
/* stick only AFTER scroll (keeps the title banner's layout intact at the top) */
body:not(.page-id-6332) .sticky-header.sbp-scrolled{position:fixed!important;top:0;left:0;width:100%;}
/* when the menu is OPEN, keep the whole header fixed at top (like home) so the logo,
   CLOSE toggle and Start-A-Project stay in view and aligned. sbp3d.js strips sbp-scrolled
   on open, so key off .sbp-open, not .sbp-scrolled. */
body:not(.page-id-6332).sbp-open #header{position:fixed!important;top:0!important;left:0!important;width:100%!important;}
body:not(.page-id-6332).sbp-open .sticky-header{position:static!important;}
/* kill the theme's translucent dark band (.wdt-blur-style::before = #111 @ .3 + backdrop blur)
   so no dark bar shows at the top, during scroll, or under the overlay — matches home.
   Only touches .wdt-blur-style, never .sticky-header, so the yellow scrolled bar is unaffected. */
body:not(.page-id-6332) #header .wdt-blur-style{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:transparent!important;border:0!important;}
body:not(.page-id-6332) #header .wdt-blur-style::before,
body:not(.page-id-6332) #header .wdt-blur-style::after{opacity:0!important;background:transparent!important;}
/* header logo 64px like home; black only on the yellow scrolled bar for contrast.
   SCOPED TO #header so it never touches the footer logo (same wdt-logo widget). */
html body:not(.page-id-6332) #header .elementor-widget-wdt-logo img{height:64px!important;width:auto!important;}
body:not(.page-id-6332) .sticky-header.sbp-scrolled .wdt-logo-container img{filter:brightness(0);transition:filter .4s ease;}
html body:not(.page-id-6332) .sticky-header.sbp-scrolled .elementor-widget-wdt-logo img{height:64px!important;width:auto!important;}
/* base header padding like home — also sets the open-menu row height so the overlay logo lines up with CLOSE + Start-A-Project */
html body:not(.page-id-6332) .sticky-header .e-con-inner,
html body:not(.page-id-6332) .sticky-header .wdt-blur-style{padding-top:8px!important;padding-bottom:8px!important;padding-left:40px!important;padding-right:40px!important;align-items:center!important;}
/* slim the scrolled yellow bar */
html body:not(.page-id-6332) .sticky-header.sbp-scrolled .e-con-inner,
html body:not(.page-id-6332) .sticky-header.sbp-scrolled .wdt-blur-style{padding-top:6px!important;padding-bottom:6px!important;align-items:center!important;}
/* when the menu is OPEN, use full base padding even if sbp-scrolled lingers (the duplicate
   header makes sbp3d.js strip the class from the hidden clone, not the live header), so the
   header row height — and thus the overlay logo — line up exactly like home */
html body:not(.page-id-6332).sbp-open .sticky-header .e-con-inner,
html body:not(.page-id-6332).sbp-open .sticky-header .wdt-blur-style{padding-top:8px!important;padding-bottom:8px!important;}
/* internal-page header row sits a bit lower than home's, so nudge the overlay logo
   down from home's -13 to match CLOSE + Start-A-Project here */
body:not(.page-id-6332) .sbp-ov__frame::before{top:-2px!important;}


/* ---------- Takeover overlay ---------- */
.sbp-ov{position:fixed;inset:0;z-index:9990;background:#0f0e0c;color:#fff;
  clip-path:inset(0 0 0 100%);transition:clip-path .85s cubic-bezier(.76,0,.24,1);
  pointer-events:none;overflow:hidden;font-family:'DM Sans',sans-serif;}
.sbp-ov *{box-sizing:border-box;margin:0;padding:0;}
.sbp-ov a{text-decoration:none;color:inherit;}
.sbp-ov .grain{position:absolute;inset:0;opacity:.045;mix-blend-mode:overlay;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");}
.sbp-ov__frame{position:absolute;inset:20px;border:1px solid rgba(255,255,255,.12);
  display:flex;flex-direction:column;padding:170px 4vw 34px;}
.sbp-ov__body{flex:1;display:grid;grid-template-columns:1.15fr .85fr;gap:5vw;align-items:center;min-height:0;}
.sbp-ov__list{display:flex;flex-direction:column;justify-content:center;min-height:0;max-height:100%;overflow-y:auto;overflow-x:hidden;}
.sbp-ov__list a{position:relative;display:flex;align-items:baseline;gap:22px;padding:0.7vh 0;flex:none;
  font-family:'TikTok Sans','DM Sans',sans-serif;font-weight:800;text-transform:uppercase;
  font-size:clamp(24px,4.8vh,50px);line-height:1.08;letter-spacing:-.5px;color:#fff;
  opacity:0;transform:translateY(26px);
  transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1);}
.sbp-ov__list a .n{font-weight:500;font-size:13px;letter-spacing:2px;color:#6a655b;transform:translateY(-.5em);transition:color .35s ease;}
.sbp-ov__list a .t{position:relative;transition:transform .5s cubic-bezier(.76,0,.24,1);}
.sbp-ov__list a .t:after{content:"";position:absolute;left:0;bottom:.02em;height:2px;width:0;background:#fdb813;transition:width .5s cubic-bezier(.76,0,.24,1);}
.sbp-ov__list a .ar{margin-left:6px;font-weight:400;font-size:.42em;opacity:0;transform:translate(-8px,-.4em);transition:opacity .35s ease,transform .35s ease;color:#fdb813;}
.sbp-ov__list:hover a{opacity:.28;}
.sbp-ov__list a:hover{opacity:1!important;color:#fdb813;}
.sbp-ov__list a:hover .t{transform:translateX(16px);}
.sbp-ov__list a:hover .t:after{width:100%;}
.sbp-ov__list a:hover .n{color:#fdb813;}
.sbp-ov__list a:hover .ar{opacity:1;transform:translate(0,-.4em);}
.sbp-ov__media{position:relative;height:min(56vh,470px);border:1px solid rgba(255,255,255,.12);overflow:hidden;}
.sbp-ov__media .layer{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transform:scale(1.08);transition:opacity .8s ease,transform 1.4s ease;}
.sbp-ov__media .layer.on{opacity:1;transform:scale(1);}
.sbp-ov__media:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,14,12,.05),rgba(15,14,12,.55));pointer-events:none;}
.sbp-ov__cap{position:absolute;left:22px;bottom:20px;z-index:2;}
.sbp-ov__cap .k{font-size:11px;letter-spacing:3px;text-transform:uppercase;color:#fdb813;font-weight:600;display:block;margin-bottom:6px;}
.sbp-ov__cap .v{font-family:'TikTok Sans','DM Sans',sans-serif;font-weight:700;font-size:22px;text-transform:uppercase;letter-spacing:.3px;}
.sbp-ov__foot{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);opacity:0;transform:translateY(16px);transition:opacity .6s ease .55s,transform .6s ease .55s;}
.sbp-ov__foot .meta{font-size:13px;color:#9a958b;}
.sbp-ov__soc{display:flex;gap:10px;}
.sbp-ov__soc a{width:40px;height:40px;border:1px solid rgba(255,255,255,.12);border-radius:50%;display:grid;place-items:center;font-size:11px;color:#c9c5bc;transition:.35s ease;}
.sbp-ov__soc a:hover{background:#fdb813;color:#111;border-color:#fdb813;transform:translateY(-4px);}

/* ---------- open state ---------- */
body.sbp-open{overflow:hidden;}
body.sbp-open .sbp-ov{clip-path:inset(0 0 0 0%);pointer-events:auto;}
/* !important so an open menu's gold toggle beats the scrolled dark-toggle rules
   when you open from the sticky bar (otherwise CLOSE is dark-on-dark + invisible) */
body.sbp-open .sbp-mtoggle .lbl{color:#fdb813!important;}
body.sbp-open .sbp-mtoggle .ic{border-color:#fdb813!important;background:rgba(253,184,19,.12)!important;}
body.sbp-open .sbp-mtoggle .ic i{background:#fdb813!important;}
body.sbp-open .sbp-mtoggle .ic i:nth-child(1){transform:rotate(45deg);}
body.sbp-open .sbp-mtoggle .ic i:nth-child(2){transform:rotate(-45deg);}
body.sbp-open.page-id-6332 #header .wdt-logo-container img{filter:none;}  /* logo back to light over dark overlay */
body.sbp-open .sbp-ov__list a{opacity:1;transform:translateY(0);}
body.sbp-open .sbp-ov__list a:nth-child(1){transition-delay:.30s;}
body.sbp-open .sbp-ov__list a:nth-child(2){transition-delay:.37s;}
body.sbp-open .sbp-ov__list a:nth-child(3){transition-delay:.44s;}
body.sbp-open .sbp-ov__list a:nth-child(4){transition-delay:.51s;}
body.sbp-open .sbp-ov__list a:nth-child(5){transition-delay:.58s;}
body.sbp-open .sbp-ov__list a:nth-child(6){transition-delay:.65s;}
body.sbp-open .sbp-ov__list a:nth-child(7){transition-delay:.72s;}
body.sbp-open .sbp-ov__foot{opacity:1;transform:translateY(0);}

@media(max-width:900px){
  .sbp-ov__frame{inset:12px;padding:124px 24px 24px;}
  .sbp-ov__body{grid-template-columns:1fr;gap:22px;align-items:start;overflow:auto;}
  .sbp-ov__media{display:none;}
  .sbp-ov__list a{font-size:30px;}
  .sbp-mtoggle .lbl{display:none;}
  .sbp-ov__foot{flex-direction:column;align-items:flex-start;gap:14px;}
}

/* ---------- Contact Us (page-id-837): "Begin Now" subtitle matches About-us Vision/Mission (26px/700) + no dash ---------- */
body.page-id-837 .wdt-heading-subtitle{font-size:26px!important;font-weight:700!important;letter-spacing:.26px!important;line-height:1.25!important;}
body.page-id-837 .wdt-heading-subtitle::before{display:none!important;}