/* Shared site chrome — hand-coded replica of the site's original Elementor
   header (349), menu popup (3932) and footer (1037). Used by every rebuilt
   page and the homepage (header via the site-header--overlay variant). One source of truth: edit here, not
   per page. NOTE the 7-day asset cache: to change this file, re-add it under
   a NEW filename and update the <link> on all 25 pages. */

:root{--chrome-header-h:clamp(64px,6.94vw,100px);--chrome-pad-x:30px}
@media (max-width:767px){:root{--chrome-pad-x:20px}}

/* ---- header: transparent bar, blends (difference) over whatever is behind,
        exactly like the homepage's .mix-blend sticky container ---- */
.site-header{position:relative;mix-blend-mode:difference;height:var(--chrome-header-h);display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding-inline:var(--chrome-pad-x)}
.site-header--overlay{position:absolute;top:0;left:0;right:0;z-index:100}
.site-header .logo img{display:block;height:clamp(29px,2.71vw,39px);width:auto}
/* high-specificity + state coverage: the homepage's Elementor kit CSS styles
   `button` (colour, padding, focus background) and must not bleed in here */
.site-header .menu-toggle,.site-header .menu-toggle:hover,.site-header .menu-toggle:focus,.site-header .menu-toggle:active{display:inline-flex;align-items:center;appearance:none;background:none;border:0;border-radius:0;box-shadow:none;min-width:0;min-height:0;padding:0;cursor:pointer;font:inherit;color:#e9e9e7;transition:color .3s}
.site-header .menu-toggle:hover{color:#fff}
.menu-lines{display:inline-flex;flex-direction:column;gap:7px}
.menu-lines span{display:block;width:34px;height:1.5px;background:currentColor}

/* ---- menu popup: white card, top-right, fade in ---- */
.site-menu{position:fixed;inset:0;z-index:1000;display:flex;justify-content:flex-end;align-items:flex-start;padding:15px}
.site-menu[hidden]{display:none}
.site-menu-card{width:432px;max-width:100%;max-height:calc(100vh - 30px);overflow:auto;background:#fff;color:#000;border-radius:18px;box-shadow:0 18px 50px rgba(0,0,0,.18);position:relative;animation:site-menu-in .3s ease both}
@keyframes site-menu-in{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.site-menu-card{animation:none}}
.site-menu-card .menu-close,.site-menu-card .menu-close:hover,.site-menu-card .menu-close:focus,.site-menu-card .menu-close:active{position:absolute;top:18px;right:18px;width:44px;height:44px;display:grid;place-items:center;appearance:none;background:none;border:0;border-radius:0;box-shadow:none;min-width:0;min-height:0;padding:0;cursor:pointer;color:#000}
.menu-close svg{width:26px;height:26px}
.menu-nav{display:flex;flex-direction:column;padding:30px 20px 22px}
.menu-nav a{align-self:flex-start;font-size:28px;font-weight:400;line-height:2;padding-inline:10px;color:#000;text-decoration:none;transition:opacity .2s}
.menu-nav a:hover{opacity:.55;text-decoration:none}
.menu-talk{border-top:1px solid rgba(0,0,0,.12);padding:25px 30px}
.menu-talk a{display:inline-flex;align-items:center;gap:.5em;font-size:16px;font-weight:500;color:#000;text-decoration:none}
.site-menu .arrow{width:.72em;height:.72em;flex-shrink:0}
.menu-social{display:flex;gap:38px;list-style:none;margin:0;padding:15px 30px 20px;background:#e9e9e7;border-radius:0 0 18px 18px;font-size:14px}
.menu-social a{color:#5f6567;text-decoration:none}

/* ---- footer: 1:1 replica of Elementor footer 1037, spec measured off the
        live original at 1916/1440/768/390 (element rects + computed styles).
        Sticky nav bar included: on desktop the original pins to the viewport
        bottom while the footer is in view (Elementor sticky:bottom +
        sticky_parent) — CSS position:sticky reproduces that exactly. ---- */
.site-footer{padding:calc(15vh + 20px) var(--chrome-pad-x) 0;margin-bottom:20px;color:#000}
.site-footer a{color:#000}
.footer-cta-row{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem}
.footer-cta-col{display:flex;flex-direction:column;align-items:flex-start}
.footer-mark{display:block;margin-bottom:19px}
.footer-mark img{display:block;width:80px;height:80px}
.footer-cta{display:inline-block;font-size:clamp(80px,6vw,120px);font-weight:300;line-height:1.2;color:#000}
.site-footer .social{list-style:none;margin:0 0 -1px;padding:0;text-align:right;font-size:clamp(14px,.6vw,18px);line-height:1.2}
.site-footer .social li{margin:0;padding:0}
.site-footer .social a{display:block;padding:5px 0}
.footer-nav{display:flex;justify-content:space-between;flex-wrap:wrap;margin:31px 0 30px;padding:0;border-top:1px solid #000;border-bottom:1px solid #000;background:#e9e9e7;font-size:clamp(20px,.9vw,28px);line-height:1.3}
.footer-nav a{padding:20px 0}
@media (min-width:1025px){.footer-nav{position:sticky;bottom:0;z-index:90}}
.footer-bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;margin-top:30px}
.footer-bottom .planet{display:block;width:250px;height:auto}
.site-footer .legal{list-style:none;margin:0 0 3px;padding:0;text-align:right;font-size:clamp(14px,.6vw,18px);line-height:1.2}
.site-footer .legal li{margin:16px 0 0}
.site-footer .legal li:first-child{margin-top:0}
@media (max-width:1024px){
.site-footer{padding-top:120px}
.footer-mark img{width:60px;height:60px}
.footer-cta{font-size:10vw;width:min-content}
.site-footer .social{margin-bottom:-21px}
.footer-nav{margin:21px 0 20px}
.footer-bottom{align-items:center;margin-top:22px}
.footer-bottom .planet{width:150px}
}
@media (max-width:767px){
.site-footer{padding-top:70px}
.footer-mark img{width:40px;height:40px}
.footer-cta{width:auto}
.site-footer .social{margin-bottom:-1px}
.footer-nav{font-size:18px;line-height:1.5}
.footer-nav a{padding:18px 0}
.footer-bottom{flex-direction:column-reverse;align-items:stretch;gap:0;margin-top:24px}
.footer-bottom .planet{width:140px;margin-top:34px}
.site-footer .legal{display:flex;flex-direction:row-reverse;justify-content:space-between;text-align:left;margin-bottom:0}
.site-footer .legal li{margin:0}
.site-footer .legal li:first-child{display:none}
}

/* ---- theme cursor: replica of the vamtam mouse dot (all.min.js +
        elementor-max.css). Invisible 10px blended circle that eases after
        the pointer and blooms to 60px over links. Hover-capable fine
        pointers only — site-chrome-2.js adds .has-mouse-dot + #mouseDot. ---- */
.has-mouse-dot #mouseDot{pointer-events:none;position:fixed;top:-5px;left:-5px;width:10px;height:10px;background:#fff;mix-blend-mode:difference;border-radius:50%;z-index:10000;opacity:0;transition:top .15s linear,left .15s linear,width .15s linear,height .15s linear,opacity .15s ease;will-change:transform,width,height,opacity}
.has-mouse-dot #mouseDot.over-link{width:60px;height:60px;top:-30px;left:-30px;opacity:1}
.has-mouse-dot #mouseDot.over-iframe{opacity:0}

/* ---- cross-document crossfade: same block as the child-theme stylesheet
        the Elementor pages load (rebuilt pages don't load that file) ---- */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:650ms;animation-timing-function:cubic-bezier(0.33,0,0.2,1)}
@media (prefers-reduced-motion:reduce){
::view-transition-old(root),::view-transition-new(root){animation:none}
}