/* Keep the site at a readable desktop scale on large and ultrawide displays. */
html{background:#000}
body{width:100%;max-width:1600px;margin-inline:auto}

/* Size the hero from the capped page width, not an ultrawide viewport.
   This preserves approximately 112px of wall above the Tesla roof. */
@media(min-width:701px){
 .home-reference #home{min-height:max(620px,calc(min(43.1vw,689.6px) + 194px))}
}

/* Give the wordmark and navigation their own space without growing forever. */
@media(min-width:1280px){
 .site-header-reference>header>.wrap{gap:clamp(24px,3vw,48px)}
 .site-header-reference>header nav{font-size:clamp(15px,1.1vw,17.6px);gap:16px;flex-wrap:nowrap}
}

/* Preserve the approved mobile composition independently of desktop sizing. */
@media(max-width:700px){
 .home-reference #home{align-items:flex-start;padding-top:30px;padding-bottom:0}
 .home-reference #home>.wrap{position:static;transform:none}
 .home-reference #home .actions{position:absolute;left:6%;right:6%;bottom:112px;margin:0;display:flex;flex-wrap:wrap;gap:10px}
 .home-reference #home .actions .btn{flex:1;white-space:nowrap}
}

/* 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(16px,1.25vw,22px);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}


/* Lighter desktop hero lettering, retaining the original large size. */
@font-face{font-family:'BlackLine Oswald';font-style:normal;font-weight:300;font-display:swap;src:url('/fonts/oswald-light.woff2') format('woff2')}
@media(min-width:701px){
 .home-reference #home{display:grid;grid-template-rows:minmax(36px,0.2fr) auto minmax(36px,0.8fr);align-items:stretch}
 .home-reference #home>.wrap{grid-row:2;align-self:start}
 .home-reference #home h1{font-family:'BlackLine Oswald','Arial Narrow',sans-serif;font-weight:300;font-size:clamp(68px,6.8vw,108px)}
}

/* Slightly fuller slogan strokes and clearer labels in the same button boxes. */
@font-face{font-family:'BlackLine Oswald';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/oswald-regular.woff2') format('woff2')}
@media(min-width:701px){
 .home-reference #home h1{font-weight:400}
 .home-reference #home .actions .btn{height:46px;min-height:46px;font-size:11.5px;letter-spacing:.7px;padding:0 12px;white-space:nowrap}
 .home-reference #home .actions .btn:first-child{width:173.7109375px}
 .home-reference #home .actions .btn:last-child{width:199.578125px}
}
@media(max-width:700px){.home-reference #home .actions .btn{font-size:10px;letter-spacing:.5px;height:46px;padding:0 10px}}

/* Pair both hover colors at the same specificity as the dark hero button. */
.home-reference #home .btn.ghost:hover,
.home-reference #home .btn.ghost:focus-visible{background:#ededed;color:#080808;border-color:#ededed}

/* Quick directional header reveal, retaining space to prevent page jumps. */
body>header{transition:transform 180ms cubic-bezier(.22,.61,.36,1),opacity 150ms ease,background-color 180ms ease,box-shadow 180ms ease}
body>header.header-hidden{transform:translateY(calc(-100% - 12px));opacity:0;pointer-events:none;box-shadow:none}
@media(prefers-reduced-motion:reduce){body>header{transition:none}}