:root { --ink: #111110; --graphite: #1c1c1a; --paper: #f2f0e8; --white: #fbfaf5; --yellow: #F1C429; --yellow-deep: #F1C429; --muted: #b5b3aa; --display: "Barlow Condensed", Impact, sans-serif; --body: "Manrope", Arial, sans-serif; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 82px; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); }
body.intro-active { overflow: hidden; }
main { background: #080808; }
.intro-screen { position: fixed; z-index: 2000; inset: 0; display: grid; overflow: hidden; place-items: center; background: #080808; color: var(--white); opacity: 1; visibility: visible; }
.intro-screen::before { position: absolute; inset: -30%; content: ""; background: radial-gradient(ellipse at center, rgba(241,196,41,.2), transparent 42%); animation: intro-glow 3.7s ease-out both; }
.intro-screen::after { position: absolute; top: -20%; bottom: -20%; left: -25%; width: 18%; content: ""; background: linear-gradient(90deg,transparent,rgba(241,196,41,.34),rgba(255,255,255,.2),transparent); transform: skewX(-18deg); animation: intro-sweep 1.5s cubic-bezier(.2,.7,.2,1) .45s both; }
.intro-atmosphere { position: absolute; inset: 0; opacity: .26; background-image: radial-gradient(circle, var(--yellow) 1.5px, transparent 2px), radial-gradient(circle, rgba(255,255,255,.6) 1px, transparent 1.7px); background-position: 0 0, 28px 30px; background-size: 66px 66px, 91px 91px; mask-image: radial-gradient(ellipse at center, #000 0%, transparent 65%); animation: intro-particles 3.4s ease-out both; }
.intro-lines { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; }
.intro-lines i { display: block; width: min(50vw,520px); height: 2px; background: var(--yellow); transform: scaleX(0); box-shadow: 0 0 18px rgba(241,196,41,.7); animation: intro-line 1.25s cubic-bezier(.2,.75,.25,1) both; }
.intro-lines i:nth-child(2) { animation-delay: .16s; }
.intro-lines i:nth-child(3) { animation-delay: .32s; }
.intro-content { position: relative; z-index: 1; display: flex; width: min(76vw,560px); flex-direction: column; align-items: center; gap: 20px; }
.intro-overline, .intro-tagline { color: var(--yellow); font-size: 9px; font-weight: 900; letter-spacing: .32em; opacity: 0; animation: intro-caption .5s ease-out 1.85s forwards; }
.intro-mark-wrap { position: relative; display: block; width: 100%; overflow: hidden; }
.intro-mark-wrap::after { position: absolute; inset: -15% auto -15% -35%; width: 25%; content: ""; background: linear-gradient(90deg,transparent,rgba(255,255,255,.55),rgba(241,196,41,.35),transparent); transform: skewX(-18deg); animation: intro-logo-shine 1.05s ease-in-out 2.05s both; }
.intro-logo { display: block; width: 100%; height: auto; opacity: 0; clip-path: inset(0 100% 0 0); filter: drop-shadow(0 0 22px rgba(241,196,41,.22)); animation: intro-logo-reveal 1.25s cubic-bezier(.16,.78,.2,1) .92s forwards; }
.intro-tagline { color: rgba(255,255,255,.72); letter-spacing: .24em; animation-delay: 2.25s; }
.intro-skip { position: absolute; z-index: 2; right: max(24px,4vw); bottom: max(24px,4vh); padding: 10px 12px; border: 1px solid rgba(255,255,255,.28); background: transparent; color: rgba(255,255,255,.74); font: 800 9px var(--body); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.intro-skip:hover, .intro-skip:focus-visible { border-color: var(--yellow); color: var(--yellow); }
.intro-skip span { margin-left: 8px; color: var(--yellow); }
.intro-screen.is-done { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .55s ease, visibility 0s linear .55s; }
@keyframes intro-glow { from { opacity: 0; transform: scale(.5); } to { opacity: 1; transform: scale(1); } }
@keyframes intro-sweep { 0% { left: -18%; opacity: 0; } 20% { opacity: 1; } 100% { left: 120%; opacity: 0; } }
@keyframes intro-particles { from { opacity: 0; transform: scale(.92); } to { opacity: .26; transform: scale(1.06); } }
@keyframes intro-line { 0% { transform: scaleX(0); opacity: 0; } 45% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(0); opacity: 0; } }
@keyframes intro-logo-reveal { 0% { clip-path: inset(0 100% 0 0); opacity: 0; transform: scale(.92); } 100% { clip-path: inset(0 0 0 0); opacity: .98; transform: scale(1); } }
@keyframes intro-caption { to { opacity: 1; } }
@keyframes intro-logo-shine { 0%, 100% { left: -35%; opacity: 0; } 20% { opacity: 1; } 65% { opacity: .85; } 100% { left: 125%; } }
a { color: inherit; }
.skip-link { position: fixed; z-index: 20; top: -60px; left: 15px; padding: 10px 14px; background: var(--yellow); color: var(--ink); font-weight: 800; text-decoration: none; }
.skip-link:focus { top: 12px; }
.site-header { position: fixed; z-index: 1000; top: 0; right: 0; left: 0; border-bottom: 1px solid rgba(255,255,255,.14); background: rgba(12,12,11,.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.navbar { padding: 14px 0; }
.brand-lockup { display: inline-flex; align-items: center; gap: 10px; color: var(--white); text-decoration: none; }
.navbar .brand-lockup { gap: 0; }
.brand-logo { display: block; width: 96px; height: auto; }
.brand-symbol { display: grid; width: 38px; height: 38px; place-items: center; border: 2px solid var(--yellow); color: var(--yellow); font: 800 26px/.8 var(--display); transform: skew(-9deg); }
.brand-name { font: 800 22px/.78 var(--display); letter-spacing: .04em; }
.brand-name small { display: block; margin-top: 5px; font: 800 8px/1 var(--body); letter-spacing: .32em; }
.navbar-toggler { padding: 8px 10px; border: 1px solid var(--yellow); border-radius: 0; color: var(--yellow); font: 800 10px var(--body); letter-spacing: .12em; }
.navbar-toggler:focus { box-shadow: 0 0 0 2px rgba(241,196,41,.35); }
.nav-link { color: rgba(255,255,255,.76); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.nav-link:hover, .nav-link:focus { color: var(--yellow); }
.nav-cta { display: inline-flex; align-items: center; gap: 18px; padding: 11px 14px; background: var(--yellow); color: var(--ink); font-size: 10px; font-weight: 900; letter-spacing: .1em; text-decoration: none; text-transform: uppercase; }
.nav-cta span { font-size: 17px; }
.hero { position: relative; display: flex; min-height: 730px; align-items: center; overflow: hidden; background: var(--ink); color: var(--white); }
.hero::before { position: absolute; inset: 0; content: ""; pointer-events: none; background-image: linear-gradient(90deg, rgba(8,8,7,.56) 0%, rgba(8,8,7,.48) 48%, rgba(8,8,7,.62) 100%), linear-gradient(0deg, rgba(8,8,7,.24), rgba(8,8,7,.24)), url("../assets/bluper-hero-wide.webp"); background-position: center, center, center; background-size: cover; background-repeat: no-repeat; }
.hero::after { position: absolute; right: 7%; bottom: 8%; content: "›››"; color: rgba(241,196,41,.09); font: 900 clamp(100px,20vw,250px)/.6 var(--display); letter-spacing: -.12em; pointer-events: none; }
.hero-layout { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0,1.15fr) minmax(280px,.85fr); align-items: center; gap: 65px; padding-top: 85px; }
.hero-copy { max-width: 700px; }
.hero-wordmark { position: absolute; z-index: 1; top: 50%; right: 3%; width: min(45vw, 760px); height: auto; opacity: .42; transform: translateY(-50%); }
.hero-side-signature { position: absolute; z-index: 2; right: 6%; bottom: 74px; display: flex; align-items: center; gap: 10px; color: var(--white); font-size: 10px; font-weight: 900; letter-spacing: .16em; }
.hero-signature-slashes { display: flex; align-items: center; gap: 4px; }
.hero-signature-slashes i { display: block; width: 2px; height: 15px; background: var(--yellow); transform: skew(-16deg); }
.eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; color: var(--yellow); font-size: 9px; font-weight: 900; letter-spacing: .19em; text-transform: uppercase; }
.eyebrow > span { display: inline-block; width: 22px; height: 3px; background: currentColor; }
.hero h1 { margin: 0; font: 900 clamp(85px, 12vw, 154px)/.78 var(--display); letter-spacing: -.035em; text-transform: uppercase; }
.hero h1 em { color: var(--yellow); font-style: normal; }
.hero-intro { margin: 30px 0 14px; color: #d3d1c7; font-size: 14px; font-weight: 700; }
.hero-tagline { max-width: 560px; margin: 0 0 26px; color: #f4f1e7; font-size: clamp(17px,2vw,22px); font-weight: 600; line-height: 1.3; }
.hero-tagline em { color: var(--yellow); font-style: normal; font-weight: 800; }
.button-yellow { display: inline-flex; align-items: center; gap: 24px; padding: 13px 16px; background: var(--yellow); color: var(--ink); font-size: 9px; font-weight: 900; letter-spacing: .12em; text-decoration: none; text-transform: uppercase; }
.button-yellow span { font-size: 18px; }
.hero-index { position: absolute; right: max(24px, calc((100% - 1140px)/2)); bottom: 24px; color: rgba(255,255,255,.44); font-size: 8px; font-weight: 800; letter-spacing: .18em; }
.hero-index { z-index: 2; }
.image-placeholder { display: flex; min-height: 210px; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 20px; border: 1px dashed currentColor; text-align: center; }
.image-placeholder span { font-size: 9px; font-weight: 900; letter-spacing: .17em; }
.image-placeholder small { font-size: 11px; line-height: 1.5; }
.hero-placeholder { min-height: 320px; border-color: rgba(241,196,41,.7); color: rgba(241,196,41,.83); background: rgba(255,255,255,.018); }
.hero-placeholder span { color: var(--yellow); }
.hero-placeholder small { color: rgba(255,255,255,.64); }
.section { position: relative; padding: 110px 0; }
.about-section { background-color: var(--paper); background-image: linear-gradient(rgba(242,240,232,.9),rgba(242,240,232,.9)), url("../assets/images/marketing-pattern.png"); background-position: center, center top; background-size: auto, 850px auto; background-repeat: no-repeat, repeat; }
.two-column-layout { display: grid; grid-template-columns: 1fr .8fr; align-items: center; gap: clamp(45px,8vw,115px); }
.eyebrow-dark { color: #706700; }
.display-title { margin: 0; font: 800 clamp(58px, 8vw, 100px)/.86 var(--display); letter-spacing: -.02em; text-transform: uppercase; }
.yellow-dot { color: var(--yellow-deep); }
.yellow-bar { width: 62px; height: 5px; margin: 25px 0; background: var(--yellow); }
.lead-copy { max-width: 600px; margin: 0 0 14px; font: 700 23px/1.28 var(--display); text-transform: uppercase; }
.lead-copy strong { padding: 0 4px; background: var(--yellow); }
.body-copy { max-width: 620px; color: #565650; font-size: 13px; line-height: 1.85; }
.image-placeholder-tall { min-height: 390px; color: #756d17; background: rgba(255,255,255,.35); }
.services-section { overflow: hidden; background: var(--ink); color: var(--white); }
.services-section::before { position: absolute; top: 0; right: 6%; bottom: 0; width: 1px; content: ""; background: rgba(241,196,41,.14); }
.section-heading { max-width: 760px; margin-bottom: 42px; }
.section-heading .display-title { font-size: clamp(66px,9vw,110px); }
.section-heading > p:last-child { max-width: 620px; margin: 18px 0 0; color: var(--muted); font-size: 12px; line-height: 1.75; }
.service-name-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.service-name { min-height: 142px; padding: 21px; border: 1px solid #393935; background: #181817; }
.service-name > span { color: #77766f; font: 800 11px var(--body); }
.service-name h3 { margin: 30px 0 0; font: 700 clamp(24px,3vw,38px)/.9 var(--display); text-transform: uppercase; }
.service-name-highlight { border-color: var(--yellow); background: var(--yellow); color: var(--ink); }
.service-name-highlight > span { color: rgba(17,17,16,.55); }
.service-detail-intro { display: grid; grid-template-columns: 1fr minmax(280px,.8fr); align-items: center; gap: 50px; margin-top: 76px; padding-top: 34px; border-top: 1px solid #41413b; }
.service-detail-intro h3 { margin: 0 0 15px; font: 700 clamp(36px,5vw,58px)/.9 var(--display); text-transform: uppercase; }
.body-copy-light { color: #bbb9b0; }
.service-placeholder { min-height: 175px; border-color: rgba(241,196,41,.65); color: rgba(241,196,41,.83); }
.service-placeholder small, .service-example-placeholder small { color: rgba(255,255,255,.62); }
.service-details-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; margin-top: 18px; }
.detail-panel { padding: 27px; border: 1px solid #3b3b36; background: #171716; }
.detail-kicker { margin: 0 0 8px; color: var(--yellow); font: 700 13px var(--display); letter-spacing: .08em; }
.detail-panel h4 { margin: 0 0 20px; font: 700 26px/.9 var(--display); text-transform: uppercase; }
.production-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 17px 10px; margin: 0; padding: 0; list-style: none; }
.production-grid li { display: flex; min-width: 0; flex-direction: column; align-items: center; gap: 7px; color: #e8e6dd; font-size: 10px; line-height: 1.15; text-align: center; }
.production-icon { display: grid; width: 100%; max-width: 74px; aspect-ratio: 1; place-items: center; border: 2px solid rgba(255,255,255,.82); color: #fff; transition: border-color .18s ease, color .18s ease, background-color .18s ease; }
.production-grid li:nth-child(3n + 2) .production-icon { color: var(--yellow); border-color: var(--yellow); }
.production-icon svg { display: block; width: 88%; height: 88%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.production-grid li:hover .production-icon { background: rgba(241,196,41,.08); border-color: var(--yellow); color: var(--yellow); }
.term-list { display: flex; flex-wrap: wrap; gap: 7px; margin: 0; padding: 0; list-style: none; }
.term-list li { padding: 8px 10px; border: 1px solid #55554c; color: #e8e6dd; font-size: 9px; font-weight: 800; letter-spacing: .06em; }
.service-example-placeholder { min-height: 155px; margin-top: 18px; border-color: rgba(241,196,41,.46); color: rgba(241,196,41,.82); }
.coverage-section { position: relative; min-height: 700px; overflow: hidden; background: var(--ink) url("../assets/images/cobertura-background-promotora.webp") center/cover no-repeat; color: var(--white); }
.coverage-section::before { position: absolute; inset: 0; content: ""; background: linear-gradient(90deg, rgba(10,10,9,.96) 0%, rgba(10,10,9,.86) 27%, rgba(10,10,9,.5) 58%, rgba(10,10,9,.18) 100%); }
.coverage-layout { position: relative; z-index: 1; display: flex; min-height: 700px; align-items: center; padding-top: 70px; padding-bottom: 70px; }
.coverage-copy { max-width: 570px; }
.coverage-copy .eyebrow { color: var(--yellow); }
.coverage-copy h2 { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin: 0; color: var(--white); font: 900 clamp(74px,9vw,118px)/.78 var(--display); letter-spacing: -.04em; text-transform: uppercase; }
.coverage-copy h2 em { color: var(--yellow); }
.coverage-copy h2 em { font-style: normal; }
.coverage-copy h2 small { color: var(--white); font-size: .38em; line-height: 1.1; letter-spacing: .015em; }
.coverage-flags { display: grid; width: min(100%, 430px); grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
.coverage-flag-card { display: flex; min-height: 70px; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 7px 8px; border: 1px solid rgba(255,255,255,.2); background: rgba(8,8,7,.58); }
.coverage-flag-card svg { display: block; width: 100%; max-width: 78px; height: auto; aspect-ratio: 3/2; border: 1px solid rgba(255,255,255,.45); border-radius: 4px; }
.coverage-flag-card span { color: #f4f1e7; font-size: 8px; font-weight: 800; letter-spacing: .08em; line-height: 1; text-align: center; text-transform: uppercase; }
.certifications-section { padding: 70px 0; border-top: 1px solid #383833; border-bottom: 1px solid #383833; background: #151514; color: var(--white); }
.certifications-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 26px; }
.certifications-heading .eyebrow { margin: 0; }
.certifications-heading h2 { margin: 0; font: 700 clamp(38px,5.5vw,62px)/.9 var(--display); text-align: right; text-transform: uppercase; }
.certification-logos { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border-top: 1px solid #454540; border-bottom: 1px solid #454540; }
.certification-item { display: flex; min-height: 190px; align-items: center; justify-content: center; padding: 26px clamp(20px,4vw,54px); color: #fff; }
.certification-item + .certification-item { border-left: 1px solid #454540; }
.duns-logo { display: block; width: min(100%,200px); height: auto; object-fit: contain; }
.ecovadis-logo { color: #fff; font: 500 clamp(34px,4vw,48px)/1 var(--body); letter-spacing: -.055em; }
.ecovadis-logo span { font-weight: 600; }
.repse-logo { display: inline-flex; align-items: center; color: #fff; font: 700 clamp(44px,5vw,62px)/.95 Georgia,"Times New Roman",serif; letter-spacing: -.045em; }
.repse-logo i { margin: 0 -.015em; font-style: normal; font-weight: 700; }
.experience-section { background-color: var(--paper); background-image: linear-gradient(rgba(242,240,232,.9),rgba(242,240,232,.9)), url("../assets/images/marketing-pattern.png"); background-position: center, center top; background-size: auto, 850px auto; background-repeat: no-repeat, repeat; }
.section-heading-light { margin-bottom: 55px; }
.experience-list { border-top: 1px solid #cac8bf; }
.experience-item { display: grid; grid-template-columns: 1.1fr .75fr; align-items: center; gap: 50px; padding: 34px 0; border-bottom: 1px solid #cac8bf; }
.experience-number { margin: 0 0 11px; color: #756c00; font-size: 9px; font-weight: 900; letter-spacing: .16em; }
.experience-copy h3 { margin: 0 0 15px; font: 700 clamp(29px,4vw,46px)/.92 var(--display); text-transform: uppercase; }
.experience-copy > p:not(.experience-number) { max-width: 650px; color: #565650; font-size: 12px; line-height: 1.8; }
.experience-callout { margin: 18px 0 0; color: var(--ink) !important; font: 700 19px/1.1 var(--display) !important; text-transform: uppercase; }
.experience-callout strong { padding: 1px 5px; background: var(--yellow); }
.project-descriptions { display: grid; gap: 9px; margin: 0; padding-left: 17px; color: #565650; font-size: 11px; line-height: 1.65; }
.project-descriptions li::marker { color: #9b8d00; }
.experience-placeholder { min-height: 180px; color: #756d17; background: rgba(255,255,255,.35); }
.clients-section { background-color: #121211; background-image: linear-gradient(rgba(8,8,8,.48),rgba(8,8,8,.48)), url("../assets/images/dark-brick-yellow-wall.png"); background-position: center, center; background-size: cover; background-repeat: no-repeat; color: var(--white); }
.clients-heading { display: flex; align-items: end; justify-content: space-between; gap: 25px; margin-bottom: 36px; }
.clients-heading .eyebrow { margin: 0; }
.clients-heading h2 { margin: 0; font: 700 clamp(42px,6vw,68px)/.9 var(--display); text-align: right; text-transform: uppercase; }
.clients-carousel { display: grid; gap: 0; overflow: hidden; border-top: 1px solid #ffffff35; border-bottom: 1px solid #ffffff35; }
.client-row { overflow: hidden; border-bottom: 1px solid #ffffff35; }
.client-row:last-child { border-bottom: 0; }
.client-track { display: flex; width: max-content; margin: 0; padding: 0; list-style: none; animation: none; will-change: transform; }
.client-track li { flex: 0 0 324px; min-height: 112px; display: flex; align-items: center; justify-content: center; padding: 15px 24px; }
.client-logo { display: block; width: min(100%,210px); height: 78px; object-fit: contain; }
@keyframes clients-scroll-left { to { transform: translateX(-50%); } }
@keyframes clients-scroll-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.contact-section { padding: 100px 0; background-color: #10100f; background-image: radial-gradient(circle, rgba(241,196,41,.1) 1px, transparent 1.6px); background-size: 26px 26px; color: var(--white); }
.contact-layout { display: grid; grid-template-columns: 1fr minmax(270px,.7fr); align-items: center; gap: 70px; }
.contact-copy h2 { margin: 0; font: 800 clamp(53px,8vw,92px)/.83 var(--display); text-transform: uppercase; }
.contact-copy h2 em { color: var(--yellow); font-style: normal; }
.contact-copy > p:not(.eyebrow) { max-width: 400px; margin: 24px 0 0; color: #c2c0b8; font-size: 13px; }
.contact-placeholder { min-height: 220px; border-color: rgba(241,196,41,.65); color: rgba(241,196,41,.83); }
.contact-placeholder small { color: rgba(255,255,255,.62); }
.site-footer { padding: 22px 0; border-top: 1px solid #333; background: #0a0a0a; }
.footer-layout { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.site-footer p { margin: 0; color: #7e7c74; font-size: 8px; font-weight: 800; letter-spacing: .15em; }
.footer-brand .brand-logo { width: 112px; }
.back-top { color: var(--yellow); font-size: 9px; font-weight: 800; letter-spacing: .13em; text-decoration: none; }
.back-top span { margin-left: 8px; font-size: 17px; }
.service-name, .detail-panel, .experience-item, .certification-item, .coverage-flag-card { transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, background-color .22s ease; }
.service-name:hover, .detail-panel:hover, .experience-item:hover, .certification-item:hover, .coverage-flag-card:hover { transform: translateY(-3px); border-color: rgba(241,196,41,.72); box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.service-name-highlight:hover { border-color: #fff; box-shadow: 0 8px 24px rgba(241,196,41,.14); }
.will-reveal { opacity: 0; transform: translateY(12px); transition: opacity .48s ease, transform .48s ease; transition-delay: var(--reveal-delay, 0ms); }
.will-reveal.is-visible { opacity: 1; transform: translateY(0); }
.will-reveal.is-visible:hover { transform: translateY(-3px); }
@media (max-width: 991.98px) {
  .site-header { background: rgba(12,12,11,.96); }
  .hero { min-height: 680px; }
  .hero-layout { grid-template-columns: 1fr .8fr; gap: 30px; }
  .hero-wordmark { right: 4%; width: min(44vw,420px); }
  .two-column-layout { gap: 45px; }
  .coverage-layout { gap: 35px; }
  .experience-item { gap: 28px; }
}
@media (max-width: 767.98px) {
  html { scroll-padding-top: 68px; }
  .navbar { padding: 12px 0; }
  .brand-logo { width: 88px; }
  .brand-symbol { width: 33px; height: 33px; }
  .brand-name { font-size: 19px; }
  .navbar-collapse { padding: 6px 15px 13px; border-top: 1px solid rgba(255,255,255,.14); background: #0c0c0b; }
  .navbar-nav { align-items: stretch !important; }
  .nav-link { padding: 12px 0; }
  .nav-cta { justify-content: space-between; margin-top: 8px; }
  .hero { min-height: 850px; align-items: flex-start; padding-top: 100px; }
  .hero-layout { grid-template-columns: 1fr; gap: 32px; padding-top: 24px; padding-bottom: 72px; }
  .hero h1 { font-size: clamp(68px,16vw,108px); }
  .hero::before { background-image: linear-gradient(180deg, rgba(8,8,7,.55) 0%, rgba(8,8,7,.65) 52%, rgba(8,8,7,.8) 100%), linear-gradient(90deg, rgba(8,8,7,.4), rgba(8,8,7,.4)), url("../assets/bluper-hero-wide.webp"); background-position: center, center, 68% center; background-size: cover; background-repeat: no-repeat; }
  .hero-wordmark { top: auto; right: 50%; bottom: 70px; width: min(82vw,360px); height: auto; transform: translateX(50%); }
  .hero-side-signature { right: 50%; bottom: 282px; gap: 8px; font-size: 9px; transform: translateX(50%); }
  .hero-index { right: 20px; bottom: 20px; }
  .section { padding: 75px 0; }
  .two-column-layout { grid-template-columns: 1fr; gap: 32px; }
  .display-title { font-size: clamp(54px,14vw,78px); }
  .lead-copy { font-size: 21px; }
  .image-placeholder-tall { min-height: 220px; }
  .section-heading .display-title { font-size: 69px; }
  .service-name-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .service-name { min-height: 115px; padding: 15px; }
  .service-name h3 { margin-top: 24px; font-size: 27px; }
  .service-detail-intro { grid-template-columns: 1fr; gap: 18px; margin-top: 52px; }
  .service-detail-intro h3 { font-size: 45px; }
  .service-details-grid { grid-template-columns: 1fr; }
  .detail-panel { padding: 22px 17px; }
  .production-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px 6px; }
  .production-grid li { font-size: 9px; }
  .production-icon { max-width: 68px; }
  .coverage-section { min-height: 760px; background-position: right bottom; background-size: 145% auto; }
  .coverage-section::before { background: linear-gradient(90deg, rgba(10,10,9,.94), rgba(10,10,9,.6)), linear-gradient(0deg, rgba(10,10,9,.68), transparent 60%); }
  .coverage-layout { min-height: 760px; padding-top: 75px; padding-bottom: 75px; }
  .coverage-copy h2 { font-size: clamp(58px,15.5vw,86px); }
  .coverage-flags { width: min(100%, 390px); gap: 6px; margin-top: 18px; }
  .coverage-flag-card { min-height: 65px; padding: 6px; }
  .coverage-flag-card span { font-size: 7px; }
  .certifications-section { padding: 58px 0; }
  .certifications-heading { display: block; }
  .certifications-heading h2 { margin-top: 14px; text-align: left; font-size: 48px; }
  .certification-logos { grid-template-columns: 1fr; }
  .certification-item { min-height: 140px; padding: 20px 28px; }
  .certification-item + .certification-item { border-top: 1px solid #454540; border-left: 0; }
  .duns-logo { width: min(100%,200px); }
  .ecovadis-logo { font-size: 40px; }
  .repse-logo { font-size: 52px; }
  .experience-item { grid-template-columns: 1fr; gap: 17px; padding: 27px 0; }
  .experience-copy h3 { font-size: 36px; }
  .experience-placeholder { min-height: 150px; }
  .clients-section { padding: 74px 0; }
  .clients-heading { display: block; }
  .clients-heading h2 { margin-top: 14px; text-align: left; font-size: 48px; }
  .client-track li { flex-basis: 48vw; min-height: 100px; padding: 12px 18px; }
  .client-logo { width: min(100%,170px); height: 68px; }
  .contact-section { padding: 75px 0; }
  .contact-layout { grid-template-columns: 1fr; gap: 34px; }
  .contact-copy h2 { font-size: clamp(48px,13vw,72px); }
  .contact-placeholder { min-height: 175px; }
  .footer-layout { flex-direction: column; align-items: flex-start; }
  .site-footer p { order: 3; }
}
@media (max-width: 380px) {
  .hero h1 { font-size: 62px; }
  .service-name h3 { font-size: 24px; }
  .client-track li { min-height: 92px; padding: 10px 13px; }
  .client-logo { height: 62px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .intro-screen::before { animation: intro-glow 3.7s ease-out both !important; }
  .intro-screen::after { animation: intro-sweep 1.5s cubic-bezier(.2,.7,.2,1) .45s both !important; }
  .intro-atmosphere { animation: intro-particles 3.4s ease-out both !important; }
  .intro-lines i { animation: intro-line 1.25s cubic-bezier(.2,.75,.25,1) both !important; }
  .intro-lines i:nth-child(2) { animation-delay: .16s !important; }
  .intro-lines i:nth-child(3) { animation-delay: .32s !important; }
  .intro-overline { animation: intro-caption .5s ease-out 1.85s forwards !important; }
  .intro-tagline { animation: intro-caption .5s ease-out 2.25s forwards !important; }
  .intro-logo { animation: intro-logo-reveal 1.25s cubic-bezier(.16,.78,.2,1) .92s forwards !important; }
  .intro-mark-wrap::after { animation: intro-logo-shine 1.05s ease-in-out 2.05s both !important; }
}
@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) {
}