/* Font is loaded via in the HTML (more reliable than @import, which can fall back to a wider font on first paint and cause the hero headline to wrap). */ /* ============================================================ BSP Engineering — Flagship Homepage Premium, media-led. Modeled on the impact of Minetek + Southland, expressed in the BSP design system. Tokens come from bsp-tokens.css — only var(--*) names from that file are used here. ============================================================ */ * { box-sizing: border-box; } /* Typography — body in Helvetica, headlines in Saira Semi Condensed (a clean Helvetica-style grotesque with a true semi-condensed width, loaded as a webfont so it's identical on every device). Mono retained for tabular spec numbers. */ :root { --font-body: "Helvetica Neue", Helvetica, Arial, sans-serif; --font-display: "Saira Semi Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-body); color: var(--fg-1); background: var(--bg-1); -webkit-font-smoothing: antialiased; font-feature-settings: "kern" 1, "liga" 1; overflow-x: hidden; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } ::selection { background: var(--bsp-blue); color: #fff; } /* ---------- shared type ---------- */ .eyebrow { font-family: var(--font-body); font-weight: 700; font-size: var(--fs-overline); letter-spacing: var(--ls-overline); text-transform: uppercase; color: var(--bsp-blue); display: inline-flex; align-items: center; gap: 10px; } .eyebrow::before { content: ""; width: 26px; height: 2px; background: currentColor; } .eyebrow.plain::before { display: none; } .eyebrow.on-dark { color: #fff; } .display { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: var(--ls-condensed); line-height: 0.94; margin: 0; } .h2 { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: var(--ls-condensed); font-size: clamp(28px, 3vw, 44px); line-height: 1.0; margin: 0; color: var(--ink-900); } .h2.on-dark { color: #fff; } .lede { font-size: clamp(17px, 1.25vw, 20px); line-height: 1.55; color: var(--fg-2); max-width: 62ch; text-wrap: pretty; margin: 0; } .lede.on-dark { color: rgba(255,255,255,0.82); } .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 26px; border: 0; border-radius: var(--radius-md); font-family: var(--font-body); font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), transform 80ms var(--ease-standard); } .btn svg { width: 16px; height: 16px; } .btn .arrow { transition: transform var(--dur-base) var(--ease-standard); } .btn:hover .arrow { transform: translateX(4px); } .btn:active { transform: translateY(1px); } .btn:focus-visible { outline: 0; box-shadow: var(--shadow-focus); } .btn-primary { background: var(--bsp-blue); color: #fff; } .btn-primary:hover { background: var(--bsp-blue-deep); } .btn-light { background: #fff; color: var(--ink-900); } .btn-light:hover { background: var(--bsp-blue-pale); } .btn-outline { background: transparent; color: var(--ink-900); border: 1px solid var(--border-2); } .btn-outline:hover { background: var(--bsp-blue-pale); border-color: var(--bsp-blue); color: var(--bsp-blue); } .btn-ghost-dark { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.34); } .btn-ghost-dark:hover { background: rgba(255,255,255,0.10); border-color: #fff; } /* text link with arrow */ .tlink { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bsp-blue); } .tlink svg { width: 15px; height: 15px; transition: transform var(--dur-base) var(--ease-standard); } .tlink:hover svg { transform: translateX(4px); } .tlink.on-dark { color: #fff; } /* ---------- container ---------- */ .wrap { max-width: 1320px; margin: 0 auto; padding: 0 40px; } .wrap-wide { max-width: 1600px; margin: 0 auto; padding: 0 40px; } @media (max-width: 640px) { .wrap, .wrap-wide { padding: 0 20px; } } .section { padding: clamp(72px, 8vw, 130px) 0; } /* ============================================================ HEADER — slim, flat white (logo always brand blue/grey) ============================================================ */ .hdr { position: fixed; inset: 0 0 auto 0; z-index: 100; background: rgba(255,255,255,0.96); backdrop-filter: saturate(160%) blur(6px); -webkit-backdrop-filter: saturate(160%) blur(6px); border-bottom: 1px solid var(--border-1); } .hdr-inner { height: 76px; max-width: 1600px; margin: 0 auto; padding: 0 40px; display: flex; align-items: center; gap: 36px; } .hdr-logo { border-bottom: 0 !important; text-decoration: none; } .hdr-logo:hover { border-bottom: 0 !important; box-shadow: none; } .hdr-logo img { height: 42px; width: auto; } .hdr-nav { display: flex; align-items: center; gap: 2px; flex: 1; } .hdr-link { font-size: 13px; font-weight: 600; letter-spacing: 0.02em; color: var(--ink-800); padding: 10px 14px; border-radius: var(--radius-md); background: transparent; border: 0; transition: color var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard); } .hdr-link:hover { color: var(--bsp-blue); background: var(--bsp-blue-pale); } .hdr-link.active { color: var(--bsp-blue); } .hdr-cta { display: flex; align-items: center; gap: 10px; } .hdr-phone { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 13px; font-weight: 500; color: var(--ink-800); letter-spacing: 0.02em; padding: 8px 4px; } .hdr-phone svg { width: 15px; height: 15px; color: var(--bsp-blue); } .hdr-phone:hover { color: var(--bsp-blue); } .hdr-menu-btn { display: none; } @media (max-width: 1080px) { .hdr-nav, .hdr-phone { display: none; } .hdr-menu-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: auto; background: transparent; border: 1px solid var(--border-2); border-radius: var(--radius-md); color: var(--ink-900); } .hdr-cta .btn { display: none; } } /* mobile drawer */ .drawer { position: fixed; inset: 0; z-index: 110; background: rgba(20,24,28,0.55); opacity: 0; pointer-events: none; transition: opacity var(--dur-base) var(--ease-standard); } .drawer.open { opacity: 1; pointer-events: auto; } .drawer-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(360px, 86vw); background: #fff; padding: 24px; transform: translateX(100%); transition: transform var(--dur-slow) var(--ease-standard); display: flex; flex-direction: column; gap: 6px; } .drawer.open .drawer-panel { transform: translateX(0); } .drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .drawer-head img { height: 38px; } .drawer-close { width: 42px; height: 42px; border: 1px solid var(--border-2); border-radius: var(--radius-md); background: transparent; color: var(--ink-900); } .drawer a.dl { padding: 14px 12px; font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; font-size: 22px; color: var(--ink-900); border-bottom: 1px solid var(--border-1); } .drawer a.dl:hover { color: var(--bsp-blue); } .drawer .btn { margin-top: 18px; } /* ============================================================ HERO — full-bleed media, instant clarity ============================================================ */ .hero { position: relative; min-height: 100vh; display: flex; flex-direction: column; justify-content: flex-end; padding-top: 76px; background: var(--ink-900); overflow: hidden; } .hero-media { position: absolute; inset: 0; z-index: 0; } .hero-media image-slot { width: 100%; height: 100%; } .hero-media video, .hero-media img { width: 100%; height: 100%; object-fit: cover; } /* flat charcoal scrim + BSP-blue brand tint so the hero copy reads clearly while staying on-brand (blue multiply over the photo, then a vertical charcoal fade for contrast at the headline + lower third) */ .hero-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(20,24,28,0.55) 0%, rgba(20,24,28,0.25) 32%, rgba(20,24,28,0.66) 72%, rgba(20,24,28,0.88) 100%), linear-gradient(180deg, rgba(27,68,156,0.42) 0%, rgba(27,68,156,0.30) 100%); } .hero-grid { position: absolute; inset: 0; z-index: 1; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px); background-size: 64px 64px; mask-image: linear-gradient(180deg, rgba(0,0,0,0.7), transparent 55%); -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.7), transparent 55%); } .hero-body { position: relative; z-index: 2; padding-bottom: 56px; } .hero-eyebrow { display: inline-flex; align-items: center; gap: 12px; color: #fff; font-weight: 700; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 26px; } .hero-eyebrow .tick { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; background: rgba(27,68,156,0.30); border: 1px solid rgba(255,255,255,0.22); border-radius: var(--radius-pill); } .hero-eyebrow .tick .dot { width: 7px; height: 7px; border-radius: 999px; background: #5ED084; } .hero h1 { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.01em; line-height: 0.92; font-size: clamp(40px, 5.6vw, 92px); color: #fff; margin: 0; max-width: none; /* white-space:nowrap is universally supported (text-wrap:nowrap is not) so the headline can NEVER wrap to two rows, whichever font is active. Long phrases simply extend toward the edge and are clipped by .hero's overflow, keeping the height constant (no mobile jump). */ white-space: nowrap; } .hero h1 .accent { color: var(--bsp-blue-tint); } /* typing headline — locked to exactly one line so a long phrase can never change the headline height (no layout jump on any viewport) */ .hero h1 .type-wrap { display: inline-flex; align-items: baseline; white-space: nowrap; /* overflow must stay visible: the blinking caret is the last child, and clipping here is what made the cursor vanish on long phrases. */ overflow: visible; vertical-align: baseline; } .hero h1 .typed { color: #fff; white-space: nowrap; } .hero h1 .caret { display: inline-block; width: 0.07em; min-width: 4px; height: 0.78em; margin-left: 0.08em; background: var(--bsp-blue-tint); /* step-end blink: opacity is held (not interpolated) between keyframes, so the caret is reliably solid for the on-phase on every browser. The old steps(1) timing function could pin it at opacity:0 and hide it entirely. */ animation: heroCaretBlink 1.1s step-end infinite; } @keyframes heroCaretBlink { 0% { opacity: 1; } 60% { opacity: 0; } 100% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .hero h1 .caret { animation: none; opacity: 1; } } .hero-sub { margin-top: 28px; font-size: clamp(17px, 1.4vw, 22px); line-height: 1.5; color: rgba(255,255,255,0.9); max-width: 60ch; text-wrap: pretty; } .hero-actions { margin-top: 36px; display: flex; gap: 14px; flex-wrap: wrap; } /* hero stat strip */ .hero-stats { position: relative; z-index: 2; border-top: 1px solid rgba(255,255,255,0.18); background: rgba(20,24,28,0.42); backdrop-filter: blur(3px); } .hero-stats-inner { max-width: 1320px; margin: 0 auto; padding: 0 40px; display: grid; grid-template-columns: repeat(4, 1fr); } .hero-stats .cell { padding: 26px 28px 28px; border-right: 1px solid rgba(255,255,255,0.12); } .hero-stats .cell:first-child { padding-left: 0; } .hero-stats .cell:last-child { border-right: 0; padding-right: 0; } .hero-stats .n { font-family: var(--font-display); font-weight: 700; font-size: clamp(32px, 3vw, 46px); line-height: 1; color: #fff; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } .hero-stats .n .u { font-size: 0.45em; color: var(--bsp-blue-tint); margin-left: 4px; font-weight: 600; } .hero-stats .l { margin-top: 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.66); } @media (max-width: 860px) { .hero-stats-inner { grid-template-columns: 1fr 1fr; } .hero-stats .cell { padding: 20px 20px 22px 0; } .hero-stats .cell:nth-child(2) { border-right: 0; } .hero-stats .cell:nth-child(3) { padding-left: 0; } } @media (max-width: 640px) { .hero { min-height: 92svh; padding-top: 104px; } .hero-body { padding-bottom: 32px; } .hero h1 { font-size: clamp(30px, 8vw, 52px); } /* stats: full-width stacked rows so nothing clips off the hero */ .hero-stats-inner { grid-template-columns: 1fr 1fr; padding: 0 20px; } .hero-stats .cell { padding: 18px 16px; border-right: 1px solid rgba(255,255,255,0.12); border-top: 1px solid rgba(255,255,255,0.12); } .hero-stats .cell:first-child { padding-left: 16px; } .hero-stats .cell:nth-child(2) { border-right: 0; } .hero-stats .cell:nth-child(odd) { padding-left: 16px; } .hero-stats .cell:nth-child(even) { border-right: 0; } .hero-stats .cell:last-child { padding-right: 16px; } .hero-stats .n { font-size: clamp(28px, 8vw, 38px); } } .intro { background: #fff; position: relative; overflow: hidden; } .intro::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(var(--border-1) 1px, transparent 1px), linear-gradient(90deg, var(--border-1) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse at 100% 0%, rgba(0,0,0,0.55), transparent 62%); mask-image: radial-gradient(ellipse at 100% 0%, rgba(0,0,0,0.55), transparent 62%); } .intro .wrap { position: relative; z-index: 1; } .intro-marker { display: flex; align-items: center; gap: 16px; padding-bottom: 18px; margin-bottom: 44px; border-top: 2px solid var(--ink-900); padding-top: 16px; } .intro-marker .mk-no { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; color: var(--bsp-blue); } .intro-marker .mk-t { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-3); } .intro-marker .mk-spacer { flex: 1; height: 1px; background: var(--border-1); } .intro-marker .mk-est { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; color: var(--fg-3); } .intro-inner { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.1fr); gap: clamp(32px, 6vw, 96px); align-items: start; } .intro .big { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.01em; font-size: clamp(28px, 3vw, 44px); line-height: 1.04; color: var(--ink-900); margin: 0; text-wrap: balance; } .intro .big em { font-style: normal; color: var(--bsp-blue); position: relative; } .intro .body p { margin: 0 0 16px; font-size: 17px; line-height: 1.62; color: var(--fg-2); } .intro .body p:last-child { margin-bottom: 0; } .intro-creds { margin-top: clamp(40px, 5vw, 64px); display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--border-strong); border-left: 1px solid var(--border-1); } .intro-creds .cred { padding: 22px 24px; border-right: 1px solid var(--border-1); border-bottom: 1px solid var(--border-1); display: flex; flex-direction: column; gap: 6px; transition: background var(--dur-base) var(--ease-standard); } .intro-creds .cred:hover { background: var(--bsp-blue-pale); } .intro-creds .cred .cn { font-family: var(--font-display); font-weight: 700; font-size: clamp(22px,2vw,28px); line-height: 1; color: var(--ink-900); letter-spacing: -0.01em; } .intro-creds .cred .cl { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3); } @media (max-width: 860px) { .intro-inner { grid-template-columns: 1fr; gap: 28px; } .intro-creds { grid-template-columns: 1fr 1fr; } } /* ============================================================ PILLARS — the 3-second "what we do" scan (Minetek-style) ============================================================ */ .pillars { background: var(--ink-050); } .pillars-head { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 32px; align-items: end; margin-bottom: 56px; } .pillars-head .tlink { color: var(--bsp-blue); } .pillar { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; border-top: 1px solid var(--border-1); } .pillar + .pillar { margin-top: 0; } .pillar:last-child { border-bottom: 1px solid var(--border-1); } .pillar-media { position: relative; min-height: 460px; overflow: hidden; background: var(--ink-200); } .pillar-media image-slot { position: absolute; inset: 0; width: 100%; height: 100%; } .pillar-media .num { position: absolute; top: 22px; left: 22px; z-index: 2; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; color: #fff; background: rgba(20,24,28,0.7); padding: 6px 11px; } .pillar-body { padding: clamp(36px, 4vw, 72px) clamp(32px, 4vw, 72px); display: flex; flex-direction: column; justify-content: center; background: #fff; } .pillar.flip { direction: rtl; } .pillar.flip > * { direction: ltr; } .pillar-body .pk { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bsp-blue); margin-bottom: 16px; } .pillar-body h3 { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.01em; font-size: clamp(28px, 3vw, 44px); line-height: 1.0; margin: 0 0 18px; color: var(--ink-900); } .pillar-body p { margin: 0 0 24px; font-size: 16px; line-height: 1.6; color: var(--fg-2); max-width: 48ch; } .pillar-body .feat { list-style: none; padding: 0; margin: 0 0 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; } .pillar-body .feat li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--ink-800); } .pillar-body .feat li svg { width: 16px; height: 16px; color: var(--bsp-blue); flex-shrink: 0; margin-top: 2px; } @media (max-width: 860px) { .pillar, .pillar.flip { grid-template-columns: 1fr; direction: ltr; } .pillar-media { min-height: 300px; } .pillar-body .feat { grid-template-columns: 1fr; } } /* ============================================================ PROOF BAND — big impact number (Minetek-style) ============================================================ */ .proof { position: relative; background: var(--bsp-blue); color: #fff; overflow: hidden; } .proof-media { position: absolute; inset: 0; z-index: 0; } .proof-media image-slot { width: 100%; height: 100%; } /* blue wash over the photo so it reads as the brand band but the welding imagery shows through behind the text */ .proof::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(90deg, rgba(27,68,156,0.94) 0%, rgba(27,68,156,0.82) 45%, rgba(27,68,156,0.62) 100%), rgba(27,68,156,0.30); } .proof::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse at 80% 20%, rgba(0,0,0,0.8), transparent 70%); -webkit-mask-image: radial-gradient(ellipse at 80% 20%, rgba(0,0,0,0.8), transparent 70%); } .proof-inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: center; } .proof .wrap { position: relative; z-index: 2; } .proof .big { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: clamp(34px, 4.4vw, 64px); line-height: 0.98; letter-spacing: 0.01em; margin: 0; color: #fff; text-wrap: balance; } .proof .big .u { color: var(--bsp-blue-pale); } .proof p { font-size: 18px; line-height: 1.55; color: rgba(255,255,255,0.86); margin: 0; } .proof-metrics { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 36px; border-top: 1px solid rgba(255,255,255,0.22); } .proof-metrics .m { padding: 22px 18px 0 0; } .proof-metrics .m .n { font-family: var(--font-display); font-weight: 700; font-size: clamp(30px,3vw,44px); line-height: 1; color: #fff; } .proof-metrics .m .n .u { font-size: 0.45em; color: var(--bsp-blue-pale); margin-left: 3px; } .proof-metrics .m .l { margin-top: 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.72); } @media (max-width: 860px) { .proof-inner { grid-template-columns: 1fr; gap: 28px; } } /* ============================================================ APPROACH — three promises ============================================================ */ .approach { background: #fff; } .approach-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--border-1); border-left: 1px solid var(--border-1); margin-top: 8px; } .approach-card { padding: 40px 34px 44px; border-right: 1px solid var(--border-1); border-bottom: 1px solid var(--border-1); background: #fff; transition: background var(--dur-base) var(--ease-standard); } .approach-card:hover { background: var(--ink-050); } .approach-card .ico { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; color: var(--bsp-blue); background: var(--bsp-blue-pale); margin-bottom: 22px; } .approach-card .ico svg { width: 22px; height: 22px; } .approach-card h3 { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.01em; font-size: 24px; line-height: 1.04; margin: 0 0 12px; color: var(--ink-900); } .approach-card p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--fg-2); } @media (max-width: 860px) { .approach-grid { grid-template-columns: 1fr; } } /* ============================================================ INDUSTRIES — markets grid (Southland-style) ============================================================ */ .industries { background: var(--ink-900); color: #fff; } .ind-head { margin-bottom: 48px; } .ind-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } .ind { position: relative; aspect-ratio: 3/4; overflow: hidden; background: var(--ink-700); isolation: isolate; } .ind image-slot { position: absolute; inset: 0; width: 100%; height: 100%; } .ind::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(20,24,28,0) 40%, rgba(20,24,28,0.9) 100%); transition: background var(--dur-base) var(--ease-standard); } .ind:hover::after { background: linear-gradient(180deg, rgba(27,68,156,0.1) 0%, rgba(27,68,156,0.88) 100%); } .ind .ic { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 20px; } .ind .ic .iname { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; font-size: 20px; color: #fff; line-height: 1.05; } .ind .ic .isub { margin-top: 4px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.72); } .ind .inum { position: absolute; top: 14px; left: 16px; z-index: 2; font-family: var(--font-mono); font-size: 11px; color: rgba(255,255,255,0.7); } @media (max-width: 980px) { .ind-grid { grid-template-columns: repeat(2, 1fr); } } /* ============================================================ WORK — selected projects ============================================================ */ .work { background: var(--ink-050); } .work-head { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 32px; align-items: end; margin-bottom: 48px; } .work-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .case { background: #fff; border: 1px solid var(--border-1); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-1); transition: box-shadow var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard); } .case:hover { box-shadow: var(--shadow-2); border-color: var(--border-2); transform: translateY(-2px); } .case-media { position: relative; aspect-ratio: 16/10; background: var(--ink-200); overflow: hidden; } .case-media image-slot { position: absolute; inset: 0; width: 100%; height: 100%; } .case-media .tag { position: absolute; top: 16px; left: 16px; z-index: 2; background: var(--bsp-blue); color: #fff; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; padding: 6px 11px; } .case-body { padding: 28px 28px 30px; } .case-body h3 { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.01em; font-size: 24px; line-height: 1.06; margin: 0 0 14px; color: var(--ink-900); } .case-body p { margin: 0 0 20px; font-size: 15px; line-height: 1.6; color: var(--fg-2); } .case-body .out { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; } .case-body .out li { display: flex; gap: 10px; font-size: 13px; color: var(--ink-800); } .case-body .out li svg { width: 15px; height: 15px; color: var(--bsp-blue); flex-shrink: 0; margin-top: 2px; } @media (max-width: 860px) { .work-grid { grid-template-columns: 1fr; } } /* single-case layout: full-width horizontal card (media | body) */ .work-grid.single { grid-template-columns: 1fr; } .work-grid.single .case { display: grid; grid-template-columns: 1.05fr 1fr; align-items: stretch; } .work-grid.single .case-media { aspect-ratio: auto; min-height: 380px; } .work-grid.single .case-body { padding: clamp(28px, 3.5vw, 48px); display: flex; flex-direction: column; justify-content: center; } .work-grid.single .case-body h3 { font-size: clamp(24px, 2.4vw, 32px); } @media (max-width: 860px) { .work-grid.single .case { grid-template-columns: 1fr; } .work-grid.single .case-media { min-height: 280px; } } /* ============================================================ ABOUT — family-owned + IS CARE ============================================================ */ .about { background: #fff; } .about-inner { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(40px, 6vw, 88px); align-items: center; } .about-copy p { margin: 0 0 18px; font-size: 16px; line-height: 1.64; color: var(--fg-2); } .about-care { border-top: 1px solid var(--border-strong); } .about-care .crow { display: grid; grid-template-columns: 40px 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--border-1); align-items: baseline; } .about-care .crow .cl { font-family: var(--font-display); font-weight: 700; font-size: 24px; color: var(--bsp-blue); line-height: 1; } .about-care .crow .ct { font-family: var(--font-body); font-weight: 600; font-size: 16px; color: var(--ink-900); } .about-care .crow .cd { font-size: 13px; color: var(--fg-3); margin-top: 2px; line-height: 1.45; } @media (max-width: 860px) { .about-inner { grid-template-columns: 1fr; gap: 32px; } } /* ============================================================ CTA BAND ============================================================ */ .cta { position: relative; background: var(--ink-900); color: #fff; overflow: hidden; } .cta-media { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .cta-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; } .cta::after { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(20,24,28,0.93); } .cta-inner { position: relative; z-index: 2; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 26px; } .cta h2 { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.01em; font-size: clamp(34px, 4.6vw, 70px); line-height: 0.98; margin: 0; color: #fff; max-width: 18ch; text-wrap: balance; } .cta p { font-size: 18px; line-height: 1.55; color: rgba(255,255,255,0.82); max-width: 56ch; margin: 0; } .cta-actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; } /* ============================================================ FOOTER ============================================================ */ .ft { background: #0c1116; color: rgba(255,255,255,0.6); padding: 72px 0 32px; font-size: 13px; } .ft-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 48px; } .ft-brand img { height: 38px; width: auto; margin-bottom: 18px; } .ft-brand p { margin: 0 0 14px; line-height: 1.6; color: rgba(255,255,255,0.6); max-width: 36ch; } .ft h5 { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; font-size: 12px; color: rgba(255,255,255,0.45); margin: 0 0 16px; } .ft ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; } .ft ul li a { color: rgba(255,255,255,0.78); } .ft ul li a:hover { color: #fff; } .ft-contact a { color: #fff; } .ft-contact .crow { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .ft-contact .crow svg { width: 16px; height: 16px; color: var(--bsp-blue-tint); flex-shrink: 0; } .ft-bottom { margin-top: 56px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.08); display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: rgba(255,255,255,0.45); } .ft-social { display: flex; gap: 10px; } .ft-social a { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,0.16); border-radius: var(--radius-md); color: rgba(255,255,255,0.78); transition: all var(--dur-fast) var(--ease-standard); } .ft-social a:hover { color: #fff; border-color: var(--bsp-blue-tint); background: rgba(27,68,156,0.25); } .ft-social svg { width: 16px; height: 16px; } @media (max-width: 860px) { .ft-top { grid-template-columns: 1fr 1fr; gap: 32px; } } /* ============================================================ ANIMATION SYSTEM Hidden states apply ONLY when is present (added by an inline head script). So with no JS, or under the nuclear failsafe, content is always visible — it can never get permanently stuck. JS adds .in on scroll; a failsafe guarantees reveal regardless. ============================================================ */ /* nuclear failsafe — forces everything visible no matter what */ html.reveal-failsafe .reveal { opacity: 1 !important; transform: none !important; } html.reveal-failsafe .hero .hero-eyebrow, html.reveal-failsafe .hero h1, html.reveal-failsafe .hero .hero-sub, html.reveal-failsafe .hero .hero-actions, html.reveal-failsafe .hero-stats, html.reveal-failsafe .sec-head.reveal .eyebrow, html.reveal-failsafe .sec-head.reveal .h2, html.reveal-failsafe .sec-head.reveal .lede, html.reveal-failsafe .reveal .eyebrow::before { opacity: 1 !important; transform: none !important; animation: none !important; } @media (prefers-reduced-motion: no-preference) { @keyframes bsp-in { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } } @keyframes bsp-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes bsp-down { from { transform: translateY(-100%); } to { transform: none; } } @keyframes bsp-kenburns { from { transform: scale(1.09); } to { transform: scale(1); } } /* ---- scroll reveals ---- */ html.anim .reveal { opacity: 0; transform: translateY(34px); } html.anim .reveal.r-left { transform: translateX(-40px); } html.anim .reveal.r-right { transform: translateX(40px); } html.anim .reveal.r-scale { transform: scale(0.95); } html.anim .reveal.in { opacity: 1; transform: none; transition: opacity 0.75s var(--ease-out), transform 0.75s var(--ease-out); } html.anim .reveal.in.d1 { transition-delay: 0.09s; } html.anim .reveal.in.d2 { transition-delay: 0.18s; } html.anim .reveal.in.d3 { transition-delay: 0.27s; } html.anim .reveal.in.d4 { transition-delay: 0.36s; } html.anim .reveal.in.d5 { transition-delay: 0.45s; } /* ---- sequenced section headings: eyebrow → title → lede ---- */ html.anim .sec-head.reveal .eyebrow, html.anim .sec-head.reveal .h2, html.anim .sec-head.reveal .lede { opacity: 0; transform: translateY(20px); } html.anim .sec-head.reveal.in .eyebrow { animation: bsp-in 0.7s var(--ease-out) 0.02s both; } html.anim .sec-head.reveal.in .h2 { animation: bsp-in 0.7s var(--ease-out) 0.12s both; } html.anim .sec-head.reveal.in .lede { animation: bsp-in 0.7s var(--ease-out) 0.22s both; } /* ---- eyebrow rule grows in ---- */ html.anim .reveal .eyebrow::before { transform: scaleX(0); transform-origin: left; } html.anim .reveal.in .eyebrow::before { animation: bsp-rule 0.5s var(--ease-out) 0.3s both; } @keyframes bsp-rule { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* ---- header slides down on load ---- */ html.anim .hdr { transform: translateY(-100%); } html.anim.loaded .hdr { animation: bsp-down 0.6s var(--ease-out) 0.05s both; } /* ---- hero load sequence ---- */ html.anim .hero .hero-eyebrow, html.anim .hero h1, html.anim .hero .hero-sub, html.anim .hero .hero-actions { opacity: 0; } html.anim.loaded .hero .hero-eyebrow { animation: bsp-in 0.8s var(--ease-out) 0.20s both; } html.anim.loaded .hero h1 { animation: bsp-in 0.9s var(--ease-out) 0.34s both; } html.anim.loaded .hero .hero-sub { animation: bsp-in 0.8s var(--ease-out) 0.56s both; } html.anim.loaded .hero .hero-actions{ animation: bsp-in 0.8s var(--ease-out) 0.70s both; } html.anim .hero-stats { opacity: 0; } html.anim.loaded .hero-stats { animation: bsp-fade 1s var(--ease-out) 0.85s both; } /* ---- hero media: one-shot subtle zoom-in (no infinite loop) ---- */ html.anim.loaded .hero-media image-slot, html.anim.loaded .hero-media img, html.anim.loaded .hero-media video { animation: bsp-kenburns 1.8s var(--ease-out) both; } } /* section heading helper */ .sec-head { max-width: 64ch; } .sec-head .h2 { margin-top: 16px; } .sec-head .lede { margin-top: 18px; } /* ============================================================ IMAGE-SLOT DROP TARGETS — keep decorative overlays from intercepting drag-and-drop so images stay updatable. ============================================================ */ .pillar-media .num, .case-media .tag, .ind::after, .ind .ic, .ind .inum, .proof::after, .proof::before, .cta::after { pointer-events: none; } .hero-body { pointer-events: none; } .hero-body a, .hero-body button { pointer-events: auto; } .cta-inner { pointer-events: none; } .cta-inner a { pointer-events: auto; } /* ============================================================ WHO WE SUPPLY — dark band, bold segment cards ============================================================ */ .supply { background: var(--ink-900); color: #fff; position: relative; overflow: hidden; } .supply::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px); background-size: 60px 60px; -webkit-mask-image: radial-gradient(ellipse at 0% 100%, rgba(0,0,0,0.7), transparent 60%); mask-image: radial-gradient(ellipse at 0% 100%, rgba(0,0,0,0.7), transparent 60%); } .supply .wrap { position: relative; z-index: 1; } .supply .sec-head .eyebrow { color: var(--bsp-blue-tint); } .supply .sec-head .eyebrow::before { background: var(--bsp-blue-tint); } .supply .sec-head .h2 { color: #fff; } .supply .sec-head .lede { color: rgba(255,255,255,0.78); } .supply-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 8px; } .seg { position: relative; padding: 30px 26px 32px; background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius-lg); overflow: hidden; transition: background var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard); } .seg::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--bsp-blue); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-base) var(--ease-out); } .seg:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.22); transform: translateY(-3px); } .seg:hover::before { transform: scaleX(1); } .seg .seg-no { display: flex; align-items: center; justify-content: space-between; margin-bottom: 56px; } .seg .seg-no > span:first-child { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.1em; color: var(--bsp-blue-tint); } .seg .seg-no .ico { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: var(--bsp-blue); border-radius: var(--radius-md); } .seg .seg-no .ico svg { width: 22px; height: 22px; } .seg h3 { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.01em; font-size: 28px; line-height: 1.0; margin: 0 0 12px; color: #fff; } .seg p { margin: 0; font-size: 14px; line-height: 1.55; color: rgba(255,255,255,0.74); } @media (max-width: 860px) { .supply-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 480px) { .supply-grid { grid-template-columns: 1fr; } } /* ============================================================ FULL SCOPE GRID — complete supply scope ============================================================ */ .scope { margin-top: 56px; padding-top: 48px; border-top: 1px solid var(--border-1); } .scope-head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: 28px; flex-wrap: wrap; } .scope-head .sk { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; font-size: 22px; color: var(--ink-900); margin: 0; } .scope-head .sn { font-family: var(--font-mono); font-size: 12px; color: var(--fg-3); letter-spacing: 0.08em; } .scope-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--border-strong); border-left: 1px solid var(--border-1); } .scope-item { display: grid; grid-template-columns: 36px 1fr; gap: 14px; align-items: start; padding: 22px 24px 24px; border-right: 1px solid var(--border-1); border-bottom: 1px solid var(--border-1); background: #fff; transition: background var(--dur-base) var(--ease-standard); } .scope-item:hover { background: var(--bsp-blue-pale); } .scope-item .si-n { font-family: var(--font-mono); font-size: 12px; color: var(--bsp-blue); padding-top: 2px; } .scope-item .si-t { display: block; font-family: var(--font-body); font-weight: 600; font-size: 16px; color: var(--ink-900); line-height: 1.25; } .scope-item .si-d { display: block; font-size: 13px; color: var(--fg-3); margin-top: 5px; line-height: 1.45; } @media (max-width: 860px) { .scope-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .scope-grid { grid-template-columns: 1fr; } } /* count-up numeric value sits inline with unit */ .cv { font-variant-numeric: tabular-nums; }