/* Oct 27 2026 client updates (TradeFlow sync Oct 13): logo-first hero, header over the hero,
   mobile tint, hiring band, black title strips on Team and Careers. */

/* Homepage header floats over the hero until the page scrolls (assets/header-overlay.js adds .is-solid). */
.site-header.is-overlay{background:transparent;border-bottom-color:transparent;transition:background .35s ease,border-color .35s ease}
.site-header.is-overlay .brand{opacity:0;pointer-events:none;transition:opacity .35s ease}
.site-header.is-overlay.is-solid{background:var(--ink);border-bottom-color:#ffffff1a}
.site-header.is-overlay.is-solid .brand{opacity:1;pointer-events:auto}
@media(min-width:1001px){
  .site-header.is-overlay:not(.is-solid) nav{border-bottom:1px solid #ffffff4d}
  .site-header.is-overlay:not(.is-solid) nav a{font:400 11px/1.4 Montserrat,Arial,sans-serif;letter-spacing:.16em}
  .site-header.is-overlay:not(.is-solid) .header-cta{background:transparent;border:1px solid #ffffffb3;color:#fff}
}
@media(max-width:1000px){
  /* Mobile: a dark tint behind the menu so it reads over the film */
  .site-header.is-overlay{background:linear-gradient(180deg,#000000e6 0%,#000000a6 55%,#0000 100%)}
  .site-header.is-overlay.is-solid{background:var(--ink)}
}

/* Logo-first hero */
.hero.hero-under-header{margin-top:calc(-1 * var(--header));height:100svh;max-height:none;min-height:640px}
.hero-under-header .hero-shade{background:radial-gradient(ellipse 52% 60% at 50% 54%,#000000b8 0%,#00000066 62%,#0000 100%),linear-gradient(180deg,#000000b3 0%,#00000066 32%,#00000070 68%,#000000c7 100%)}
.hero-weld{padding-top:calc(var(--header) + 10px);padding-bottom:140px}
.weld-logo{position:relative;width:min(520px,74vw);margin:0 auto 28px}
.weld-logo img{display:block;width:100%;height:auto;aspect-ratio:1100/581}
/* A single restrained highlight travels inside the real metal lettering.
   The base stays readable from first paint; there is no scan line, flicker or particle loop. */
.weld-logo-img{filter:drop-shadow(0 2px 0 #1266a5)}
.weld-logo-hot{position:absolute;inset:0;pointer-events:none;opacity:0;filter:brightness(1.65) saturate(.65);-webkit-mask-image:linear-gradient(105deg,transparent 43%,#000 49%,transparent 55%);mask-image:linear-gradient(105deg,transparent 43%,#000 49%,transparent 55%);-webkit-mask-size:320% 100%;mask-size:320% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;animation:metal-finish 1.35s cubic-bezier(.22,.61,.36,1) .25s both}
@keyframes metal-finish{0%{opacity:0;-webkit-mask-position:100% 0;mask-position:100% 0}15%{opacity:.75}75%{opacity:.5}100%{opacity:0;-webkit-mask-position:0% 0;mask-position:0% 0}}
.hero-trades{display:flex;align-items:center;justify-content:center;gap:clamp(18px,3vw,44px);margin:0 0 28px;font:600 clamp(14px,1.3vw,19px)/1 Chakra,Arial,sans-serif;letter-spacing:.32em;text-transform:uppercase;color:#d9dee3;opacity:0;animation:hero-rise .7s ease-out 1.8s forwards}
.hero-trades i{display:block;width:2px;height:1.2em;background:var(--bright)}
.hero-weld h1{font:400 clamp(22px,2.5vw,38px)/1.45 Montserrat,Arial,sans-serif;letter-spacing:.2em;text-transform:uppercase;margin:0;opacity:0;transform:translateY(14px);animation:hero-rise .8s ease-out 2s forwards}
.hero-weld .hero-sub{max-width:640px;margin:16px auto 0;font-size:clamp(14px,1.15vw,17px);line-height:1.7;letter-spacing:.03em;color:#d3d9de;opacity:0;animation:hero-rise .8s ease-out 2.25s forwards}
.hero-under-header .explore-link .cue-line{display:block;width:2px;height:42px;margin:0 auto 6px;background:var(--bright)}
@keyframes hero-rise{to{opacity:1;transform:none}}
@media(max-width:760px){
  .weld-logo{width:80vw;margin-bottom:26px}
  .hero-weld{padding-bottom:150px}
  .weld-logo-img,.weld-logo-hot{--edge:2px}
  .hero-weld h1{font-size:clamp(17px,5vw,24px);letter-spacing:.14em}
  .hero-trades{font-size:12px;letter-spacing:.24em;gap:16px;margin-bottom:26px}
  .hero-weld .hero-sub{font-size:13px;padding:0 6px}
  .hero-under-header .explore-link .cue-line{height:30px}
}
@media(prefers-reduced-motion:reduce){
  .weld-logo-img{filter:none;animation:none}
  .weld-logo .weld-logo-hot{display:none;animation:none}
  .hero-weld h1,.hero-weld .hero-sub,.hero-trades{opacity:1;transform:none;animation:none}
}

/* Hiring band (homepage) */
.hiring-band{background:var(--ink);color:#fff;text-align:center;padding:88px var(--gutter) 92px;border-top:1px solid #ffffff1a}
.hiring-band .eyebrow{justify-content:center;margin-bottom:18px}
.hiring-band h2{font-size:clamp(38px,4.6vw,72px);text-transform:uppercase;letter-spacing:-.03em}
.hiring-roles{margin:22px auto 0;font:600 12px/1.8 Chakra,Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#e3e9ef}
.hiring-copy{max-width:560px;margin:16px auto 30px;font-size:15px;line-height:1.8;color:#c3c8cf}
@media(max-width:760px){.hiring-band{padding:64px var(--gutter) 70px}.hiring-roles{font-size:11px}.hiring-copy{font-size:14px}}

/* Black title strips on Team and Careers (replaces the old group photo) */
.interior .title-strip{min-height:0;padding:64px 0 72px;background:var(--ink)}
.interior .team-hero.title-strip{padding:10px 0 0}
.interior .title-strip-logo{display:block;width:150px;height:auto;margin:0 auto 26px}
@media(max-width:760px){.interior .title-strip{padding:46px 0 54px}.interior .title-strip-logo{width:120px;margin-bottom:20px}}

/* Five career tracks: 3 + 2, centered */
.interior .career-track-grid{display:flex;flex-wrap:wrap;justify-content:center}
.interior .career-track-grid .svc{flex:0 1 calc((100% - 80px) / 3)}
@media(max-width:1050px){.interior .career-track-grid .svc{flex-basis:calc((100% - 40px) / 2)}}
@media(max-width:760px){.interior .career-track-grid .svc{flex-basis:100%}}

/* Real crew photo (Dropbox Team Pictures, Oct 27) under the title strips on Team and Careers */
.interior .crew-photo{background:var(--ink);padding:0 0 64px}
.interior .crew-photo figure{margin:0 auto;max-width:1200px}
.interior .crew-photo img{display:block;width:100%;height:auto;border-radius:14px;border:1px solid #ffffff21}
@media(max-width:760px){.interior .crew-photo{padding-bottom:40px}.interior .crew-photo img{border-radius:10px}}

/* Oct 28 scope correction: retain the current site; match the supplied centered hero. */
@media(min-width:761px){
  .hero.hero-under-header{height:min(900px,100svh);min-height:760px}
  .hero-weld{padding-top:calc(var(--header) + 20px);padding-bottom:130px}
  .weld-logo{width:min(600px,46vw);margin-bottom:22px}
  .hero-weld h1{font-size:clamp(24px,2.1vw,34px);line-height:1.4}
  .hero-weld .hero-sub{max-width:650px;letter-spacing:.07em;font-weight:400}
}
.hero-under-header .hero-shade{background:linear-gradient(180deg,rgba(3,7,10,.68) 0%,rgba(3,7,10,.58) 35%,rgba(3,7,10,.67) 70%,rgba(3,7,10,.78) 100%)}
.hero-film-toggle{position:absolute;z-index:4;bottom:27px;right:var(--gutter);min-height:44px;padding:10px 15px;border:1px solid #ffffff70;border-radius:0;background:#080c10b3;color:#fff;font:500 11px/1.4 Montserrat,Arial,sans-serif;letter-spacing:.04em;cursor:pointer}
.hero-film-toggle:hover{background:#0072ce;border-color:#0072ce}
.hero-film-toggle:focus-visible{outline:2px solid #fff;outline-offset:4px}
.hero-film-toggle[hidden]{display:none}
.site-header.is-overlay:not(.is-solid) .brand{visibility:hidden}
/* Keep the requested headline legible immediately while the metal logo is revealed. */
.hero-weld h1,.hero-weld .hero-sub,.hero-trades{opacity:1;transform:none;animation:none}
.interior .crew-portraits{padding:0 0 72px;background:var(--ink);color:#fff}
.interior .crew-portraits h2{margin:0 0 28px;font-size:clamp(28px,3vw,44px)}
.crew-portrait-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.crew-portrait-grid img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;border-radius:10px}
.interior .current-roster .tm{padding-top:12px}
[data-lunar-reveal] h2,[data-lunar-reveal] .hiring-copy{transition:opacity .65s ease-out,transform .65s cubic-bezier(.16,1,.3,1)}
[data-lunar-reveal="pre"] h2,[data-lunar-reveal="pre"] .hiring-copy{opacity:.35;transform:translateY(16px)}
@media(max-width:760px){
 .hero-film-toggle{bottom:20px;right:18px;font-size:10px;padding:8px 10px}
 .crew-portrait-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
 .interior .crew-portraits{padding-bottom:44px}
}
@media(prefers-reduced-motion:reduce){
 [data-lunar-reveal] h2,[data-lunar-reveal] .hiring-copy{transition:none;transform:none;opacity:1}
}