/* Homepage reference: preserve original image coordinates and lighting sequence. */
.site-header-reference>header{background:#080808;backdrop-filter:none;-webkit-backdrop-filter:none}
.site-header-reference>header>.wrap{height:110px;width:94%;flex-wrap:nowrap;padding:0;gap:32px}
.site-header-reference>header .brand{display:flex;align-items:center;gap:18px;overflow:visible;flex-shrink:0}
.site-header-reference>header .brand .wordmark{font-family:'Arial',sans-serif;font-variant:small-caps;font-size:38px;letter-spacing:1px;font-weight:500;transform:scaleX(1.08);transform-origin:left}
.site-header-reference>header .brand small{display:block;border-left:1px solid #999999;padding:12px 0 12px 18px;margin:0 0 0 12px;font-family:'Arial Narrow',sans-serif;font-size:15px;letter-spacing:6px}
.site-header-reference>header nav{font-size:11px;gap:clamp(12px,1.8vw,28px)}
.site-header-reference>header nav>.btn{color:#080808;min-height:48px}
.home-reference #home{height:calc(100svh - 110px);min-height:620px;max-height:960px;align-items:flex-start;padding-top:28px}
.home-reference #home>.wrap{transform:none;width:88%;max-width:none}
.home-reference #home .eyebrow{font-size:10px;letter-spacing:1.8px;margin-bottom:28px}
.home-reference #home h1{font-size:clamp(68px,6.8vw,108px);line-height:1.02;letter-spacing:-1px;max-width:650px;margin-bottom:24px}
.home-reference #home h1>span{display:block}
.home-reference #home .hero-secondary{color:#bdbdbd}
.home-reference #home p{font-size:15px;max-width:375px;color:#f1f1f1}
.home-reference #home:after{background:linear-gradient(90deg,rgba(8,8,8,.42),rgba(8,8,8,.13) 39%,transparent 58%)}
.home-reference #home img{filter:contrast(1.07) saturate(1.025);opacity:1}
.home-reference #home .actions{margin-top:26px;gap:18px}
.home-reference #home .btn{font-size:10px;letter-spacing:1px;min-height:46px;padding:13px 23px}
.home-reference #home .btn.light{background:#fff;border-color:#fff}
.home-reference #home .hero-bottom{bottom:15px;left:5%;right:5%;border-radius:4px;font-size:9px;letter-spacing:1.4px;padding:12px}
@media(min-width:1280px){.site-header-reference>header .menu{display:none}.site-header-reference>header nav{display:flex;position:static;flex-direction:row;padding:0;background:transparent;border:0;overflow:visible;align-items:center}.site-header-reference>header nav>.btn{margin-left:auto}}
@media(max-width:1279px){.site-header-reference>header>.wrap{height:82px}.site-header-reference>header nav{background:#080808}.home-reference #home{height:calc(100svh - 82px)}.site-header-reference>header.is-scrolled nav{background:#ededed}}
@media(max-width:700px){.site-header-reference>header>.wrap{height:78px;gap:10px}.site-header-reference>header .brand{gap:10px}.site-header-reference>header .brand .wordmark{font-size:25px}.site-header-reference>header .brand small{font-size:10px;letter-spacing:3px;padding-left:12px;margin-left:5px}.site-header-reference>header nav{top:78px}.home-reference #home{height:760px;min-height:0;padding-top:30px}.home-reference #home h1{font-size:clamp(48px,9vw,65px);max-width:100%;margin-bottom:22px}.home-reference #home .eyebrow{font-size:8px;max-width:290px;margin-bottom:22px}.home-reference #home p{font-size:13px;max-width:280px}.home-reference #home:after{background:linear-gradient(180deg,#08080866,transparent 68%,#08080840)}.home-reference #home .actions{gap:10px;margin-top:20px}.home-reference #home .btn{padding:12px;font-size:9px}.home-reference #home .hero-bottom{font-size:7px}}
.home-reference #home>.wrap{margin:0 auto}
.home-reference #home .btn.ghost{background:rgba(8,8,8,.48)}

/* Shared reference wordmark and the approved homepage focus reveal. */
.site-header-reference>header .brand .wordmark{display:block;width:245px;line-height:0;transform:none}
.site-header-reference>header .wordmark svg{display:block;width:100%;height:auto;overflow:visible}
.site-header-reference>header>.wrap{gap:26px}
.site-header-reference>header nav{gap:clamp(10px,1.25vw,20px)}
.site-header-reference>header .brand small{font-stretch:condensed;font-size:13px;letter-spacing:6px}
html body.site-header-reference>header .brand{animation:shared-logo-focus 1000ms cubic-bezier(.22,.61,.36,1) both;clip-path:none}
html body.site-header-reference>header .brand::after{display:none}
html body.site-header-reference>header .brand small{animation:shared-logo-tagline 650ms cubic-bezier(.22,.61,.36,1) 300ms both}
@keyframes shared-logo-focus{from{opacity:0;filter:blur(7px);transform:scale(.97)}to{opacity:1;filter:none;transform:none}}
@keyframes shared-logo-tagline{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:700px){.site-header-reference>header>.wrap{gap:10px}.site-header-reference>header .brand .wordmark{width:160px}.site-header-reference>header .brand{gap:8px}.site-header-reference>header .brand small{font-size:9px;letter-spacing:3px;padding-left:10px;margin-left:2px}}
@media(max-width:360px){.site-header-reference>header .brand .wordmark{width:135px}.site-header-reference>header .brand small{letter-spacing:2px}}
@media(prefers-reduced-motion:reduce){html body.site-header-reference>header .brand,html body.site-header-reference>header .brand small{animation:none;filter:none;transform:none;opacity:1}}

/* Finish on the native vector, without a retained filter/compositing layer. */
html body.site-header-reference>header .brand{animation-fill-mode:backwards;filter:none;transform:none;opacity:1;will-change:auto;-webkit-text-stroke:0}
html body.site-header-reference>header .brand small{animation-fill-mode:backwards;transform:none;opacity:1}
.site-header-reference>header .wordmark svg{shape-rendering:geometricPrecision}
@media(min-width:1280px){.site-header-reference>header>.wrap{width:calc(100% - 48px);gap:18px}.site-header-reference>header .brand{gap:12px}.site-header-reference>header .brand small{margin-left:8px;padding-left:14px}.site-header-reference>header nav{justify-content:space-between;gap:clamp(18px,1.8vw,30px)}.site-header-reference>header nav>.btn{margin-left:0}}
@media(max-width:1279px){.site-header-reference>header>.wrap{width:calc(100% - 32px)}.site-header-reference>header nav{gap:22px}}
@media(max-width:700px){.site-header-reference>header>.wrap{width:calc(100% - 24px)}}

.site-header-reference>header .brand small{position:relative;top:3px}

/* Center the complete homepage message and actions within the Tesla hero. */
.home-reference #home{align-items:center;padding-top:0;padding-bottom:0}
.home-reference #home>.wrap{margin:0 auto;transform:none}

/* Separate Home from the wordmark and align navigation with the lettering. */
@media(min-width:1280px){.site-header-reference>header>.wrap{gap:clamp(64px,5vw,96px)}.site-header-reference>header nav{position:relative;top:3px;align-items:center;justify-content:space-between;gap:18px;min-width:0}}

/* The vector follows the header foreground in both scroll states. */
.site-header-reference>header.is-scrolled .brand,.site-header-reference>header.is-scrolled .brand small,.site-header-reference>header.is-scrolled nav>a:not(.btn),.site-header-reference>header.is-scrolled .nav-package-top>a,.site-header-reference>header.is-scrolled .package-toggle,.site-header-reference>header.is-scrolled .nav-package-list a{color:#000}
.site-header-reference>header.is-scrolled .brand small{border-left-color:#0006}
.site-header-reference>header.is-scrolled nav>.btn{background:#fff;color:#000;border-color:#000}

@media(min-width:1280px){.site-header-reference>header>.wrap{gap:32px}.site-header-reference>header nav{flex:0 0 auto;margin-left:auto;justify-content:flex-end;gap:clamp(12px,1.1vw,20px)}}

/* A single centered row, scaled to preserve separation from the logo. */
@media(min-width:1280px){.site-header-reference>header>.wrap{gap:clamp(80px,6vw,120px)}.site-header-reference>header nav{display:flex;flex:1;flex-wrap:nowrap;font-size:clamp(15px,1.1vw,19.25px);align-items:center;justify-content:space-between;gap:18px;margin-left:auto;min-width:0}.site-header-reference>header nav>a,.site-header-reference>header .nav-package-top>a{white-space:nowrap}.site-header-reference>header .nav-package-list a{font-size:16px}}
@media(max-width:1279px){.site-header-reference>header nav{font-size:24.5px;gap:24px}.site-header-reference>header .nav-package-list a{font-size:19px}}

/* Arrow-free PPF link with a pointer-safe, theme-matched submenu. */
.site-header-reference>header .nav-package-top{gap:0}
.site-header-reference>header .nav-package-list:before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
@media(min-width:1280px){.site-header-reference>header .nav-package-list{position:absolute;top:calc(100% + 14px);left:-16px;margin-top:0;width:290px;box-shadow:0 15px 30px #0003}}
@media(max-width:1279px),(hover:none){.site-header-reference>header .nav-package-list:before{display:none}.site-header-reference>header .nav-package-list{position:static;width:100%;margin-top:10px;box-shadow:none;border-left:2px solid #777;border-top:0;border-right:0;border-bottom:0;padding:0 0 0 12px}}

.site-header-reference>header .nav-package-top>a:focus{outline:none;box-shadow:none}
.site-header-reference>header .nav-package-top>a:focus-visible,.site-header-reference>header .nav-package-top>a[aria-expanded="true"]{text-decoration:none}

/* Compact service group: preserve a generous clear space after the logo. */
@media(min-width:1280px){.site-header-reference>header>.wrap{gap:80px}.site-header-reference>header nav{flex:0 0 auto;margin-left:auto;justify-content:flex-end;gap:clamp(22px,1.7vw,30px);font-size:clamp(14px,1vw,16px)}}
.home-about-link{display:table;margin-top:20px;padding-bottom:5px;border-bottom:1px solid currentColor;color:#080808;font-size:14px;font-weight:700;text-decoration:none}
.home-about-link:hover,.home-about-link:focus-visible{border-bottom-width:2px}

/* One shared underline for PPF hover, keyboard focus and its open submenu. */
.site-header-reference>header .nav-package-top>a:focus-visible:after,.site-header-reference>header .nav-package-top>a[aria-expanded="true"]:after{transform:scaleX(1)}

/* Preserve crisp joins on header and footer wordmarks. */
body .wordmark svg g{stroke-linejoin:miter;stroke-miterlimit:6;stroke-linecap:square}