/* =========================================================
   POBO — SHARED SITE SHELL (header + footer)  ·  every page
   Source of truth: the Home design (Figma node 141:87899).
   Loaded last on every page (wp_head, see functions.php) so the header and
   the footer look and behave the same everywhere. Footer markup:
   template-parts/pobo-footer.php via get_custom_pobo_footer();
   pixel wordmark: assets/js/pobo-shell.js.
   Page templates must NOT restyle .site-header / .pbf-foot.
========================================================= */

/* Tokens (scoped to the shell so other pages' variables are untouched) */
.site-header,.pbf-foot{
	--ink:#0a0a0a;
	--line:#ececec;
	--blue:#0a3cff;
	--button-blue-gradient:linear-gradient(90deg,#0a3cff 0%,#3d6bff 55%,#86b0ff 100%);
	--blue2:#1a47ff;
	--ease:cubic-bezier(.22,1,.36,1);
	--fx:clamp(0px,5.3vw,102px);   /* frame inset from viewport */
	--px:clamp(16px,2.5vw,48px);   /* content inset inside frame */
	--pbf-dots:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 12'%3E%3Cpath d='M0 5.3h1.4v1.4H0zM3 5.3h1.4v1.4H3zM6 5.3h1.4v1.4H6zM9 5.3h1.4v1.4H9zM12 5.3h1.4v1.4H12zM15 5.3h1.4v1.4H15zM12 2.2h1.4v1.4H12zM12 8.4h1.4v1.4H12zM9.6 0h1.4v1.4H9.6zM9.6 10.6h1.4v1.4H9.6z'/%3E%3C/svg%3E");
}
@media (max-width:767px){.site-header,.pbf-foot{--fx:0px}}

/* Base: same environment the Home page gives its header and footer */
.site-header,.site-header *,.site-header *::before,.site-header *::after,
.pbf-foot,.pbf-foot *,.pbf-foot *::before,.pbf-foot *::after{box-sizing:border-box}
.site-header,.pbf-foot{font-family:"Mona Sans",sans-serif;font-size:17px;line-height:1.5;color:#0a0a0a;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.site-header :where(button,input,select,textarea),.pbf-foot :where(button,input,select,textarea){margin:0;font-family:inherit;font-size:inherit;line-height:1.5;text-transform:none}
.site-header a,.pbf-foot a{text-decoration:none}
.pbf-foot a{color:inherit}
.pbf-foot input[name="_pobo_contact_hp"]{padding:0;border:0;margin:0;background:transparent}
.pbf-foot h2.pbf-sr{font-size:1.5em;font-weight:700;line-height:1.5}
.pbf-foot .pbf-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.pbf-foot .pbf-arw{width:17px;height:12px;flex-shrink:0;opacity:.75;transition:transform .35s var(--ease)}

/* Header + footer rules */
.site-header.site-header .header-inner{box-sizing:border-box;width:calc(100% - 2 * var(--fx));max-width:1718px;margin:0 auto;padding:0 var(--px);grid-template-columns:auto 1fr auto}
@media (min-width:1200px){
	.site-header.site-header:not(.is-scrolled){--header-height:110px}
	.site-header.site-header .primary-nav{justify-self:start;margin-left:clamp(24px,4vw,76px)}
	.site-header.site-header .nav-link, .site-header.site-header .nav-trigger{font-size:18px;font-weight:500;color:#111;letter-spacing:0}
}
.site-header.site-header .nav-trigger, .site-header.site-header .nav-trigger:hover, .site-header.site-header .nav-trigger:focus, .site-header.site-header .nav-trigger:active{border:0;box-shadow:none;background:none}
.site-header.site-header .nav-trigger:focus:not(:focus-visible){outline:none}
.site-header.site-header .cta-btn{background:linear-gradient(90deg,#000 0%,#2e2e2e 100%)!important;border-radius:0;text-transform:uppercase;font-size:15px;font-weight:500;letter-spacing:.01em;padding:var(--cta-py) 18px}
.site-header.site-header .cta-btn:hover{background:linear-gradient(90deg,#0a3cff 0%,#3d6bff 55%,#86b0ff 100%)!important}
.pbf-foot :where(ul,ol){list-style:none;margin:0;padding:0}
.pbf-foot img{display:block;max-width:100%;height:auto}
.pbf-foot{background:#000;color:#fff;font-family:"Mona Sans",sans-serif}
.pbf-foot__frame{position:relative;width:calc(100% - 2 * clamp(0px,4.4vw,85px));max-width:1737px;margin:0 auto;background:#05060a;padding:clamp(48px,3.6vw,70px) clamp(20px,4.5vw,87px) clamp(40px,4vw,77px)}
.pbf-foot__main{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(0,.6fr) minmax(0,.44fr) minmax(0,.78fr);gap:clamp(24px,3vw,60px)}
.pbf-foot__logo{display:inline-block}
.pbf-foot__logo-img{display:block;width:clamp(150px,9.9vw,190px);height:auto}
.pbf-foot__brand p{max-width:470px;margin:clamp(18px,1.6vw,30px) 0 0;font-size:clamp(15px,.95vw,18px);line-height:1.42;color:#fff}
.pbf-foot h3{margin:clamp(8px,.8vw,16px) 0 0;font-size:clamp(17px,1vw,19px);font-weight:600;line-height:1.3;color:#fff}
.pbf-foot__col ul{margin-top:clamp(22px,1.6vw,32px)!important;display:grid;gap:clamp(18px,1.6vw,33px)}
.pbf-foot__col a, .pbf-foot__col span{font-size:clamp(16px,1vw,19px);line-height:1.3;color:#fff;transition:color .25s var(--ease)}
.pbf-foot__col a:hover{color:#7fa4ff}
.pbf-foot__news p{margin:clamp(22px,1.6vw,32px) 0 0;font-size:clamp(15px,1vw,19px);line-height:1.38;color:#fff}
.pbf-foot .pbf-news{position:relative;margin-top:clamp(20px,1.7vw,32px)}
.pbf-foot .pbf-news__input{display:block;width:100%;height:54px;padding:0 18px;border:1px solid transparent;border-radius:0;background:#2b2d3a;color:#fff;font-size:16px;outline:none}
.pbf-foot .pbf-news__input::placeholder{color:#b5b8c4;opacity:1}
.pbf-foot .pbf-news__input:focus{border-color:#4d7cff}
.pbf-foot .pbf-news__btn{padding:0;display:flex;align-items:center;justify-content:center;gap:14px;width:100%;height:54px;margin-top:18px;border:0;border-radius:0;background:linear-gradient(90deg,#0a3cff 0%,#3d6bff 55%,#8ab4f8 100%);color:#fff;font-size:16px;font-weight:600;letter-spacing:.01em;text-transform:uppercase;cursor:pointer;transition:filter .3s var(--ease)}
.pbf-foot .pbf-news__btn:hover{filter:none}
.pbf-foot .pbf-news__btn[disabled]{opacity:.8;cursor:progress}
.pbf-news__live{min-height:1.2em;margin:10px 0 0!important;font-size:14px;color:#b9c6ff}
.pbf-foot__mark{margin:clamp(40px,4vw,76px) auto 0;max-width:1430px}
.pbf-pixels{display:block;width:100%;height:auto;aspect-ratio:1420 / 466}
.pbf-foot :focus-visible{outline:2px solid #7fa4ff;outline-offset:3px}
@media (min-width:1200px){
	.site-header.site-header:not(.is-scrolled){--header-height:130px;--logo-width:184px}
	.site-header.site-header .primary-nav{margin-left:clamp(24px,2.55vw,49px)}
	.site-header.site-header .nav-link, .site-header.site-header .nav-trigger{font-size:18.5px;font-weight:400}
}
.site-header.site-header .chev{width:24px;height:24px}
.site-header.site-header .cta-btn{font-size:15px;letter-spacing:0;padding:11px 15px 11px 17px;gap:19px;line-height:21px}
.site-header.site-header .cta-btn .arrow{display:none}
.site-header.site-header .cta-btn::after{content:"";flex-shrink:0;width:17px;height:12px;background:currentColor;-webkit-mask:var(--pbf-dots) center/contain no-repeat;mask:var(--pbf-dots) center/contain no-repeat;transition:transform .25s cubic-bezier(.22,1,.36,1)}
.site-header.site-header .cta-btn:hover::after{transform:translateX(4px)}
@media (min-width:1200px){
	.pbf-foot__frame{background:linear-gradient(#000 0 clamp(0px,11.56vw,222px),#05060a 0);transform:translateX(clamp(-6px,-.3125vw,0px));padding:clamp(40px,3.13vw,60px) clamp(20px,3.8vw,73px) clamp(40px,4vw,77px) clamp(20px,4.48vw,86px)}
	.pbf-foot__main{grid-template-columns:minmax(0,713fr) minmax(0,289fr) minmax(0,242fr) minmax(0,330fr);gap:0}
	.pbf-foot__logo{margin-top:7px}
}
.pbf-foot__logo-img{width:clamp(150px,10.4vw,199px)}
.pbf-foot__brand p{font-size:clamp(15px,.96vw,18.5px)}
.pbf-foot h3{font-size:clamp(17px,.96vw,18.5px)}
.pbf-foot__col ul{gap:clamp(18px,1.88vw,36px)}
.pbf-foot__news p{margin-top:clamp(22px,1.82vw,35px)}
.pbf-foot__mark{margin-top:clamp(40px,4.17vw,80px)}
.pbf-foot__brand p{max-width:450px;margin-top:clamp(14px,.83vw,16px);line-height:1.46}
.pbf-foot__mark{margin-top:clamp(40px,3.85vw,74px)}
@media (min-width:1200px){
	.pbf-foot__logo{margin-left:-4px}
}
@media (max-width:1199px){
	.pbf-foot__main{grid-template-columns:repeat(3,minmax(0,1fr))}
	.pbf-foot__brand{grid-column:1 / -1}
}
@media (max-width:767px){
	.pbf-foot__main{grid-template-columns:1fr 1fr}
	.pbf-foot__news{grid-column:1 / -1}
	.pbf-foot__frame{width:100%}
}
@media (max-width:420px){
	.pbf-foot__main{grid-template-columns:1fr}
}

/* Mobile menu button: same on every page (older pages style every <button> globally) */
.site-header .hamburger{background:transparent;border:0;padding:0;color:#0b1e3f;box-shadow:none}

/* Header content starts exactly where the page frame starts (frame = viewport minus
   --fx on each side, same box the hero / sections use): no extra inner padding from
   tablet up. On phones the frame is full width and keeps the normal page gutter. */
@media (min-width:768px){
	.site-header.site-header .header-inner{padding-left:0;padding-right:0}
}

/* Equal left / right inset: the logo image has ~2.3% transparent edge and the menu
   button a 11px halo, so pull them out until the VISIBLE edges sit exactly on the
   header padding (the CTA is a solid box and already does). */
.site-header.site-header .brand{margin-left:calc(var(--logo-width) * -.0234)}
.site-header .hamburger{margin-right:-11px}

/* ---------- One typeface everywhere: Mona Sans (Figma design font) ----------
   Form controls never fall back to the browser font; third-party widgets that
   ship their own font stack (online-meeting scheduler, contact dashboard) are
   forced onto Mona Sans. */
html body :where(button,input,select,textarea,optgroup,option){font-family:inherit}
.wpts-hyper-modern-wrapper,.wpts-hyper-modern-wrapper *,
.pcd-overlay,.pcd-overlay *,.pcd-modal-overlay,.pcd-modal-overlay *{font-family:"Mona Sans",sans-serif!important}

/* Sticky header height changes on scroll must never move the page (no scroll-anchoring feedback) */
html,body{overflow-anchor:none}
/* margin-bottom animates with .header-inner height so header + reserve stays constant */
.site-header.site-header{transition:background var(--header-duration) var(--header-ease),box-shadow var(--header-duration) var(--header-ease),border-color var(--header-duration) var(--header-ease),margin-bottom var(--header-duration) var(--header-ease)}
@media (prefers-reduced-motion:reduce){.site-header.site-header{transition:none}}

/* Footer content starts/ends exactly where the header logo / CTA do */
@media (min-width:768px){
	.pbf-foot .pbf-foot__frame{width:100%;max-width:none;transform:none;padding-left:max(var(--fx),calc((100% - 1718px) / 2));padding-right:max(var(--fx),calc((100% - 1718px) / 2))}
}