/* Elevation 6 - home page. Loaded after styles.css on / only. */

/* The line under the logo runs the logo's full width. The letter spacing
   here is a close fallback; home.js sets it exactly for the visitor's font. */
.hero-copy .hero-tag{display:block;width:min(76vw,620px);margin:22px auto 0;font-size:clamp(12px,calc(min(76vw,620px)*.04),25px);line-height:1.2;font-weight:var(--weight-bold);letter-spacing:.74em;text-transform:uppercase;text-align:left;white-space:nowrap;color:var(--e6-grey-200)}

/* The four service streams (.service-line in styles.css), the same width as the line above. */
.hero-copy .hero-services{width:min(76vw,620px);margin:clamp(20px,3.4vw,32px) auto 0;padding:0 calc(min(76vw,620px)*.0028) 0 0;font-size:clamp(12px,calc(min(76vw,620px)*.029),18px)}

/* The hero fills the screen below the header, and the lockup sits a touch above the true
   centre, where the eye reads "centred". */
.home .hero{min-height:calc(100svh - var(--head-h))}
.home .hero-copy{padding:56px 24px calc(56px + 4svh)}
/* The headline, one line on what we do, and the two actions */
.home .hero-head{max-width:min(100%,640px);margin:clamp(44px,5.4vw,64px) auto 0;font-size:clamp(28px,3.6vw,44px);line-height:1.14;letter-spacing:-.015em;text-wrap:balance}
.home .hero-copy .hero-lede{max-width:min(100%,600px);margin:18px auto 0;font-size:clamp(17px,1.5vw,19px);line-height:1.55;letter-spacing:0;color:var(--e6-grey-200);text-wrap:balance}
.home .hero-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:clamp(28px,3vw,36px)}
.home .sec-more{margin-top:28px}
/* The first section follows the hero closely: the hero's own fade is the gap. */
.home .hero+.sec{padding-top:clamp(48px,6vw,72px)}

/* No star sits on the lockup, the headline or the buttons: the mark has gaps between its bars, and
   a star behind one reads as a flaw. The starfield clears in a soft-edged box around the group
   (outside either band the stars show). home.js measures the group and sets the box edges;
   the values here are a close fallback. */
.home .stars{--hw:calc(min(38vw,310px) + 20px);--l:calc(50% - var(--hw));--r:calc(50% + var(--hw));--t:calc(42% - 230px);--b:calc(42% + 150px);-webkit-mask-image:linear-gradient(90deg,#000 calc(var(--l) - 40px),transparent var(--l),transparent var(--r),#000 calc(var(--r) + 40px)),linear-gradient(180deg,#000 calc(var(--t) - 36px),transparent var(--t),transparent var(--b),#000 calc(var(--b) + 36px));mask-image:linear-gradient(90deg,#000 calc(var(--l) - 40px),transparent var(--l),transparent var(--r),#000 calc(var(--r) + 40px)),linear-gradient(180deg,#000 calc(var(--t) - 36px),transparent var(--t),transparent var(--b),#000 calc(var(--b) + 36px))}

/* Elevate, in brief: a slim band before the contact form */
.home .sec-elevate{padding-top:clamp(64px,8vw,104px)}
.elevate-band{position:relative;overflow:hidden;display:grid;gap:20px;padding:clamp(24px,4vw,40px);border:1px solid var(--border-hairline);border-radius:var(--radius-md);background:linear-gradient(170deg,rgba(15,36,51,.85) 0%,var(--surface-card) 60%)}
.elevate-band::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--e6-gradient-rule)}
@media(min-width:900px){.elevate-band{grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:56px}}
.elevate-band h2{font-size:clamp(24px,2.8vw,32px);letter-spacing:-.01em}
.elevate-band h2+p{margin-top:10px;max-width:60ch;font-size:17px;color:var(--text-secondary)}
.elevate-band .more-link{white-space:nowrap}